const HideCellMenus = {
  template: `
     <a-dropdown v-model="visibleMenu" @click="visibleMenu=true">
       <a-menu slot="overlay">
         <a-menu-item v-for="item in list" :key="item.key">
           <a-checkbox :checked="item.checked" @change="e=>onHideKeyChange(e.target.checked,item.key)">
             {{ item.title }}
           </a-checkbox>
         </a-menu-item>
       </a-menu>
       <a-button :size="size" :id="id"> {{placeholder}} <a-icon type="down" /> </a-button>
     </a-dropdown>
    `,
  props: {
    defHiddenKes: {
      type: Array,
      defatut: function(){
        return []
      }
    },
    id: {
      type: String,
      default: 'hideCellMenus'
    },
    placeholder: {
      type: String,
      default: '显示更多列'
    },
    size: {
        type: String,
        default: 'default'
    },
  },
  data() {
    return {
      visibleMenu: false,
      list: this.defHiddenKes.filter(item=> !item.disabled)
    };
  },
  mounted() {
  },
  watch: {
    defHiddenKes: {
      handler: function (val) {
        this.list = val.filter(item=> !item.disabled)
      },
      immediate: true
    },
    list: {
      handler: function (val) {
        const hidekey = this.list.filter(item => !item.checked).map(item => item.key)
        this.$emit('change', hidekey);
        this.$emit('input', hidekey);
      },
      immediate: true
    }
  },
  methods: {
    onHideKeyChange(checked, key) {
      const row = this.list.find(item => item.key == key)
      row.checked = checked
      this.list.splice()
    }
  },
};

export default HideCellMenus