<template>
  <div>
    <t-card style="margin-bottom: 12px">
      <t-form :data="searchForm" layout="inline" 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="sn">
          <t-input v-model="searchForm.sn" placeholder="请输入编号" clearable style="width: 240px" />
        </t-form-item>
        <t-form-item label="状态">
          <t-select v-model="searchForm.distributionCashStatus" clearable style="width: 240px">
            <t-option v-for="item in cashStatusList" :value="item.value" :key="item.value" :label="item.label" />
          </t-select>
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" @click="handleSearch">搜索</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    <t-card>
      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id"></t-table>
      <div class="page padding-row" 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.sync="modalVisible" :header="modalTitle" placement="right" size="500px" @close="modalVisible = false">
      <div v-if="handleStatus === 'view'">
        <t-descriptions :column="1" size="medium">
          <t-descriptions-item label="编号">{{ form.sn }}</t-descriptions-item>
          <t-descriptions-item label="会员名称">{{ form.distributionName }}</t-descriptions-item>
          <t-descriptions-item label="申请金额">{{ form.price }}</t-descriptions-item>
          <t-descriptions-item label="申请时间">{{ form.createTime }}</t-descriptions-item>
          <t-descriptions-item label="姓名">{{ form.name }}</t-descriptions-item>
          <t-descriptions-item label="身份证号">{{ form.idNumber }}</t-descriptions-item>
          <t-descriptions-item label="结算银行开户行名称">{{ form.settlementBankAccountName }}</t-descriptions-item>
          <t-descriptions-item label="结算银行开户账号">{{ form.settlementBankAccountNum }}</t-descriptions-item>
          <t-descriptions-item label="结算银行开户支行名称">{{ form.settlementBankBranchName }}</t-descriptions-item>
          <t-descriptions-item label="处理时间">{{ form.updateTime }}</t-descriptions-item>
          <t-descriptions-item label="状态">{{ { APPLY: '待处理', VIA_AUDITING: '通过', FAIL_AUDITING: '审核拒绝' }[form.distributionCashStatus] || form.distributionCashStatus }}</t-descriptions-item>
        </t-descriptions>
      </div>
      <div v-else>
        <t-form ref="form" :data="form" :labelWidth="100">
          <t-form-item label="编号">
            <t-input v-model="form.sn" disabled style="width: 100%" />
          </t-form-item>
          <t-form-item label="会员名称">
            <t-input v-model="form.distributionName" disabled style="width: 100%" />
          </t-form-item>
          <t-form-item label="金额">
            <t-input v-model="form.price" disabled style="width: 100%" />
          </t-form-item>
          <t-form-item label="是否通过">
            <t-radio-group v-model="result">
              <t-radio value="VIA_AUDITING">通过</t-radio>
              <t-radio value="FAIL_AUDITING">拒绝</t-radio>
            </t-radio-group>
          </t-form-item>
        </t-form>
      </div>
      <template #footer>
        <div v-if="handleStatus === 'edit'" style="display: flex; justify-content: flex-end">
          <t-button variant="text" @click="modalVisible = false">取消</t-button>
          <t-button theme="primary" :loading="submitLoading" style="margin-left: 8px" @click="handleSubmit">提交</t-button>
        </div>
        <div v-else style="display: flex; justify-content: flex-start">
          <t-button theme="primary" @click="modalVisible = false">返回</t-button>
        </div>
      </template>
    </t-drawer>
  </div>
</template>

<script>
import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
import { cashStatusList } from "./dataJson";
import { MessagePlugin, DialogPlugin } from "tdesign-vue";
export default {
  name: "distributionCash",
  data() {
    return {
      cashStatusList, // 状态列表
      loading: true, // 表单加载状态
      modalVisible: false, // 添加或编辑显示
      modalTitle: "", // 添加或编辑标题
      result: 'FAIL_AUDITING', // 是否通过
      searchForm: { // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 20, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      handleStatus:'edit',// 判断是编辑还是查看
      form: { // 添加或编辑表单对象初始化数据
        sn: "",
        memberName: "",
        price: "",
      },
      submitLoading: false, // 添加或编辑提交状态
      columns: [
        { title: "编号", colKey: "sn", width: 300, align: "left" },
        { title: "会员名称", colKey: "distributionName", minWidth: 120, align: "left" },
        { title: "申请金额", colKey: "price", minWidth: 100, align: "left", cell: (h, p) => h("priceColorScheme", { props: { value: p.row.price, color: this.$mainColor } }) },
        { title: "申请时间", colKey: "createTime", minWidth: 150, align: "left" },
        { title: "姓名", colKey: "name", minWidth: 100, align: "left" },
        { title: "身份证号", colKey: "idNumber", minWidth: 120, align: "left" },
        { title: "结算银行开户行名称", colKey: "settlementBankAccountName", minWidth: 120, align: "left" },
        { title: "结算银行开户账号", colKey: "settlementBankAccountNum", minWidth: 120, align: "left" },
        { title: "结算银行开户支行名称", colKey: "settlementBankBranchName", minWidth: 120, align: "left" },
        { title: "处理时间", colKey: "updateTime", minWidth: 150, align: "left" },
        {
          title: "状态",
          colKey: "distributionCashStatus",
          minWidth: 120,
          align: "left",
          cell: (h, p) => {
            const s = p.row.distributionCashStatus;
            const map = { APPLY: { theme: "warning", label: "待处理" }, VIA_AUDITING: { theme: "success", label: "通过" }, FAIL_AUDITING: { theme: "danger", label: "审核拒绝" } };
            const cfg = map[s] || { theme: "default", label: s };
            return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
          },
        },
        {
          title: "操作",
          colKey: "action",
          align: "center",
          fixed: "right",
          width: 130,
          cell: (h, params) => {
            if (params.row.distributionCashStatus !== "APPLY") {
              return h("div", { class: "ops" }, [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.view(params.row);
                      },
                    },
                  },
                  "查看"
                ),
              ]);
            }
            return h("div", { class: "ops" }, [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "审核"
              ),
            ]);
          },
        },
      ],
      data: [], // 表单数据
      total: 0 // 表单数据总数
    };
  },
  methods: {
    // 初始化数据
    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();
    },
    getDataList() {
      this.loading = true;
      getDistributionCash(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.data = res.result.records;
            this.total = res.result.total;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 通过还是拒绝申请
    handleSubmit() {
      let result = "拒绝";
      if (this.result === "VIA_AUDITING") {
        result = "通过";
      }
      DialogPlugin.confirm({
        header: "确认审核",
        content: "您确认要审核" + result + "么?",
        theme: "warning",
        onConfirm: () => {
          this.submitLoading = true;
          auditDistributionCash(this.form.id, { result: this.result })
            .then((res) => {
              this.submitLoading = false;
              if (res.success) {
                MessagePlugin.success("审核成功");
                this.getDataList();
                this.modalVisible = false;
              } else {
                this.modalVisible = false;
              }
            })
            .catch(() => {
              this.submitLoading = false;
            });
        },
      });
    },
    // 弹出modal 审核
    edit(v) {
      this.modalTitle = "审核";
      this.handleStatus = 'edit';
      if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
      // 转换null为""
      for (let attr in v) {
        if (v[attr] === null) {
          v[attr] = "";
        }
      }
      this.form = JSON.parse(JSON.stringify(v));
      this.modalVisible = true;
    },
    // 弹出modal 查看
    view(v){
      this.modalTitle = "查看";
      this.handleStatus = 'view';
      if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
      // 转换null为""
      for (let attr in v) {
        if (v[attr] === null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      this.modalVisible = true;

    }
  },
  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;
}
</style>
