<template>
  <a-card :bordered="false">
    <h4 style="margin-bottom: 16px">
      会员分组设置
      <a-tooltip
        placement="right"
        title="将具有相同特征的会员放在一个分组，您可以更有针对性地营销。列如：5月1日发过短信、有欠款、可总换积分 "
      >
        <a-icon
          style="margin-left: 15px"
          type="question-circle"
          theme="filled"
        />
      </a-tooltip>
    </h4>
    <a-tag
      closable
      :visible="visible"
      @click="handleEditGroup(item)"
      @close="tagClose(item)"
      v-for="(item, index) in groups"
      :key="index"
      >{{ item.name }}</a-tag
    >

    <a-button @click="handleAdd" icon="plus">新分组</a-button>
    <a-divider />
    <h4 style="margin-bottom: 16px">
      会员标签设置
      <a-tooltip
        placement="right"
        title="帮您迅速锁定顾客喜好，投其所好地推荐商品，提高成交的可能性。例如：土豪、大方、注重质量、爱还价、苛刻等  "
      >
        <a-icon
          style="margin-left: 15px"
          type="question-circle"
          theme="filled"
        />
      </a-tooltip>
    </h4>
    <a-tag
      closable
      :visible="visible2"
      @click="handleEditLabel(item)"
      @close="tagClose2(item)"
      v-for="(item, index) in labels"
      :key="index"
      >{{ item.name }}</a-tag
    >
    <a-button @click="handleAdd2" icon="plus">新标签</a-button>
    <bus-market-member-lable-modal
      ref="modalForm2"
      @ok="modalFormOk2"
    ></bus-market-member-lable-modal>
    <bus-market-member-group-modal
      ref="modalForm"
      @ok="modalFormOk"
    ></bus-market-member-group-modal>
  </a-card>
</template>
  
  <script>
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import BusMarketMemberLableModal from "./modules/BusMarketMemberLableModal";
import BusMarketMemberGroupModal from "./modules/BusMarketMemberGroupModal";

import {
  getBusMarketMemberLablList,
  getBusMarketMemberGroupList,
  deleteMarketMemberGroup,
  deleteMarketMemberLable,
} from "@/api/api";
export default {
  name: "marketRechargeList",
  mixins: [JeecgListMixin],
  components: {
    BusMarketMemberLableModal,
    BusMarketMemberGroupModal,
  },
  data() {
    return {
      groups: [],
      labels: [],
      visible: true,
      visible2: true,
    };
  },
  created() {
    this.initLabelsData();
    this.initGroupsData();
  },
  methods: {
    initLabelsData() {
      getBusMarketMemberLablList({ pageNo: 1, pageSize: 100 }).then((res) => {
        if (res.success) {
          this.labels = res.result.records;
        }
      });
    },
    initGroupsData() {
      getBusMarketMemberGroupList({ pageNo: 1, pageSize: 100 }).then((res) => {
        if (res.success) {
          this.groups = res.result.records;
        }
      });
    },
    modalFormOk() {
      this.initGroupsData();
    },
    modalFormOk2() {
      this.initLabelsData();
    },
    handleAdd2: function () {
      this.$refs.modalForm2.add();
      this.$refs.modalForm2.title = "新增";
      this.$refs.modalForm2.disableSubmit = false;
    },
    tagClose(item) {
      var that = this;
      this.$confirm({
        title: "确认删除",
        content: "是否删除?",
        onOk: function () {
          deleteMarketMemberGroup({ id: item.id }).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.initGroupsData();
            } else {
              that.$message.warning(res.message);
            }
          });
        },
        onCancel: function () {
          that.visible = true;
        },
      });
    },
    tagClose2(item) {
      var that = this;
      this.$confirm({
        title: "确认删除",
        content: "是否删除?",
        onOk: function () {
          deleteMarketMemberLable({ id: item.id }).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.initLabelsData();
            } else {
              that.$message.warning(res.message);
            }
          });
        },
        onCancel: function () {
          that.visible2 = true;
        },
      });
    },
    handleEditGroup(item) {
      console.log(1);
      this.$refs.modalForm.edit(item);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleEditLabel(item) {
      console.log(1);
      this.$refs.modalForm2.edit(item);
      this.$refs.modalForm2.title = "编辑";
      this.$refs.modalForm2.disableSubmit = false;
    },
  },
};
</script>
  <style scoped>
@import "~@assets/less/common.less";
</style>