<!--expand.vue-->
<!--
<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>
</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>
-->

<!--main.vue-->
<template>
    <div class="ht-base-table-expand-nopadding-demo">
        <ht-base-table ref="parentTable" :columns="columns10" :data="data9" border no-expand-padding
                       @on-select="selected"
                       @on-select-cancel="selectCancel"
                       @on-selection-change="change"
                       @on-expand="rowExpand">
        </ht-base-table>
    </div>
</template>

<script type="text/jsx">
    import Expand from './expand.vue'
    import Bus from '../../../libs/utils/Bus'

    export default {
        name: 'HtBaseTableExpandNopaddingDemo',
        data() {
            return {
                columns10: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return (
                                <Expand index={params.index} on-select={this.selectExpand.bind(this)}></Expand>
                            )
                        }
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data9: [
                    {
                        id: 0,
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        job: 'Data engineer',
                        interest: 'badminton',
                        birthday: '1991-05-14',
                        book: 'Steve Jobs',
                        movie: 'The Prestige',
                        music: 'I Cry'
                    },
                    {
                        id: 1,
                        name: 'Jim Green',
                        age: 25,
                        address: 'London No. 1 Lake Park',
                        job: 'Data Scientist',
                        interest: 'volleyball',
                        birthday: '1989-03-18',
                        book: 'My Struggle',
                        movie: 'Roman Holiday',
                        music: 'My Heart Will Go On'
                    },
                    {
                        id: 2,
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        job: 'Data Product Manager',
                        interest: 'tennis',
                        birthday: '1992-01-31',
                        book: 'Win',
                        movie: 'Jobs',
                        music: 'Don’t Cry'
                    },
                    {
                        id: 3,
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        job: 'Data Analyst',
                        interest: 'snooker',
                        birthday: '1988-7-25',
                        book: 'A Dream in Red Mansions',
                        movie: 'A Chinese Ghost Story',
                        music: 'actor'
                    }
                ]
            }
        },
        computed: {
            cache() {
                return [...new Set(this.data9)].map(item => {
                    return {children: []}
                })
            }
        },
        methods: {
            change() {

            },
            selectExpand({flag, type, index, data}) {
                this.cache[index].children = data
                this.cache[index].flag = type === 'part' ? undefined : type === 'cancel' ? 'cancel' : 'all'
                let dom = this.$refs.parentTable.$children[1].$children[index].$el.cells
                dom = Array.prototype.slice.call(dom)[1]
                if (type === 'part') {
                    (dom.className.indexOf('part-select') < 0) && (dom.className += ' part-select')
                } else {
                    dom.className = dom.className.replace('part-select', '')
                }
                this.$refs.parentTable.objData[index]._isChecked = flag

            },
            selected(data, row) {
                this.cache[row.id].flag = 'all'
                let dom = this.$refs.parentTable.$children[1].$children[row.id].$el.cells
                dom = Array.prototype.slice.call(dom)[1]
                dom.className = dom.className.replace('part-select', '')

                Bus.$emit('parentSelect' + row.id, {data, type: true})
            },
            selectCancel(data, row) {
                this.cache[row.id].flag = 'cancel'
                Bus.$emit('parentSelect' + row.id, {data, type: false})
            },
            rowExpand(row, status) {
                this.$nextTick(() => {
                    Bus.$emit('parentSelect' + row.id, {data: this.cache[row.id]})
                })
                this.changeIcon({type: status, index: row.id})
            },
            changeIcon({type, index}) {
                let add = `<i class="ht-base-icon icon uedicon ht-base-LiRa_add"></i>`
                let cross = `<i class="ht-base-icon icon uedicon ht-base-LiRa_cross"></i>`
                let doms = document.querySelectorAll('.ht-base-table-expand-nopadding-demo .ivu-table-cell-expand')
                doms = Array.prototype.slice.call(doms)
                doms.map((item, idx) => {
                    if (type === 'init') {
                        item.innerHTML = add
                    }
                    if (index === idx) {
                        item.innerHTML = type === true ? cross : add
                    }
                })
            }
        },
        mounted() {
            this.changeIcon({type: 'init'})
        }
    }
</script>
<style lang="less">
    .ht-base-table-expand-nopadding-demo {
        .ivu-table-header {
            thead {
                .ivu-table-column-center {
                    .ivu-checkbox {
                        display: none;
                    }
                }
            }
        }
    }
</style>

