<template>
  <div class="xd-transfer">
    <el-transfer
      filterable
      v-model="transfer"
      :left-default-checked="left"
      :right-default-checked="right"
      :filter-method="filterMethod"
      :filter-placeholder="placeholder"
      :titles="title"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      :data="uiList"
      @change="handleChange"
      :disabled="disabled"
    >
    </el-transfer>
  </div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  /**
   * @description Transfer 穿梭框
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/radio
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Array} defaultValue 选中被穿越的数据列表 （选填） 默认: []
   * @property {Array|null} list 数据列表数据 （选填） 默认: null  null=>使用测试数据列表
   * @property {Array} leftDefaultValue 右侧选中数据 （选填） 默认: []
   * @property {Array} leftDefaultValue 左侧被选中数据 （选填） 默认: []
   * @property {Array} rightDefaultValue 右侧被选中数据 （选填） 默认: []
   * @property {Array} title 左右标题显示 默认：['Source', 'Target']
   * @property {String} placeholder 输入提示文案 默认：请输入搜索内容
   *
   * @event {Function} change 选中改变事件 参数：{value, select}
   * @v-model 绑定数据
   */

  export default {
    name: "XdTransfer",
    mixins: [emitter],
    props: {
      defaultValue: {
        type:Array,
        default() {
          return []
        }
      },
      list: {
        type: Array|null,
        default:null
      },
      leftDefaultValue: {
        type: Array,
        default(){
          return []
        }
      },
      rightDefaultValue: {
        type: Array,
        default() {
          return []
        }
      },
      title: {
        type: Array,
        default() {
          return ['Source', 'Target']
        }
      },
      placeholder:{
        type: String,
        default: '请输入搜索内容'
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    watch:{
      list(){
        this.init();
      }
    },
    data(){
      return  {
        uiList: [],
        left: [],
        right: [],
        transfer: [],

        testList: [
          {label: '上海', pinyin: 'shanghai', key: 1, first_pinyin: 'sh'},
          {label: '北京', pinyin: 'beijing', key: 2, first_pinyin: 'bj'},
          {label: '广州', pinyin: 'guangzhou', key: 3, first_pinyin: 'gz'},
          {label: '深圳', pinyin: 'shenzhen', key: 4, first_pinyin: 'sz'},
          {label: '南京', pinyin: 'nanjing', key: 5, first_pinyin: 'nj'},
          {label: '西安', pinyin: 'xian', key: 6, first_pinyin: 'xa'},
          {label: '成都', pinyin: 'chengdu', key: 7, first_pinyin: 'cd'}
        ],
      }
    },
    created(){
      this.init()
    },
    methods:{
      init(){
        if (this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testList);
        else {
          let temp = true;
          this.list.map((item) => {
            if (!item.label || !item.key) {
              temp = false;
            }
          });
          if (!temp) throw new Error('数据格式错误:[{label: \'上海\', key: 1}]');
          this.uiList = this.$xdHelper.cloneDeep(this.list);
        }
        this.transfer = this.defaultValue;
        this.left = this.leftDefaultValue;
        this.right = this.rightDefaultValue;
        this.handleChange(this.defaultValue);
      },
      handleChange(value){
        let temp = [];
        value.map((value) =>{
          let item = this.$xdHelper.isKeyInLists(this.uiList, value, 'key');
          if(item) {
            temp.push(item)
          }
        });
        this.$emit('change', {value, select: temp})
        this.$emit('input', value);
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [value]);
          this.dispatch('ElFormItem', 'el.form.blur', [value])
        }
      },

      filterMethod(query, item){
        let temp = [];
        if (item.pinyin && item.pinyin.indexOf(query) > -1) temp.push(true);
        if (item.first_pinyin && item.first_pinyin.indexOf(query) > -1) temp.push(true);
        if (item.label && item.label.indexOf(query) > -1) temp.push(true);
        return temp.length > 0
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-transfer {
    & ::v-deep {
      .el-transfer-panel {
        min-width: 300px;
        width: 20%;
        height: 350px;
      }

      .el-transfer-panel__list.is-filterable {
        min-height: 250px;
      }

    }
  }

  @media screen and (max-width: 768px) {
    .xd-transfer {
      & ::v-deep {
        .el-transfer-panel {
          min-width: 100%;
          height: 350px;
        }

        .el-transfer__buttons {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
        }

        .el-transfer__buttons > * {
          padding: 10px;
          margin: 0 10px !important;
          font-size: 16px;
        }

        .el-transfer-panel__list.is-filterable {
          min-height: 250px;
        }


      }
    }
  }

</style>
