<template>
  <el-popover placement="bottom" style="min-width: 357px" v-model="departmentVisible">
    <dm-simple-transfer v-model="selected" :props="props" :data="data" :item-size="66" :titles="['选择门店', '已选门店']" filterable filter-placeholder="请输入门店名称/code" @change="change">
      <div slot-scope="{ option }">
        <p>{{ option.storeName }}</p>
        <p style="font-size: 12px;line-height: 18px">{{ option.storeCode }}</p>
        <p v-show="option.isOver == 1" class="isOver">所有导购今日添加已到上限</p>
      </div>
    </dm-simple-transfer>
    <div class="show-select-num cursor-pointer w-250" slot="reference">
      已经选择{{ selected.length }}家门店
      <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: () => []
    }
  },
  data() {
    return {
      departmentVisible: false,
      props: {
        key: 'storeId',
        label: 'storeName'
      }
    };
  },
  methods: {
    change(val) {
      console.log(val);
      this.$emit('change', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.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);
    }
  }
}
.isOver {
  font-size: 12px;
  color: #fa8c16;
  line-height: 18px;
}
</style>
