<template>
  <div class="top-right-btn" style="padding-right: 4px;">
    <el-row>
      <el-dropdown trigger="click" placement="bottom">
        <el-button size="mini" circle icon="el-icon-menu" />
        <el-dropdown-menu slot="dropdown" divided>
          <span class="title">列设置</span>
          <draggable v-model="columnSet" class="t_table_column_setting_dropdown">
            <el-checkbox
              v-for="(col, index) in columnSet"
              :key="col.prop"
              :checked="!col.hidden"
              :disabled="col.checkBoxDisabled"
              @click.native.stop
              @change="checked => checkChanged(checked, index)"
            >{{ col.label }}</el-checkbox>
          </draggable>
        </el-dropdown-menu>
      </el-dropdown>
    </el-row>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'ColumnSet',
  components: {
    draggable
  },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      columnSet: null
    }
  },
  watch: {
    columnSet: function(n) {
      this.$emit('columnSetting', n)
      localStorage.setItem(`xy-ui:table.columnSet-${this.name || this.title}`, JSON.stringify(n))
    }
  },
  mounted() {
    this.columnSet = this.getColumnSetCache()
    this.$emit('columnSetting', this.columnSet)
  },
  methods: {
    getColumnSetCache() {
      const value = localStorage.getItem(`xy-ui:table.columnSet-${this.name || this.title}`)
      return value ? JSON.parse(value) : this.initColumnSet()
    },
    initColumnSet() {
      const columnSet = this.columns.map((col, index) => ({
        label: col.label,
        prop: col.prop,
        hidden: false,
        checkBoxDisabled: false
      }))
      console.log(columnSet)
      return columnSet
    },
    checkChanged(checked, index) {
      this.$set(this.columnSet, index, { ...this.columnSet[index], hidden: !checked })
      const obj = {}
      this.columnSet.map(val => {
        val.hidden in obj || (obj[val.hidden] = [])
        obj[val.hidden].push(val.hidden)
      })
      if (obj.false && obj.false.length < 2) {
        this.columnSet.map((val, key) => {
          if (!val.hidden) {
            this.$set(this.columnSet, key, { ...this.columnSet[key], checkBoxDisabled: true })
          }
        })
      } else {
        this.columnSet.map((val, key) => {
          if (!val.hidden) {
            this.$set(this.columnSet, key, { ...this.columnSet[key], checkBoxDisabled: false })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dropdown-menu {
  padding: 15px;
  font-size: 14px;
  .title {
    display: inline-block;
    padding-bottom: 4px;
    font-weight: bold;
  }
  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #262626;
  }
  .t_table_column_setting_dropdown {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>
