<template>
  <a-dropdown :trigger="['click']" placement="bottomRight" v-model="visible">
    <a-button>显示列</a-button>
    <a-menu @click="() => { return false; }" class="yo-table--column-setting" slot="overlay">
      <a-menu-item>
        <a-checkbox :checked="checkedAll" :indeterminate="halfChecked" @change="onCheckAll">全选</a-checkbox>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item :key="column.dataIndex || column.key" v-for="column in columns">
        <a-checkbox :checked="!column.hidden" @change="(e) => onCheck(column, e)">{{column.title}}</a-checkbox>
        <a-icon
          :class="{ 'yo-table--fixed': column.fixed }"
          @click="onFixed(column)"
          type="pushpin"
        />
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      require: true,
    },
  },

  data() {
    return {
      visible: false,

      checkedAll: true,
      halfChecked: false,
    };
  },

  mounted() {
    this.onHalfCheck();
  },

  methods: {
    onHalfCheck() {
      this.halfChecked = this.columns.filter((p) => p.hidden).length > 0;
    },

    onCheck(column, e) {
      this.$set(column, 'hidden', !e.target.checked);
      this.onHalfCheck();
    },

    onCheckAll(e) {
      this.columns.forEach((column) => {
        this.$set(column, 'hidden', !e.target.checked);
      });
      this.checkedAll = e.target.checked;
    },

    onFixed(column) {
      this.$set(column, 'fixed', !column.fixed);
    },
  },
};
</script>