<template>
  <el-popover placement="bottom" style="min-width: 357px" v-model="departmentVisible">
    <dm-simple-transfer v-model="checked" :props="props" :data="data" :item-size="56" :titles="['选择门店', '已选门店']" filterable filter-placeholder="请输入门店名称/code" @change="change">
      <div slot-scope="{ option }">
        <p>{{ option.label }}</p>
        <p style="font-size: 12px;line-height: 18px">{{ option.code }}</p>
      </div>
    </dm-simple-transfer>

    <div class="show-select-num cursor-pointer w-250" slot="reference">
      已经选择{{ checked.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>
import { getRequest } from '@/api/api';
export default {
  data() {
    return {
      departmentVisible: false,
      checked: [],
      data: [],
      props: {
        key: 'storeId',
        label: 'storeName'
      },
      form: {
        storeSearchParams: '',
        pageSize: 20,
        pageNum: 1
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getRequest('/haoban-manage3-web/hm/store-list', {}).then(res => {
        console.log(res);
        const { result } = res.data;
        this.data = result || [];
      });
    },
    change(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);
    }
  }
}
</style>
