<template>
    <div
        :class="classes"
        ref="cell"
        :style="
            renderType === 'standard-index' || renderType === 'checkbox-index'
                ? { 'padding-left': '20px', 'padding-right': 0 }
                : {}
        "
    >
        <template v-if="renderType === 'index'"
            ><span>{{
                column.indexMethod
                    ? column.indexMethod(row, naturalIndex)
                    : tableRoot.current && tableRoot.pageSize
                    ? naturalIndex + 1 + (tableRoot.current - 1) * tableRoot.pageSize
                    : naturalIndex + 1
            }}</span></template
        >

        <template v-if="renderType === 'selection'">
            <Checkbox
                :value="checked"
                :indeterminate="indeterminate"
                @click.native.prevent="toggleSelect"
                :disabled="disabled"
            ></Checkbox>
        </template>
        <div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div>
        <div
            class="ivu-table-cell-tree"
            :class="{
                'ivu-table-cell-tree-loading': childrenLoading
            }"
            v-if="showChildren"
            @click.prevent.stop="handleToggleTree"
        >
            <Icon type="ios-loading" v-if="childrenLoading" class="ivu-load-loop" />
            <Icon type="ios-arrow-forward" v-else-if="!childrenExpand" />
            <Icon type="ios-arrow-down" v-else />
        </div>
        <div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
        <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
        <template v-if="renderType === 'normal'">
            <template v-if="column.tooltip">
                <Tooltip
                    transfer
                    :content="row[column.key]"
                    :theme="column.tooltipTheme ? column.tooltipTheme : tableRoot.tooltipTheme"
                    :disabled="!showTooltip"
                    :max-width="column.tooltipMaxWidth ? column.tooltipMaxWidth : tableRoot.tooltipMaxWidth"
                    class="ivu-table-cell-tooltip"
                >
                    <span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">{{
                        row[column.key]
                    }}</span>
                </Tooltip>
            </template>
            <template v-else>
                {{ void (cellText = showCellValue()) }}
                <span
                    :class="[cellClass, cellText === '--' ? 'empty-text' : '']"
                    :title="cellText === '--' ? '' : cellText"
                    >{{ cellText }}</span
                >
            </template>
        </template>
        <template v-if="renderType === 'expand' && !row._disableExpand">
            <div :class="expandCls" @click="toggleExpand">
                <Icon type="ios-arrow-forward"></Icon>
            </div>
        </template>
        <table-expand
            v-if="renderType === 'render'"
            :row="row"
            :column="column"
            :index="index"
            :render="column.render"
        ></table-expand>
        <template v-if="renderType === 'standard-index' || renderType === 'checkbox-index'">
            <div
                :title="
                    column.indexMethod
                        ? column.indexMethod(row, naturalIndex)
                        : tableRoot.current && tableRoot.pageSize
                        ? naturalIndex + 1 + (tableRoot.current - 1) * tableRoot.pageSize
                        : naturalIndex + 1
                "
            >
                {{
                    column.indexMethod
                        ? column.indexMethod(row, naturalIndex)
                        : tableRoot.current && tableRoot.pageSize
                        ? naturalIndex + 1 + (tableRoot.current - 1) * tableRoot.pageSize
                        : naturalIndex + 1
                }}
            </div>
        </template>
        <table-slot
            v-if="renderType === 'slot'"
            :row="row"
            :column="column"
            :display="column.display || 'block'"
            :index="index"
        ></table-slot>
    </div>
</template>
<script>
import TableExpand from './expand';
import TableSlot from './slot';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import Tooltip from '../tooltip/tooltip.vue';

