<template>
  <div class="transfer-wrap">
    <div class="transfer-allData">
      <div class="transfer-allData-filter">
        <span>{{titles&&titles[0]?titles[0]:'全部'}}</span>
        <div class="transfer-filter-input">
          <el-input
            v-model="filters.all"
            :maxlength="200"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
        <div>
          <el-button
            size="mini"
            @click="filterAllData"
          >查询</el-button>
        </div>
      </div>
      <div class="transfer-allData-box">
        <select
          class="transfer-allData-select"
          multiple
          v-model="selected.all"
        >
          <option
            v-for="(item, index) in allDataOptions"
            :key="index"
            :value="getValue('key',item)"
          >{{getValue('label',item)}}</option>
        </select>
      </div>
    </div>
    <div class="transfer-btnBox">
      <div class="cancel-btn-box">
        <div
          class="transfer-btnBox-btn"
          @click="removeSelectedValue(true)"
        >
          <i class="el-icon-d-arrow-left"></i>
        </div>
        <div
          class="transfer-btnBox-btn"
          @click="removeSelectedValue()"
        >
          <i class="el-icon-arrow-left"></i>
        </div>
      </div>
      <div class="selected-btn-box">
        <div
          class="transfer-btnBox-btn"
          @click="addSelectedValue()"
        >
          <i class="el-icon-arrow-right"></i>
        </div>
        <div
          class="transfer-btnBox-btn"
          @click="addSelectedValue(true)"
        >
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <el-button
        size="mini"
        type="primary"
        @click="submitHandle"
      >确定</el-button>
      <br>
      <br>
      <el-button
        size="mini"
        @click="cancelHandle"
      >取消</el-button>
    </div>
    <div class="transfer-selectData">
      <div class="transfer-selectData-filter">
        <span>{{titles&&titles[1]?titles[1]:'已选'}}</span>
        <div class="transfer-filter-input">
          <el-input
            v-model.trim="filters.selected"
            :maxlength="200"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
        <div>
          <el-button
            size="mini"
            @click="filterSelectedData"
          >查询</el-button>
        </div>
      </div>
      <div class="transfer-selectData-box">
        <select
          class="transfer-selectData-select"
          multiple
          v-model="selected.value"
        >
          <option
            v-for="(item, index) in selectDataOptions"
            :key="index"
            :value="getValue('key',item)"
          >{{getValue('label',item)}}</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ks-transfer',
  props: {
    titles: Array,
    list: Array,
    value: Array,
    onChange: Function,
    mapProps: Object,
  },

  data() {
    return {
      filters: this.initFilter(),
      trueValue: this.value,
      selected: {
        all: [],
        value: [],
      },
    };
  },
  watch: {
    value(nVal) {
      if (nVal && nVal.length) {
        this.trueValue = nVal;
      } else {
        this.trueValue = [];
      }
    },
  },
  computed: {
    allDataOptions() {
      return this.list
        .filter(
          i =>
            !this.trueValue.includes(
              this.mapProps ? i[this.mapProps.key] : i.id
            )
        )
        .filter(i =>
          this.filters.allValue
            ? this.mapProps
              ? i[this.mapProps.label].includes(this.filters.allValue)
              : i.label.includes(this.filters.allValue)
            : true
        );
    },
    selectDataOptions() {
      return this.list
        .filter(i =>
          this.trueValue.includes(this.mapProps ? i[this.mapProps.key] : i.id)
        )
        .filter(i =>
          this.filters.selectedValue
            ? this.mapProps
              ? i[this.mapProps.label].includes(this.filters.selectedValue)
              : i.label.includes(this.filters.selectedValue)
            : true
        );
    },
  },
  methods: {
    initFilter() {
      return {
        all: '',
        allValue: '',
        selected: '',
        selectedValue: '',
      };
    },
    filterAllData() {
      this.filters.allValue = this.filters.all;
    },
    filterSelectedData() {
      this.filters.selectedValue = this.filters.selected;
    },
    addSelectedValue(flag) {
      this.trueValue = flag
        ? this.list.map(i => i.id)
        : [...this.trueValue, ...this.selected.all];
    },
    removeSelectedValue(flag) {
      this.trueValue = flag
        ? []
        : this.trueValue.filter(i => !this.selected.value.includes(i));
    },
    submitHandle() {
      this.filters = this.initFilter();
      if (this.onChange) {
        this.onChange(this.trueValue);
      } else {
        this.$emit('input', this.trueValue);
        this.$emit('close');
      }
    },
    cancelHandle() {
      this.filters = this.initFilter();
      this.$emit('close');
    },
    getValue(key, item) {
      if (this.mapProps) {
        return item[this.mapProps[key]];
      }
      if (key === 'key') return item.id;
      return item[key];
    },
  },
};
</script>

<style lang="scss">
.transfer-wrap {
  height: 600px;
  display: flex;
  .transfer-allData,
  .transfer-selectData {
    flex: 1;
    .transfer-selectData-box,
    .transfer-allData-box {
      width: 100%;
      height: 560px;
      .transfer-selectData-select,
      .transfer-allData-select {
        width: 100%;
        height: 100%;
      }
    }
  }
  .transfer-btnBox {
    width: 100px;
    text-align: center;
    .transfer-btnBox-btn {
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 0 auto;
      font-size: 30px;
    }
    .cancel-btn-box {
      margin-top: 100px;
      margin-bottom: 100px;
    }
    .selected-btn-box {
      margin-bottom: 50px;
    }
  }
  .transfer-selectData-filter,
  .transfer-allData-filter {
    display: flex;
    height: 40px;
    line-height: 40px;
    .transfer-filter-input {
      flex: 1;
      margin: 0 10px 0 5px;
    }
  }
}
</style>
