<template>
    <ht-base-table ref="childTable"
                   class="ht-base-table-expand-no-border"
                   :columns="columns1"
                   :data="data1"
                   theme="blue"
                   :border="false"
                    @on-selection-change="selectChange">
    </ht-base-table>
   <!-- <ht-base-table ref="childTable" class="ht-base-table-expand-no-border" :columns="columns1" :data="data1"
                   theme="blue"
                   :border="false"
                   :show-header="false" @on-selection-change="selectChange">
        <table slot="header" style="width: 100%;">
            <tr>
                <th v-for="(item, i) in columns1" :key="i"
                    :style="{textAlign: 'center', width: item.width ? item.width + 'px' : 'auto' }">{{item.title}}
                </th>
            </tr>
        </table>
    </ht-base-table>-->
</template>

<script>
    import Bus from '../../../libs/utils/Bus'

    export default {
        name: "expand",
        props: ['index'],
        data() {
            return {
                columns1: [
                    {
                        width: 50,
                        align: 'center'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        align: 'center',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        align: 'center',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        id: '1-1',
                        name: 'Jon Snow',
                        address: 'test',
                        age: 26
                    },
                    {
                        id: '1-2',
                        name: 'Jon Snow',
                        address: 'test',
                        age: 26
                    }
                ]
            }
        },
        methods: {
            selectChange(data) {
                console.log(data);
                let len = data.length
                switch (len) {
                    case this.data1.length:
                        this.$emit('select', {flag: true, index: this.index, data})
                        break
                    case 0:
                        this.$emit('select', {flag: false, type: 'cancel', index: this.index, data})
                        break
                    default:
                        this.$emit('select', {flag: true, type: 'part', index: this.index, data})
                }
            },
            all({data, type}) {
                this.$refs.childTable && this.$refs.childTable.$options.propsData.data.forEach((item, index) => {
                    this.$refs.childTable.objData[index]._isChecked = type
                })
            },
            part({data, type}) {
                if (!data.flag) {
                    this.$refs.childTable && data.children.forEach((item) => {
                        let idx = this.$refs.childTable.$options.propsData.data.findIndex(e => {
                            return e.id === item.id
                        })
                        this.$refs.childTable.objData[idx]._isChecked = true
                    })
                } else {
                    this.all({type: data.flag === 'all' ? true : false, data})
                }
            }
        },
        mounted() {
            Bus.$on('parentSelect' + this.index, ({data, type}) => {
                if (type === undefined) {
                    this.part({data, type})
                } else {
                    this.all({data, type})
                }
            })
        }
    }
</script>

<style lang="less">
    .ht-base-table-expand-no-border {
        border: none;

        td,th{
            border-right: none !important;
        }
        .ivu-table-header{
            thead{
                tr > th:first-child{
                    .ivu-table-cell{
                        display: none;
                    }
                }
                .ivu-table-column-center{
                    .ivu-checkbox{
                        display: none;
                    }
                }
            }
        }

        /deep/ .ivu-table-tbody {
            .ivu-table-column-center {
                border-left: 0;
                border-right: 0;
                border-bottom: 0;
                border-top: 0;
            }
        }

    }

</style>
