<template>
  <el-transfer v-model="value" :data="columns" :titles="titles" v-bind="$attrs" @change="dataChange"></el-transfer>
</template>

<script>
export default {
  name: "ColumnTransfer",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    titles: {
      type: Array,
      default: () => ['显示', '隐藏']
    }
  },
  data() {
    return {
      value: []
    }
  },
  watch: {
    columns: {
      immediate: true,
      handler: function(val) {
        // 显隐列初始默认隐藏列
        console.log('columns is set to ' + val)
        const result = []
        for (let item in val) {
          const column = val[item]
          const hidden = column.visible === false || column.hidden === true
          if (hidden) {
            result.push(parseInt(item));
          }
          this.value = result
        }
      }
    }
  },
  methods: {
    dataChange(data) {
      for (let item in this.columns) {
        const column = this.columns[item]
        const key = column.key
        column.visible = !data.includes(key)
        column.hidden = !column.visible
      }
      this.$emit('change', this.columns)
    }
  }
}
</script>

<style scoped>

</style>
