<template>
  <LabelBox
    :label="formItems.attrs?.label"
    :need-star="formItems.attrs?.needStar"
    :width="formItems.attrs?.width"
  >
    <el-select
      v-model="selectedLabels"
      size="mini"
      :placeholder="formItems.attrs?.placeholder || '请选择'"
      :clearable="formItems.clearable || true"
      :filterable="false"
      v-bind="formItems.attrs"
      popper-class="el-select-popper-class display-none"
      v-on="formItems.events"
      @change="handleChange"
      @focus="showTransfer = true"
      @clear="handleClear"
    />

    <transfer-list
      v-if="showTransfer"
      v-model="value"
      :data="dataSource"
      :preset-selected="presetSelectedKeys"
      v-bind="formItems.attrs?.info"
      @cancel="showTransfer = false"
      @confirm="handleConfirm"
      @change="handleChangeForTransfer"
    />
  </LabelBox>
</template>

<script>
import LabelBox from '../labelBox/index.vue';
import TransferList from '../TransferList';

export default {
  name: 'SelectTransfer',
  components: {
    LabelBox,
    TransferList,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formItems: {},

      showTransfer: false,
      selectedLabels: [],
      presetSelectedKeys: [],
    };
  },
  computed: {
    dataSource() {
      return this.formItems.options;
    },
  },
  watch: {
    formItems(newval) {
      this.formItems = newval;
    },
    value(newVal) {
      if (!newVal || newVal.length == 0) {
        this.selectedLabels = [];
      }
    },
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val);
      this.$emit('outOperation', val);
    },
    handleConfirm(selectedKeys) {
      // console.log('Confirmed selections:', selectedKeys);
      this.showTransfer = false;
      this.handleChange(selectedKeys);
    },
    handleChangeForTransfer(value, labels) {
      // console.log('handleChangeForTransfer', value, labels);
      this.selectedLabels = labels;
    },
    handleClear(value) {
      console.log('handleClear', value);
      this.handleConfirm([]);
    },
  },
};
</script>
<style lang="scss">
.el-select-popper-class {
    &.display-none {
      // popper 弹窗隐藏样式
      display: none !important;
    }
}
</style>
<style lang="scss" scoped>
::v-deep.el-select {
  width: 100%;
  height: 24px;
  line-height: 24px;
}

::v-deep.input-box {
  height: 24px;
}

::v-deep.el-select .el-input__icon {
  height: 24px;
  line-height: 25px;
}

::v-deep.el-select .el-input-group__prepend {
  box-sizing: border-box;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  border: none;
}

::v-deep.el-select .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>

