<template>
    <div class="bctable">
        <template v-if="data.length>0">
        <Table
            :width='width'
            :height='height'
            :stripe='stripe' 
            :border='border'
            :row-key="rowKey" 
            :disabled-hover='disabledHover'
            :highlight-row='highlightRow'
            :columns="columns1" 
            :data="data" 
            :loading="loading"
            @on-selection-change="seclectChange"
            @on-row-click='rowClick'
            @on-row-dblclick='rowdblclick'
            @on-current-change='currentChange'
            @on-select-all='selectAll'
            @on-select-all-cancel='selectAllCancel'
            @on-sort-change='sortChange'
            @on-filter-change='filterChange'
            >
                <template  v-for="column in columns1"  :slot="column.slot?column.slot:''" slot-scope="scope" >
                    <slot :name="column.slot?column.slot:''" v-bind="scope" ></slot>
                </template>
        </Table>
        </template>
        <noData v-else :cols="columns" :height="height" :loading="loading"/>
    </div>
</template>
<script>
import noData from '../noData/index.vue'
export default {
    name:'bcTable',
    components:{noData},
    props:{
        rowKey:[Boolean, String],
        loading:{
            type: Boolean,
            default: false
        },
        columns: Array, // 表头数据 //showColums 是否显示 选择显示列的按钮
        data: Array, // 表格数据
        width: [Number, String],//表格宽度
        height: [Number, String],
        stripe: { // 是否显示间隔斑马纹
            type: Boolean,
            default: false
        },
        border: { // 是否显示纵向边框
            type: Boolean,
            default: false
        },
        disabledHover: { // 禁用鼠标悬停时的高亮
            type: Boolean,
            default: false
        },
        highlightRow: { // 是否支持高亮选中的行，即单选
            type: Boolean,
            default: false
        }
    },
     data () {
      return {
        columns1:[],
        cols:[],
        disabled:false
      }
    },
    created(){
        this.columns1 = Object.assign([],this.columns)
        for(let i of this.columns1){
            i.disabled = false
            if(i.key)this.cols.push(i.key)
        }
        //showColums 是否显示 选择显示列的按钮
        for(let i of this.columns1){
            if(i.showColums==true){
                i.renderHeader=(h,params)=>{
                    if(i.key){
                        i.disabled=true // 有选择列的本身列不可删除，不然没得选择显示隐藏的checkbox了
                    }
                    i.className='showColum'
                    let vm = this
                    return h('div',{
                        style:{
                            display:'flex',
                            justifyContent: 'space-around',
                            alignItems: 'center',
                            width:'100%'
                        }
                    },[
                        params.column.title,
                        h('Tooltip',{
                            props: {
                                placement: 'bottom',
                                transfer:true,
                                theme:'light',
                                maxWidth:'200'
                            },
                        },[
                            h('Icon', {
                                props: { type: 'md-list-box' },
                                style:{fontSize:'16px'}
                            }),
                            h('div',{
                                slot:'content'
                            },[
                                h('CheckboxGroup',{
                                    props: {
                                        value: vm.cols,
                                    },
                                    on: {
                                        'on-change': (value) => {
                                        vm.showCols(value)
                                        },
                                    },
                                },
                                vm.columns.map((item)=>{
                                    if(item.key){
                                        return h('Checkbox',{
                                            props:{
                                                label:item.key,
                                                disabled: item.disabled
                                            }
                                        },item.title)
                                    }
                                })
                                )
                            ]),

                        ],)
                    ])
                }
            }
        }
    },
    methods:{
        showCols(val){
            this.cols = val
            let arr=[]
            for(let i of this.columns){
                if(this.cols.includes(i.key)||!i.key){
                    if(val.length<4){
                        i.disabled = true
                    } else {
                        i.disabled = false
                    }
                    arr.push(i)
                }
            }
            this.columns1=arr
            console.log(this.columns1)
            this.$forceUpdate()
        },
      /**
       * 自带事件
       */
      rowClick(data,index){//单击某一行时触发,data==当前行数据，index==当前行的下标
        this.$emit("on-row-click",data,index)
      },
      rowdblclick(data,index){//双击击某一行时触发,data==当前行数据，index==当前行的下标
        this.$emit("on-row-dblclick",data,index)
      },
      currentChange(currentRow,oldCurrentRow){//开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发,currentRow==当前高亮行数据，oldCurrentRow==上次高亮行数据
        this.$emit("on-current-change",currentRow,oldCurrentRow)
      },
      seclectChange(selection){//在多选模式下有效，只要选中项发生变化时就会触发,selection==已选项数据
        this.$emit("on-selection-change",selection)
      },
      selectAll(selection){//在多选模式下有效，点击全选时触发,selection：已选项数据
        this.$emit("on-select-all",selection)
      },
      selectAllCancel(selection){//在多选模式下有效，取消点击全选时触发,selection：已选项数据
        this.$emit("on-select-all-cancel",selection)
      },
      sortChange(column,key,order){//排序时有效，当点击排序时触发,column==当前列数据,key==排序依据的指标,order==asc/desc
        this.$emit("on-sort-change",column,order,key)
      },
      filterChange(column){//筛选时有效，筛选条件发生变化时触发,column==当前列数据
        this.$emit("on-filter-change",column)
      },
  }
}
</script>
<style>
/deep/.bctable .ivu-table-cell{
    display: flex!important;
    width:100%!important;
}
</style>