<template>
  <div>
    <el-dialog :close-on-click-modal="false" append-to-body v-dialogDrag :title="title" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
      <div style="text-align: center">
        <el-transfer style="text-align: left; display: inline-block" v-model="dataList" filterable :left-default-audited="leftData" :right-default-audited="rightData" :render-content="renderFunc" :titles="['会员列表', '适用会员']" :button-texts="['移除', '添加']" :format="{
        noAudited: '${total}',
        hasAudited: '${audited}/${total}'
      }" @change="handleChange" :data="data">
        </el-transfer>
      </div>
      <div class="transferFooter">
        <el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { storeMemberpages } from "@/api/storeManage.js";
export default {
  data() {
    return {
      opneEditVipListDialog: false,
      dialogVisible: false, //弹窗开关
      dataList: [],
      data: [],
      title: "会员列表",
      leftData: [],
      rightData: [],
      storeList: [],
      backMemberList: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.phone} - {option.memberName}
          </span>
        );
      },
    };
  },

  methods: {
    //组件传值
    show(form) {
      this.dataList = [];
      this.form = { ...form };
      if (form.promotionMemberLists) {
        let arr = [];
        form.promotionMemberLists.forEach((item) => {
          arr.push(item.mobilePhone);
        });
        this.dataList = arr;
      }
      this.dialogVisible = true;
      this.getData();
    },
    //确定返回方法
    confirm() {
      this.dialogVisible = false;
      this.$emit("membersuitData", this.backMemberList);
    },
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = {};
      this.dataList = [];
      this.dialogVisible = false;
    },
    //适用对象 - 会员列表
    handleChange(value, direction, movedKeys) {
      console.log(value);
      let arr = [];
      if (value.length > 0) {
        this.data.forEach((item) => {
          let arrs = {};
          value.forEach((items) => {
            if (items == item.mobilePhone) {
              arrs = item;
            }
          });
          if (arrs != {}) {
            arr.push(arrs);
          }
        });
        this.backMemberList = arr;
      } else {
        this.backMemberList = [];
      }
      console.log(this.backMemberList);
    },
    //获取数据
    async getData() {
      storeMemberpages({ id: "" }).then((res) => {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        res.data.forEach((item) => {
          item.key = item.mobilePhone;
          item.phone = item.mobilePhone.replace(reg, "$1****$2");
        });
        this.data = res.data;
      });
    },
  },
  mounted() {},
  created() {},
};
</script>

<style>
.transferFooter {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 20px;
}
.el-transfer-panel__body {
  height: 55vh !important;
}
.el-transfer-panel__list,
.el-transfer-panel__list.is-filterable {
  height: 45vh;
  max-height: 50vh !important;
}
</style>