export default {
    name: 'TableCell',
    components: {
        Icon,
        Checkbox,
        TableExpand,
        TableSlot,
        Tooltip
    },
    inject: ['tableRoot'],
    props: {
        prefixCls: String,
        row: Object,
        column: Object,
        naturalIndex: Number, // index of rebuildData
        index: Number, // _index of data
        checked: Boolean,
        indeterminate: Boolean,
        disabled: Boolean,
        expanded: Boolean,
        fixed: {
            type: [Boolean, String],
            default: false
        },
        // 是否为 tree 子节点
        treeNode: Boolean,
        treeLevel: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            renderType: '',
            uid: -1,
            context: this.tableRoot.currentContext,
            showTooltip: false // 鼠标滑过overflow文本时，再检查是否需要显示
        };
    },
    computed: {
        classes() {
            return [
                `${this.column.cellClassName}`,
                `${this.prefixCls}-cell`,
                {
                    [`${this.prefixCls}-hidden`]:
                        !this.fixed &&
                        this.column.fixed &&
                        (this.column.fixed === 'left' || this.column.fixed === 'right'),
                    [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis !== false,
                    [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
                    [`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
                }
            ];
        },
        expandCls() {
            return [
                `${this.prefixCls}-cell-expand`,
                {
                    [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
                }
            ];
        },
        showChildren() {
            let status = false;
            if (
                this.renderType === 'html' ||
                this.renderType === 'normal' ||
                this.renderType === 'render' ||
                this.renderType === 'slot'
            ) {
                const data = this.row;
                if ((data.children && data.children.length) || '_loading' in data) {
                    if (this.column.tree) status = true;
                }
            }
            return status;
        },
        showTreeNode() {
            let status = false;
            if (
                this.renderType === 'html' ||
                this.renderType === 'normal' ||
                this.renderType === 'render' ||
                this.renderType === 'slot'
            ) {
                if (this.column.tree && this.treeNode) status = true;
            }
            return status;
        },
        showLevel() {
            let status = false;
            if (
                this.renderType === 'html' ||
                this.renderType === 'normal' ||
                this.renderType === 'render' ||
                this.renderType === 'slot'
            ) {
                if (this.column.tree && this.treeNode) status = true;
            }
            return status;
        },
        treeLevelStyle() {
            return {
                'padding-left': this.treeLevel * this.tableRoot.indentSize + 'px'
            };
        },
        childrenExpand() {
            const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
            return data._isShowChildren;
        },
        childrenLoading() {
            const data = this.tableRoot.getDataByRowKey(this.row._rowKey);
            return '_loading' in data && data._loading;
        },
        cellClass() {
            const val = this.row[this.column.key];

            if (this.column.valueMap && (val || val === 0 || val === '')) {
                const matchItem = this.column.valueMap.find(item => {
                    return String(val) === String(item.value);
                });
                if (!matchItem || !matchItem.className) {
                    return '';
                }
                return matchItem.className;
            }
        }
    },
    methods: {
        toggleSelect() {
            // hack，通过查询有没有tree的箭头来判断是不是树，想不到其他方法了
            // console.log(this.row._rowKey, this.row);
            const isTree = this.tableRoot.$el.querySelector('.ivu-table-cell-tree');
            if (isTree) {
                this.tableRoot.toggleSelect(this.index, this.row._rowKey, this.row);
            } else {
                this.tableRoot.toggleSelect(this.index);
            }
        },
        toggleExpand() {
            this.tableRoot.toggleExpand(this.index);
        },
        handleClick() {
            // 放置 Checkbox 冒泡
        },
        handleTooltipIn() {
            const $content = this.$refs.content;
            let range = document.createRange();
            range.setStart($content, 0);
            range.setEnd($content, $content.childNodes.length);
            const rangeWidth = range.getBoundingClientRect().width;
            this.showTooltip = rangeWidth > $content.offsetWidth;
            range = null;
        },
        handleToggleTree() {
            this.tableRoot.toggleTree(this.row._rowKey);
        },
        showCellValue() {
            const val = this.row[this.column.key];

            if (this.column.valueMap) {
                const matchItem = this.column.valueMap.find(item => {
                    return String(val) === String(item.value);
                });
                return (matchItem && matchItem.text) || '--';
            }

            if (val || val === 0) {
                return val;
            }

            if (this.row.isChild || this.column.tree) {
                return '';
            }
            if (!this.row.isChild && this.column.treeParent) {
                return '...';
            }
            return '--';
        }
        // 改为 table-body 中触发，因为 cell 有padding间距
        // handleCellClick (event) {
        //     this.$parent.$parent.$parent.$emit('on-cell-click', this.row, this.column, this.row[this.column.key], event);
        // }
    },
    created() {
        if (this.column.type === 'index') {
            this.renderType = 'index';
        } else if (this.column.type === 'selection') {
            this.renderType = 'selection';
        } else if (this.column.type === 'html') {
            this.renderType = 'html';
        } else if (this.column.type === 'expand') {
            this.renderType = 'expand';
        } else if (this.column.render) {
            this.renderType = 'render';
        } else if (this.column.slot) {
            this.renderType = 'slot';
        } else if (this.column.type === 'standard-index') {
            this.renderType = 'standard-index';
        } else if (this.column.type === 'checkbox-index') {
            this.renderType = 'checkbox-index';
        } else {
            this.renderType = 'normal';
        }
    }
};
</script>
<style scoped>
.empty-text {
    color: #999;
}
</style>
