<template>
  <!-- 下拉搜索框公共组件 -->
  <div class="DropDownSelectFilter">
    <div class="DropDownSelectInput">
      <Select
        ref="selectOne"
        v-model="choosedExpress"
        multiple 
        multiple-type
        style="width:32px"
        label-in-value
        choose-all
        transfer
        @on-change="chooseExpress"
        @on-clear="clearChoosedExpress"
      >
        <Option
          v-for="item in expressList"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </Option>
      </Select>
      <Input
        v-model="ruleName"
        icon
        suffix="ios-search"
        :placeholder="placeholder"
        style="width: auto"
        search
        :clearable="clearable"
        @on-change="getEnterExpressList"
        @on-search="getEnterExpressList"
      />
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      choosedExpressList: {// 上级默认选中的项
        type: Array,
        default: () => []
      },
      preChoosed: { // 上级默认选中的项
        type: Array,
        default: () => []
      },
      expressList: { // 下拉框中显示的数据列表，由上级请求返回
        type: Array,
        default: () => []
      },
      selectWidth: { // 上级元素的宽度，下拉框宽度保持一致
        type: String,
        default: () => '',
      },
      placeholder: {// 下拉框默认提示信息
        type: String,
        default: () => '',
      },
      clearable: { // 输入框是否可以清空输入值
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        ruleName: '',
        choosedExpress: [],
        deffArr: []// 取消的数据
      };
    },
    mounted() {
      this.$refs.selectOne.$refs.dropdown.$el.style.width = `${Number(this.selectWidth) - 3}px`;
    },
    methods: {
      chooseExpress(value) {
        this.deffArr = [...this.expressList].filter(x => [...value].every(y => y.value !== x.value));
        // eslint-disable-next-line no-undef
        this.$emit('changeShopArr', value, this.deffArr);
      },
      getEnterExpressList() {
        this.$emit('searchList', this.ruleName);
        this.$refs.selectOne.visible = true;
      },
      clearChoosedExpress() {
        this.$emit('clearAllData', this.expressList);
      },
    },
  };
</script>
<style lang='less'>
  .DropDownSelectFilter .ark-select-multiple .ark-select-selection {
    padding: 0px 28px 0px 2px;
    height: 36px;
  }
  .DropDownSelectFilter .ark-select .ark-select-dropdown {
    width: calc(100% - 32px);
  }
  .DropDownSelectFilter .ark-input-wrapper {
    width: calc(100% - 34px) !important;
  }
  .DropDownSelectFilter .ark-input {
    height: 36px;
  }
  .DropDownSelectFilter .ark-input-prefix i,.DropDownSelectFilter .ark-input-suffix i {
    line-height: 36px;
  }
  .DropDownSelectFilter .ark-btn > .ark-icon + span,.DropDownSelectFilter .ark-btn > span + .ark-icon {
    margin-left: 0px;
  }
  .DropDownSelectFilter .ark-input-search-icon {
    font-size: 22px;
    line-height: 36px;
  }
  .DropDownSelectFilter .ark-select-item-all.ark-select-item.ark-select-item-all-multipleType:hover {
    background: #fff;
  }
  .DropDownSelectFilter .ark-select-item-all.ark-select-item.ark-select-item-all-multipleType span:first-child:hover{
    background: #eee;
  }
  .DropDownSelectFilter .ark-select-item-all.ark-select-item.ark-select-item-all-multipleType span:last-child:hover{
    background: #eee;
  }

</style>
<style lang='less' scoped>
  .DropDownSelectInput {
    display: flex;
  }
  .choosedItemBox {
    border: 1px solid #DADADA;
    margin-top: 16px;
    padding: 16px;
    padding-bottom: 8px;
    .boxTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      color: var(--primary-color);
      .title{
        height: 18px;
        line-height: 18px;;
        color: #323232;
        font-weight: 600;
      }
      span {
        margin-left: 0px;
      }
      .ark-btn {
        padding: 0px !important;
      }
    }
    .contentBox {
      height: 200px;
      overflow-y: auto;
    }
  }
  .expressItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    background: #F2F2F2;
    padding-right:16px;
    margin-bottom: 8px;
  }
  .orderSpan {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #DADADA;
    background: #fff;
    text-align: center;
    color: #4D4D4D;
    font-size: 14px;
  }
  .labelSpan {
    width: 100%;
    font-size: 12px;
    color: #4B4B4B;
    text-align: left;
    padding-left: 8px;
  }
  
</style>
