<template>
  <el-popover placement="bottom" v-model="departmentVisible">
    <dm-simple-transfer :value="selected" v-loading="loading" :leftListTotal="leftListTotal" :canSelectAll="canSelectAll" :left-panel="leftPanel" @leftLoadMore="onLeftLoadMore" :props="props" :max="max" :data="data" :bodyH="62" :item-size="66" :titles="['选择门店', '已选门店']" filterable filter-placeholder="请输入门店名称/code" @change="change">
      <div slot-scope="{ option }">
        <el-tooltip :content="option.storeName" :disabled="option.storeName.length < 10">
          <p class="storeName">{{ option.storeName }}</p>
        </el-tooltip>
        <p style="font-size: 12px;line-height: 14px">{{ option.storeCode }}</p>
        <p v-if="option.isOver == 1" class="isOver">所有导购今日添加已到上限</p>
      </div>
    </dm-simple-transfer>
    <div class="show-select-num cursor-pointer w-250" slot="reference">
      <span v-if="selected && selected.length"> 已经选择{{ selected && selected.length }}家门店</span>
      <span v-else style="color: #C4C6CF;">请选择门店</span>
      <span class="el-input__suffix"
        ><span class="el-input__suffix-inner"><i :class="['el-select__caret el-input__icon el-icon-arrow-up', departmentVisible ? 'is-reverse' : '']"></i></span
      ></span>
    </div>
  </el-popover>
</template>

<script>
export default {
  props: {
    selected: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    leftListTotal: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 999999
    },
    canSelectAll: {
      type: Boolean,
      default: false
    },
    leftPanel: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      departmentVisible: false,
      props: {
        key: 'storeId',
        label: 'storeName',
        disabledProp: 'disabled'
      }
    };
  },
  methods: {
    change(val) {
      this.$emit('change', val);
    },
    onLeftLoadMore(query) {
      this.$emit('leftLoadMore', query);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.dm-transfer-panel .transfer-panel-body {
  height: calc(100% - 58px);
}
.show-select-num {
  position: relative;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform 0.3s;
    transform: rotate(180deg);
    cursor: pointer;
    &.is-reverse {
      transform: rotate(0deg);
    }
  }
}
.storeName {
  width: 208px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.isOver {
  font-size: 12px;
  color: #fa8c16;
  line-height: 18px;
}
</style>
