<template>
  <div class="action-columns">
    <a-popover trigger="click" placement="topRight" v-if="columnsKeys">
      <div slot="title">
        <a-checkbox
          :indeterminate="indeterminate"
          :checked="checkAll"
          @change="onCheckAllChange"
          class="check-all"
        />
        {{$t('列展示')}}
        <a-button style="float: right" type="link" size="small" @click="reset">{{$t('重置')}}</a-button>
      </div>
      <template slot="content">
        <div class="content" :style="{height:'300px',overflowY:'scroll'}">
        <a-list
          style="width: 100%"
          size="small"
          v-for="(col, i) in data2"

          :key="i"
        >
          <a-list-item>
            <a-checkbox
              v-model="col.visible"
              @change="(e) => onCheckChange(e, col)"
            />

            <span>{{ col.name }}</span>
            <div>
              <a-tooltip placement="top">
                <template slot="title">  {{$t('固定在列头')}} </template>
                <a-icon
                  class="action"
                  type="vertical-align-bottom"
                  :style="{ transform: 'rotate(90deg)',color:`${columnsFixed[i] =='left'? '#13c2c2 !important': '#a6adb4'}`}"
                  @click="flxed(col.name,'left')"
                />
              </a-tooltip>
              <a-tooltip placement="top">
                <template slot="title">  {{$t('固定在列尾')}} </template>
                <a-icon
                  class="action"
                  type="vertical-align-top"
                  :style="{ transform: 'rotate(90deg)', margin: '0 0 0 5px ',color:`${columnsFixed[i] =='right'? '#13c2c2 !important': '#a6adb4'}` }"
                  @click="flxed(col.name,'right')"
                />
              </a-tooltip>
            </div>
          </a-list-item>
        </a-list>
        </div>
      </template>

      <div class="set">
        <a-tooltip placement="top">
          <template slot="title"> {{$t('列设置')}}  </template>
          <a-icon type="setting" class="action" :style="{ fontSize: '16px' }" />
        </a-tooltip>
      </div>
    </a-popover>
  </div>
</template>

<script>
export default {
  props: {
    columnsKeys: Array,
    columnsFixed: Array,
    that: Object,
  },
  data () {
    return {
      data2: '',
      checkAll: true,
      indeterminate: false,
      checkedCounts: this.columnsKeys.length,
      checkednum: this.columnsKeys.length,
    }
  },
  mounted () {

    const data2 = new Object()
    Object.keys(this.columnsKeys).map((item, index) => {
      data2[index] = {
        name: this.columnsKeys[item],
        visible: true,
      }
    })
    // console.log(data2);
    this.data2 = data2
  },
  computed: {
    // setColumnsParams() {
    //   return Object.keys(this.data[0]).filter((item, key) => key != 0);
    // },
  },
  methods: {
    onCheckChange (e, col) {
      if (!col.visible) {
        this.checkedCounts -= 1
      } else {
        this.checkedCounts += 1
      }
      var columns = new Array()
      for (const col in this.data2) {
        if (this.data2[col].visible == false) {
          columns.push(this.data2[col].name)
        }
      }
      //   console.log(columns);
      this.$emit('columns', columns, this.that)
    },
    onCheckAllChange (e) {
      console.log(e.target.checked)
      if (e.target.checked) {
        this.checkedCounts = this.checkednum
        for (const col in this.data2) {
          this.data2[col].visible = true
        }
      } else {
        this.checkedCounts = 0
        for (const col in this.data2) {
          this.data2[col].visible = false
        }
      }

      var columns = new Array()
      for (const col in this.data2) {
        if (this.data2[col].visible == false) {
          columns.push(this.data2[col].name)
        }
      }
      //   console.log(columns);
      this.$emit('columns', columns, this.that)
    },
    flxed (name, direction) {
      // console.log(i,direction)
      this.$emit('getTableFixed', name, direction, this.that)
    },
    reset () {
      // 重置 列显示
      for (var i in this.data2) {
        this.data2[i].visible = true
      }
       this.checkedCounts = this.checkednum
      console.log(this.data2)
      this.$emit('columns', '', this.that)
      this.$emit('resetTableFixed', this.that)
    },
  },
  watch: {
    checkedCounts (val) {
      //   console.log(val===Object.getOwnPropertyNames(this.data[0]).length-1)
      this.checkAll = val === this.checkednum
      this.indeterminate = val > 0 && val < this.checkednum
    },
    columnsFixed (val) {
      this.columnsFixed = val
    },
  },
}
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
     width: 0 !important;
   }
</style>

