<template>
  <div>
    <t-card style="margin-bottom: 12px">
      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
        <t-form-item label="会员名称" name="memberName">
          <t-input v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
        </t-form-item>
        <t-form-item label="审核状态" name="applyStatus">
          <t-select v-model="searchForm.applyStatus" clearable style="width: 240px">
            <t-option value="APPLY" label="申请中" />
            <t-option value="VIA_AUDITING" label="审核通过" />
            <t-option value="FAIL_AUDITING" label="审核拒绝" />
            <t-option value="SUCCESS" label="提现成功" />
            <t-option value="ERROR" label="提现失败" />
          </t-select>
        </t-form-item>
        <t-form-item label="申请时间">
          <t-date-picker v-model="selectDate" mode="date" range enableTimePicker clearable format="YYYY-MM-DD HH:mm:ss" @change="selectDateRange" style="width: 240px" />
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" @click="handleSearch">搜索</t-button>
          <t-button variant="outline" style="margin-left: 8px" @click="handleReset">重置</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    <t-card>
      <t-table class="mt_10" :loading="loading" :columns="columns" :data="data" ref="table" rowKey="id"></t-table>
      <div class="mt_10" style="display: flex; justify-content: flex-end">
        <t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
      </div>
    </t-card>

    <t-drawer :visible="roleModalVisible" :header="modalTitle" placement="right" size="500px" @close="roleModalVisible = false">
      <div class="drawer-content">
        <div>申请编号：{{ showList.sn }}</div>
        <div>用户名称：{{ showList.memberName }}</div>
        <div class="drawer-row"><span>申请金额：</span><priceColorScheme :value="showList.applyMoney" :color="$mainColor" /></div>
        <div>提现状态：{{ showList.applyStatus | paramTypeFilter }}</div>
        <div>申请时间：{{ showList.createTime }}</div>
        <div>
          <t-textarea v-model="audit" placeholder="审核备注" />
        </div>
      </div>
      <template #footer>
        <div v-if="showList.applyStatus == 'APPLY'" style="display: flex; justify-content: flex-end">
          <t-button variant="text" @click="submitRole(false)">拒绝</t-button>
          <t-button theme="primary" :loading="submitLoading" style="margin-left: 8px" @click="submitRole(true)">通过</t-button>
        </div>
      </template>
    </t-drawer>

    <t-drawer :visible="queryModalVisible" :header="modalTitle" placement="right" size="500px" @close="queryModalVisible = false">
      <div class="drawer-content">
        <div>申请编号：{{ showList.sn }}</div>
        <div>用户名称：{{ showList.memberName }}</div>
        <div class="drawer-row"><span>申请金额：</span><priceColorScheme :value="showList.applyMoney" :color="$mainColor" /></div>
        <div>提现状态：{{ showList.applyStatus | paramTypeFilter }}</div>
        <div>申请时间：{{ showList.createTime }}</div>
        <div>审核时间：{{ showList.inspectTime }}</div>
        <div>审核备注：{{ showList.inspectRemark || '暂无备注' }}</div>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end">
          <t-button variant="text" @click="queryModalVisible = false">返回</t-button>
        </div>
      </template>
    </t-drawer>
  </div>
</template>

<script>
import { getUserWithdrawApply, withdrawApply } from "@/api/member";
import { MessagePlugin } from "tdesign-vue";

