<template>
    <el-table-column :prop="prop" v-bind="$attrs">
        <template slot-scope="scope">
            <span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
                <i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
                {{ scope.row[prop] }}
            </span>
        </template>
    </el-table-column>
</template>

<script>
import isArray from 'lodash/isArray'
export default {
    name: 'table-tree-column',
    props: {
        prop: {
            type: String
        },
        treeKey: {
            type: String,
            default: 'id'
        },
        parentKey: {
            type: String,
            default: 'parentId'
        },
        levelKey: {
            type: String,
            default: '_level'
        },
        childKey: {
            type: String,
            default: 'children'
        }
    },
    methods: {
        childStyles(row) {
            return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
        },
        iconClasses(row) {
            return [!row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom']
        },
        iconStyles(row) {
            return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
        },
        hasChild(row) {
            return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
        },
        // 切换处理
        toggleHandle(index, row) {
            if (this.hasChild(row)) {
                var data = this.$parent.store.states.data.slice(0)
                data[index]._expanded = !data[index]._expanded
                if (data[index]._expanded) {
                    data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
                } else {
                    data = this.removeChildNode(data, row[this.treeKey])
                }
                this.$parent.store.commit('setData', data)
                this.$nextTick(() => {
                    this.$parent.doLayout()
                })
            }
        },
        // 移除子节点
        removeChildNode(data, parentId) {
            var parentIds = isArray(parentId) ? parentId : [parentId]
            if (parentId.length <= 0) {
                return data
            }
            var ids = []
            for (var i = 0; i < data.length; i++) {
                if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
                    data[i]._expanded = false
                    ids.push(data.splice(i, 1)[0][this.treeKey])
                    i--
                }
            }
            return this.removeChildNode(data, ids)
        }
    }
}
</script>
