<template>
  <el-dropdown trigger="click" placement="bottom">
    <el-button icon="el-icon-s-operation" size="small">列设置</el-button>
    <el-dropdown-menu divided slot="dropdown">
      <span class="title">列设置</span>
      <draggable class="t_table_column_setting_dropdown" v-model="columnSet">
        <el-checkbox
          v-for="(col, index) in columnSet"
          :key="col.prop"
          @click.native.stop
          :checked="!col.hidden"
          :disabled="col.checkBoxDisabled"
          @change="(checked) => checkChanged(checked, index)"
          >{{ col.label }}</el-checkbox
        >
      </draggable>
    </el-dropdown-menu>
  </el-dropdown>
</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,
    };
  },
  mounted() {
    this.columnSet = this.getColumnSetCache();
    this.$emit("columnSetting", this.columnSet);
  },
  watch: {
    columnSet: function (n) {
      this.$emit("columnSetting", n);
      localStorage.setItem(
        `t-ui:TTable.columnSet-${this.name || this.title}`,
        JSON.stringify(n)
      );
    },
  },
  methods: {
    getColumnSetCache() {
      const value = localStorage.getItem(
        `t-ui:TTable.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,
      }));
      return columnSet;
    },
    checkChanged(checked, index) {
      this.$set(this.columnSet, index, {
        ...this.columnSet[index],
        hidden: !checked,
      });
      let 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 {
    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;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>