export default {
  name: "withdrawApply",
  data() {
    return {
      modalTitle: "",
      loading: true,
      audit: "",
      roleModalVisible: false,
      queryModalVisible: false,
      searchForm: {
        pageNumber: 1,
        pageSize: 20,
        sort: "createTime",
        order: "desc",
        startDate: "",
        endDate: "",
        memberName: "",
        applyStatus: "",
      },
      selectDate: [],
      submitLoading: false,
      showList: {},
      columns: [
        {
          title: "申请编号",
          colKey: "sn",
          align: "left",
          tooltip: true,
        },
        {
          title: "用户名称",
          colKey: "memberName",
          align: "left",
          tooltip: true,
        },
        {
          title: "申请金额",
          colKey: "applyMoney",
          align: "left",
          width: 120,
          cell: (h, params) => {
            return h("priceColorScheme", { props: { value: params.row.applyMoney, color: this.$mainColor } });
          },
        },
        {
          title: "提现状态",
          align: "left",
          colKey: "applyStatus",
          width: 120,
          cell: (h, params) => {
            const status = params.row.applyStatus;
            const map = {
              APPLY: { theme: "warning", label: "申请中" },
              VIA_AUDITING: { theme: "success", label: "审核通过" },
              SUCCESS: { theme: "primary", label: "提现成功" },
              ERROR: { theme: "danger", label: "提现失败" },
              FAIL_AUDITING: { theme: "danger", label: "审核拒绝" },
            };
            const cfg = map[status] || { theme: "default", label: status };
            return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
          },
        },
        {
          title: "申请时间",
          colKey: "createTime",
          align: "left",
          width: 170,
        },
        {
          title: "审核时间",
          colKey: "inspectTime",
          align: "left",
          width: 170,
        },
        {
          title: "操作",
          colKey: "action",
          width: 120,
          align: "center",
          fixed: "right",
          cell: (h, params) => {
            if (params.row.applyStatus === "APPLY") {
              return h("div", { class: "ops" }, [
                h(
                  "a",
                  {
                    style: { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" },
                    on: {
                      click: () => {
                        this.showList = {};
                        this.roleModalVisible = true;
                        this.modalTitle = "审核";
                        this.showList = params.row;
                        this.audit = "";
                      },
                    },
                  },
                  "审核"
                ),
              ]);
            } else {
              return h("div", { class: "ops" }, [
                h(
                  "a",
                  {
                    style: { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" },
                    on: {
                      click: () => {
                        this.showList = {};
                        this.queryModalVisible = true;
                        this.modalTitle = "查看";
                        this.showList = params.row;
                      },
                    },
                  },
                  "查看"
                ),
              ]);
            }
          },
        },
      ],
      data: [],
      total: 0,
    };
  },
  filters: {
    paramTypeFilter(val) {
      if (val === "APPLY") {
        return "申请中";
      } else if (val === "VIA_AUDITING") {
        return "审核通过(提现成功)";
      } else if (val === "FAIL_AUDITING") {
        return "审核拒绝";
      } else if (val === "ERROR") {
        return "提现失败";
      } else if (val === "SUCCESS") {
        return "提现成功";
      } else {
        return "未知状态";
      }
    },
  },
  methods: {
    submitRole(res) {
      const params = { applyId: this.showList.id, result: res, remark: this.audit };
      if (res === false && params.remark === "") {
        MessagePlugin.error("审核备注不能为空");
        return;
      }
      this.submitLoading = true;
      withdrawApply(params)
        .then((r) => {
          this.submitLoading = false;
          if (r === true) {
            MessagePlugin.success("操作成功");
            this.roleModalVisible = false;
            this.getDataList();
          }
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
    init() {
      this.getDataList();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    onPaginationChange(info) {
      if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) {
        this.changePageSize(info.pageSize);
      }
      if (info && typeof info.current !== "undefined") {
        this.changePage(info.current);
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 20;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 20;
      this.selectDate = [];
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.memberName = "";
      this.searchForm.applyStatus = "";
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    getDataList() {
      this.loading = true;
      getUserWithdrawApply(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.data = res.result.records;
            this.total = res.result.total;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.ops a {
  color: #2d8cf0;
  cursor: pointer;
  text-decoration: none;
}
.ops span {
  display: inline-block;
  margin: 0 8px;
  color: #dcdee2;
}
.drawer-content {
  display: flex;
  flex-direction: column;
}
.drawer-content > div {
  margin: 12px 0;
}
.drawer-row {
  display: flex;
  align-items: center;
}
</style>

