<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <h3>注册赠送会员卡设置</h3>
          <el-button type="primary" plain @click="onSaveMemberCard"
            >保 存</el-button
          >
        </div>
      </template>
      <div>
        <span class="text-base">用户注册后自动绑定会员卡：</span>
        <el-select
          v-model="state.cardId"
          placeholder="请选择"
          filterable
          clearable
          class="mr-4"
          style="width: 500px"
        >
          <el-option
            v-for="item in memberCardList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <div class="text-sm text-gray-400 mt-4">
          通过后台创建用户或者用户端注册后，可自定绑定该设置的会员卡。可随时取消。
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";

const state = reactive({
  cardId: undefined
});
const memberCardList = ref([]);
const getMemberCardList = () => {
  request
    .get("walletService/mechanism/membershipCard/list", {
      params: { status: 1 }
    })
    .then(resp => {
      memberCardList.value = resp.data;
    });
};
const onSaveMemberCard = () => {
  request
    .post("walletService/mechanism/membershipCard/register", {
      cardId: !state.cardId ? 0 : state.cardId
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getRegisterMemberInfo();
    });
};
const getRegisterMemberInfo = () => {
  request.get("walletService/mechanism/membershipCard/register").then(resp => {
    state.cardId = !resp.data.cardId ? "" : resp.data.cardId;
  });
};
const initData = () => {
  getMemberCardList();
  getRegisterMemberInfo();
};
initData();
</script>
