<template>
    <table-column v-bind="$attrs">
      <template slot="header" slot-scope="scope">
        <p><slot name="header" v-bind="scope">{{scope.column.label}}</slot>
          <span v-if="setColumn" style="float:right;">
            <i class="fbgiconfont icon-shezhi fbg-table-column-set" @click.stop="handleClick" />
            <div class="fbg-table-column-box" @click.stop :style="{display: display+'!important', height: height, width: setColumnWidth}">
              <ul ref="ulRef">
                <li class="fbg-table-column-title" style="border-bottom: 1px solid #ccc;">注：表格列最多为{{max}}列</li>
                <template v-for="(item,index) in columns" >
                  <li v-if="isShowColumn(item)" :key="index" class="fbg-table-column-item">
                    <checkbox-item @change="handleChange(item, $event)" :isChecked="item.checked !== false" :label="item.label" />
                  </li>
                </template>
              </ul>
            </div>
          </span>
        </p>
      </template>
      <template :slot="(!$attrs.type||$attrs.type==='expand')?'default':''" slot-scope="scope">
        <i v-if="renderIcon" :class="'fbgiconfont fbg-table-icon fbg-table-'+renderIcon(scope.row)"  />
        <slot v-bind="scope"></slot>
      </template>
    </table-column>
</template>
<script>
import {TableColumn, Divider} from 'element-ui';
import Checkbox from '../checkbox';
import util from '../../utils';

export default {
  components: {
    'table-column': TableColumn,
    'checkbox-item': Checkbox,
    'divider': Divider
  },
  inject: ['columns'],
  props: {
    setColumn: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 10
    },
    setColumnWidth: {
      type: String,
      default: '200px'
    },
    renderIcon: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      display: 'none',
      height: '0px',
      isShow: false
    };
  },
  mounted() {
    document.addEventListener('click', () => {
      this.hide();
    })
  },
  methods: {
    show() {
      this.isShow = true;
      this.display = 'block';
      let timer = setTimeout(() => {
        this.height = util.getStyle(this.$refs.ulRef, 'height');
        clearTimeout(timer);
        timer = null;
      }, 0)
    },
    hide() {
      this.height ="0px";
      let timer = setTimeout(() => {
        this.display = 'none';
        this.isShow = false;
        clearTimeout(timer);
        timer = null;
      }, 300);
    },
    isShowColumn(item) {
      return !item.setColumn&&!item.type&&(item.isConfigurable === true||typeof item.isConfigurable === 'undefined');
    },
    handleClick() {
      if (this.isShow === true) {
        this.hide();
      } else {
        this.show();
      }
    },
    handleChange(item, flag) {
      const list = this.columns.filter(item => item.checked !== false && this.isShowColumn(item));
      if (flag && list.length+1 > this.max) {
        this.$emit('overflowColnumCallback', item);
      } else {
        this.$set(item, 'checked', flag);
      }
    }
  }
}
</script>
<style lang="scss">
.el-table{
  overflow: visible!important;
  * {
    font-size: 12px;
  }
  // .el-table__header-wrapper {
  //   overflow: visible!important;
  // }
  .cell{
    position: static !important;
  }
  th {
    font-weight: 400;
    color: #333;
    background-color: rgba(244, 245, 246, 1)!important;
    border-right: 1px solid #fff;
    line-height: 30px!important;
    padding: 0px!important;
    position: static !important;
    overflow: visible!important;
    div {
      line-height: 35px!important;
      display: block!important;
      overflow: visible!important;
    }
    .cell {
      p {
        display: inline;
      }
    }
  }
  td{
    padding: 5px 0px!important;
  }
}
</style>
<style lang="scss" scoped>
.fbg {
  &-table {
    &-column {
      &-set {
        cursor: pointer;
      }
      &-box {
        background-color: #fff;
        height: 0px;
        transition: height 0.3s;
        display: none;
        box-shadow: 0px 0px 5px $themeShadowColor;
        border-radius: 3px;
        position: absolute;
        z-index: 9999;
        right: 0px;
        overflow-x: hidden!important;
        overflow-y: auto!important;
        max-height: 290px
      }
      &-item {
        list-style: none;
      }
      &-title {
        color: #999;
      }
    }
    &-icon {
      font-size: 12px;
      padding-right: 5px;
    }
    &-success {
      color: #3DCCA6 ;
      font-family: 'fbgiconfont';
      &::before {
        content: '\e6b7';
      }
    }
    &-error{
      font-family: 'fbgiconfont';
      color: #FF4C4C ;
      font-size: 14px;
      &::before {
        content: '\e6b8';
      }
    }
  }
}
</style>