<template>
  <div :class="_class">
    <SelectBox v-bind.sync="beforeSelectBoxProps"/>
    <Action v-bind.sync="actionProps"/>
    <SelectBox v-bind.sync="afterSelectBoxProps"/>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';
  import Action from './action';
  import SelectBox from './selectBox';

  const name = 'hive-transfer';
  let _searchValues = ['', ''];

  export default {
    name,
    components: {
      Action,
      SelectBox,
    },
    mixins: [FormSize, WatchCurValue],
    props: {
      data: {
        type: Array,
        default: function() {
          return [[], []];
        },
      },
      values: {
        type: Array,
        default: function() {
          return [];
        },
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      titles: {
        type: Array,
        default: function() {
          return ['源列表', '目的列表'];
        },
      },
      unit: {
        type: String,
        default: '条',
      },
      searchFlag: {
        type: Boolean,
        default: false,
      },
      selectedKeys: {
        type: Array,
        default: function() {
          return [[], []];
        },
      },
      // 两边列表发生改变时触发回调方法
      onChange: {
        type: Function,
      },
      // 选项被选着时触发回调方法
      onSelectChange: {
        type: Function,
      },
    },
    data() {
      return {
        prefixClassName: name,
        // searchValues: ['', ''],
        curSelectedKeys: this.selectedKeys,

        selectBoxProps: {
          disabled: this.disabled,
          prefixClass: name,
          unit: this.unit,
          searchFlag: this.searchFlag,
        },
        beforeSelectBoxProps: {
          disabled: this.disabled,
          prefixClass: name,
          unit: this.unit,
          searchFlag: this.searchFlag,

          index: 0,
          data: this.getData()[0],
          selectKeys: this.selectedKeys[0],
          title: this.titles[0],
          searchValue: _searchValues[0],

          onSelect: this.onSelect,
          onSelectAll: this.onSelectAll,
          onSearch: this.onSearch,
        },
        actionProps: {
          disabled: this.disabled,
          prefixClass: name,
          selectedKeys: this.selectedKeys,

          onAction: this.onAction,
        },
        afterSelectBoxProps: {
          disabled: this.disabled,
          prefixClass: name,
          unit: this.unit,
          searchFlag: this.searchFlag,

          index: 1,
          data: this.getData()[1],
          selectKeys: this.selectedKeys[1],
          title: this.titles[1],
          searchValue: _searchValues[1],

          onSelect: this.onSelect,
          onSelectAll: this.onSelectAll,
          onSearch: this.onSearch,
        },
      };
    },
    computed: {
      _class() {
        return [`${name}`];
      },
    },
    watch: {
      values(value) {
        this.beforeSelectBoxProps.data = this.getData()[0];
        this.afterSelectBoxProps.data = this.getData()[1];
      },
      disabled(value) {
        this.beforeSelectBoxProps.disabled = value;
        this.afterSelectBoxProps.disabled = value;
      },
      selectedKeys(value) {
        this.curSelectedKeys = value;
        this.beforeSelectBoxProps.selectKeys = value[0];
        this.afterSelectBoxProps.selectKeys = value[1];
        this.actionProps.selectedKeys = value;
      },
      curSelectedKeys(value) {
        console.log(value);
      // this.beforeSelectBoxProps.selectKeys = value[0];
      // this.afterSelectBoxProps.selectKeys = value[1];
      },
      searchValues(value) {
        console.log(value);
      },
    },
    mounted() {
      this.changeSelectKeys();
    },

    methods: {
      onSearch(index, e) {
        // this.searchValues[index] = e.target.value;
        _searchValues[index] = e.target.value;
        this.beforeSelectBoxProps.searchValue = _searchValues[0];
        this.afterSelectBoxProps.searchValue = _searchValues[1];
      },

      changeSelectKeys() {
        this.beforeSelectBoxProps.selectKeys = this.curSelectedKeys[0] || [];
        this.afterSelectBoxProps.selectKeys = this.curSelectedKeys[1] || [];
        this.actionProps.selectedKeys = this.curSelectedKeys;
      },
      getData() {
        var d = this.data;
        var that = this;
        return [
          d.filter(item => !(that.values || []).some(key => key === item.key)),
          d.filter(item => (that.values || []).some(key => key === item.key)),
        ];
      },

      onSelect(index, item) {
        if (this.disabled) return;
        if (item.disabled) return;

        var key = item.key;
        const currentSelectKeys = this.curSelectedKeys[index];
        const keyIndex = currentSelectKeys.findIndex(k => k === key);
        keyIndex === -1
          ? currentSelectKeys.push(key)
          : currentSelectKeys.splice(keyIndex, 1);
        this.curSelectedKeys[index] = currentSelectKeys;

        this.changeSelectKeys();

        this.onSelectChange &&
          this.onSelectChange(this.curSelectedKeys[0], this.curSelectedKeys[1]);
      },
      onSelectAll(index) {
        if (this.disabled) return;

        var that = this;

        const currentSelectKeys = this.curSelectedKeys[index];
        // const searchValue = this.searchValues[index];

        const keys = this.getData()[index].filter(
          item =>
            !item.disabled &&
            (!that.searchValue || item.title.indexOf(that.searchValue) !== -1)
        )
          .map(item => item.key);

        if (
          currentSelectKeys.every(key => keys.some(k => k === key)) &&
          currentSelectKeys.length === keys.length
        ) {
          that.curSelectedKeys[index] = [];
        } else {
          that.curSelectedKeys[index] = keys;
        }

        this.onSelectChange &&
          this.onSelectChange(that.curSelectedKeys[0], this.curSelectedKeys[1]);
      },
      onAction(mode) {
        if (this.disabled) return;

        var that = this;
        let valueKeys;
        let moveKeys;
        if (mode === 'join') {
          moveKeys = this.curSelectedKeys[0];
          valueKeys = moveKeys.concat(that.getData()[1].map(item => item.key));
          this.curSelectedKeys[0].splice(0, this.curSelectedKeys[0].length);
        } else {
          moveKeys = this.curSelectedKeys[1];
          valueKeys = this.values.filter(key => !moveKeys.some(k => k === key));
          this.curSelectedKeys[1].splice(0, this.curSelectedKeys[1].length);
        }
        this.onSelectChange &&
          this.onSelectChange(this.curSelectedKeys[0], this.curSelectedKeys[1]);
        this.onChange && this.onChange(valueKeys, mode, moveKeys);
      },
    },
  };
</script>
