<template>
  <div>
    <el-card shadow="never">
      <div class="flex justify-between">
        <div>
          <el-button
            type="primary"
            @click="
              state.visible = true;
              state.rowData = {};
            "
            >+ 新建会员卡</el-button
          >
        </div>
        <div class="text-right flex items-center justify-end w-1/3">
          <el-select
            placeholder="全部状态类型"
            style="width: 280px"
            v-model="state.query.status"
          >
            <el-option label="全部状态类型" :value="-1" />
            <el-option
              :label="item.k"
              :value="item.v"
              v-for="item in statusList"
              :key="item.v"
            />
          </el-select>
          <el-input
            v-model="state.query.name"
            placeholder="输入会员卡名称关键词搜索"
            clearable
            class="w-full ml-2"
          />
          <el-button class="ml-2" type="primary" @click="onSearch"
            >搜索</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <el-table :data="state.list" style="width: 100%">
        <el-table-column label="会员卡名称" prop="name" width="" />
        <el-table-column
          label="有效期"
          prop="lifespan"
          width=""
          :formatter="v => v.lifespan + '天'"
        />
        <el-table-column
          label="价格"
          prop="price"
          :formatter="v => (v.price / 100).toFixed(2) + '元'"
          width=""
        />
        <el-table-column label="包含服务项目" prop="content" width="">
          <template #default="{ row }">
            <!-- <div v-html="row.content" /> -->
            <div>0项</div>
          </template>
        </el-table-column>
        <el-table-column label="上架状态" prop="code" width="">
          <template #default="{ row }">
            <span :class="statusList[row.status].class"
              >已{{ statusList[row.status].k }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="是否展示" prop="show" width="">
          <template #header>
            <div>
              是否展示
              <el-tooltip>
                <QuestionFilled
                  class="w-4 h-4 inline align-middle ml-1 cursor-pointer opacity-50"
                />
                <template #content>
                  <div class="text-sm">
                    参考范围：开启后，该会员卡将展示在小程序端的升级页面内供用户查看。已下架的会员卡无法开启
                  </div>
                </template>
              </el-tooltip>
            </div>
          </template>
          <template #default="{ row }">
            <el-switch
              v-model="row.show"
              :active-value="1"
              :inactive-value="0"
              @change="handleChangeShow(row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="展示排序">
          <template #default="{ row }">
            <el-input
              v-model.number="row.sort"
              type="number"
              @blur="updateSort(row)"
              clearable
            />
          </template>
        </el-table-column>
        <el-table-column label="备注信息">
          <template #default="{ row }">
            {{ row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-space wrap>
              <el-button type="primary" link @click="handleEdit(row)"
                >编辑</el-button
              >
              <el-button
                @click="handleChangeStatus(row)"
                :type="!row.status ? 'primary' : 'danger'"
                link
                >{{ !row.status ? "上架" : "下架" }}</el-button
              >
              <el-button
                type="primary"
                link
                @click="
                  () => {
                    state.visibleSystemInterest = true;
                    state.rowData = row;
                  }
                "
                >权益配置</el-button
              >
              <el-popconfirm
                title="确定要删除此会员卡吗"
                @confirm="onDelete(row.id)"
                width="200"
              >
                <template #reference>
                  <el-button link type="danger" :disabled="row.status == 1"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        class="mt-4 justify-end"
        background
        layout="prev, pager, next"
        :total="state.total"
        @current-change="changePage"
      /> -->
    </el-card>
    <DialogEditMemberCard
      v-model:show="state.visible"
      :rowData="state.rowData"
      @success="getList"
    />
    <DialogEditMemberSystemInterest
      v-model:show="state.visibleSystemInterest"
      :rowData="state.rowData"
      @success="getList"
    />
  </div>
</template>
<script setup>
import { request } from "@/utils";
import DialogEditMemberCard from "./components/DialogEditMemberCard.vue";
import DialogEditMemberSystemInterest from "./components/DialogEditMemberSystemInterest.vue";

import { reactive } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
const state = reactive({
  visible: false,
  visibleSystemInterest: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    status: -1, // -1:所有状态；0:可用；1:不可用
    name: undefined
  },
  list: [],
  total: 0
});
const statusList = [
  {
    k: "下架",
    v: 0,
    class: "text-red-600"
  },
  {
    k: "上架",
    v: 1,
    class: "text-green-600"
  }
];
const getList = () => {
  request
    .get("walletService/mechanism/membershipCard/list", {
      params: state.query
    })
    .then(resp => {
      state.list = resp.data;
    });
};
const changePage = page => {
  state.query.page = page;
  getList();
};

const updateSort = async row => {
  await request.post(`walletService/mechanism/membershipCard/sort`, {
    id: row.id,
    sort: row.sort
  });

  ElMessage.success("操作成功");
  fetchArticle();
};
const handleChangeStatus = row => {
  ElMessageBox.confirm(
    row.status
      ? "确定要下架吗？下架后用户将不能再绑定该会员卡，已绑定的用户不受影响"
      : "确定要上架吗？上架后用户可以绑定该会员卡",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("walletService/mechanism/membershipCard/status", {
        id: row.id,
        status: !row.status + 0
      });
      getList();
      ElMessage.success("操作成功");
    })
    .catch(err => {});
};
const handleChangeShow = row => {
  console.log(row);
  if (row.status == 0) {
    row.show = row.show ? 0 : 1;

    return ElMessage.warning("已下架无法开启");
  }
  ElMessageBox.confirm(
    row.show
      ? "确定要开启展示吗？开启后用户将在小程序端看到该会员卡内容"
      : "确定要关闭展示吗？关闭后，用户在小程序不能看到该会员卡内容",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("walletService/mechanism/membershipCard/show", {
        id: row.id,
        show: row.show
      });
      getList();
      ElMessage.success("操作成功");
    })
    .catch(err => {
      row.show = row.show ? 0 : 1;
    });
};
const onDelete = id => {
  request
    .post("walletService/mechanism/membershipCard/delete", { id })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};
const handleEdit = rowData => {
  state.rowData = rowData;
  state.visible = true;
};
const onSearch = () => {
  state.query.page = 1;
  getList();
};
const init = () => {
  getList();
};
init();
</script>
