<template>
  <div>
    <el-row>
      <baseTableHeader
        title="作废审核"
        @resetSearch="resetSearch"
        @search="search">
        <template #content>
          <el-form
            :model="searchForm"
            label-position="right"
            label-width="90px">
            <el-row :gutter="15">
              <!-- 逝者姓名 -->
              <el-col :span="8">
                <el-form-item label="逝者姓名">
                  <el-input
                    v-model="searchForm.name"
                    placeholder="请输入逝者姓名" />
                </el-form-item>
              </el-col>

              <!-- 作废申请人 -->
              <el-col :span="8">
                <el-form-item label="作废申请人" style="width: 100%">
                  <el-select
                    v-model="searchForm.cancelPerson"
                    placeholder="请选择申请人">
                    <el-option
                      v-for="item in guideOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- 结账时间 -->
              <!-- <el-col :span="6">
                <el-form-item label="结账时间">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="searchForm.checkoutDate"
                    type="date"
                    placeholder="选择结账时间"
                    format="YYYY-MM-DD" />
                </el-form-item>
              </el-col> -->

              <!-- 申请时间 -->
              <el-col :span="8">
                <el-form-item label="申请时间">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="searchForm.cancelDate"
                    type="date"
                    placeholder="选择申请时间"
                    format="YYYY-MM-DD" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </baseTableHeader>
    </el-row>
    <el-card style="margin-top: 8px">
      <base-table :option="tableOption" ref="table" border>
        <template #toolsBar>
          <el-radio-group v-model="searchForm.examineState" size="small">
            <el-radio-button :value="0" label="未处理"></el-radio-button>
            <el-radio-button :value="1" label="已通过"></el-radio-button>
            <!-- <el-radio-button :value="2" label="已拒绝"></el-radio-button> -->
          </el-radio-group>
        </template>
        <template #colunm>
          <!-- 序号 -->
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center" />

          <!-- 状态 -->
          <el-table-column label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag type="primary" v-if="row.examineState === 0"
                >未审核</el-tag
              >
              <el-tag type="success" v-if="row.examineState === 1"
                >已审核</el-tag
              >
              <el-tag type="success" v-if="row.examineState === 2"
                >已拒绝</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="逝者姓名" align="center">
            <template #default="{ row }">
              <span v-if="row.retail.retailType !== 2">
                {{ row.deceased.name }}</span
              >
              <span v-else> {{ row.retail.familyName }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="deceased.gender" label="性别" align="center">
            <template #default="{ row }">
              <span v-if="row.retail.retailType !== 2">
                {{ row.deceased.gender }}</span
              >
              <span v-else> {{ row.retail.gender || "无" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deceased.age"
            label="年龄"
            width="80"
            align="center">
            <template #default="{ row }">
              <span v-if="row.retail.retailType !== 2">
                {{ row.deceased.age }}</span
              >
              <span v-else> {{ row.retail.age || "无" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cancelReason"
            label="作废原因"
            width="200"
            align="center" />
          <el-table-column
            prop="cancelPerson"
            label="作废申请人"
            align="center" />
          <el-table-column
            prop="cancelDate"
            label="申请时间"
            align="center"
            width="180" />
          <el-table-column
            prop="retail.checkoutDate"
            label="结账时间"
            width="180"
            align="center" />
          <el-table-column
            prop="payment.cashAmount"
            label="现金支付"
            width="100"
            align="center">
            <template #default="{ row }">
              {{ row.payment?.cashAmount || "0.00" }} 元
            </template>
          </el-table-column>
          <el-table-column
            prop="payment.unionPayAmount"
            label="银联支付"
            width="100"
            align="center">
            <template #default="{ row }">
              {{ row.payment?.unionPayAmount || "0.00" }} 元
            </template>
          </el-table-column>

          <el-table-column
            prop="payment.cardAmount"
            label="刷卡金额"
            width="100"
            align="center">
            <template #default="{ row }">
              {{ row.payment?.cardAmount || "0.00" }} 元
            </template>
          </el-table-column>
          <el-table-column
            prop="payment.publicTransferAmount"
            label="对公转账"
            width="100"
            align="center">
            <template #default="{ row }">
              {{ row.payment?.publicTransferAmount || "0.00" }} 元
            </template>
          </el-table-column>
          <el-table-column
            prop="payment.workshopPayment"
            label="车间支付"
            width="100"
            align="center">
            <template #default="{ row }">
              {{ row.payment?.workshopPayment || "0.00" }} 元
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            label="操作"
            align="center"
            fixed="right">
            <template #default="{ row }">
              <el-button
                size="small"
                type="primary"
                v-if="row.examineState === 0"
                @click="methods.invalid(row)">
                审核</el-button
              >

              <el-button
                size="small"
                type="primary"
                v-if="row.examineState === 1"
                @click="methods.view(row)">
                查看</el-button
              >
            </template>
          </el-table-column>
        </template>
      </base-table>
    </el-card>

    <baseDialog
      v-model="invalidReviewState.showDialog"
      top="50px"
      :title="invalidReviewState.title"
      @close="methods.resetRegisForm">
      <div
        v-loading="invalidReviewState.showLoding"
        element-loading-text="正在处理...">
        <reviewDetails v-model="currentData"></reviewDetails>

        <el-row :justify="'center'">
          <el-button
            type="primary"
            @click="methods.confirm"
            v-if="invalidReviewState.title !== '作废查看'"
            >确定</el-button
          >
          <el-button
            type="primary"
            v-if="invalidReviewState.title !== '作废查看'"
            @click="methods.cancel"
            >拒绝</el-button
          >
          <el-button type="danger" @click="methods.close">关闭</el-button>
        </el-row>
      </div>
    </baseDialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { resetParams } from "@/util/globalMethods";
import { globalState } from "@/store";
import reviewDetails from "./reviewDetails.vue";
import { tableOptionType } from "@/types/table";
import { defaultRetail } from "@/defaultForm/defaultRetail";
import { defaultPaymentForm } from "@/defaultForm/defaultPaymentForm";
import api from "@/lib/request";

const invalidReviewState = ref({
  showDialog: false,
  title: "作废审核",
  type: "服务登记" as RegistrationType,
  showLoding: false,
});

const guideOptions = ref<guideOption[]>([]);

const searchForm = reactive({
  examineState: 0, // 状态
  name: "", // 逝者姓名
  cancelPerson: "", // 作废申请人
  checkoutDate: "", // 结账时间
  cancelDate: "", // 申请时间
});

const currentData = ref({
  payment: defaultPaymentForm(),
  deceased: {},
  retail: defaultRetail(),
});

const regisForm = ref<RegisForm>(defaultRetail());

let table = ref();
let tableOption = ref<tableOptionType>({
  url: "/cancel/list",
  searchUrl: "/cancel/query",
  searchParams: searchForm,
  executeType: "list",
});
const methods = {
  resetRegisForm() {
    regisForm.value = defaultRetail();
  },
  async confirm() {
    let confirmContent = "确定【通过】该信息吗？";

    await ElMessageBox.confirm(confirmContent, "提示", {
      type: "warning",
    });

    let sendData = { ...currentData.value };
    sendData.examineState = 1;
    api()
      .post("/cancel/examine", sendData)
      .then((res) => {
        if (res.code === 200) {
          invalidReviewState.value.showDialog = false;
          ElMessage.success("成功通过！");
          table.value.methods.setDataType("list");
        } else {
          ElMessage.error(res.msg);
        }
      });
  },
  invalid(row: any) {
    currentData.value = row;
    invalidReviewState.value.showDialog = true;
    invalidReviewState.value.title = "作废审核";
  },
  async cancel() {
    let confirmContent = "确定【拒绝】该信息吗？";
    await ElMessageBox.confirm(confirmContent, { type: "warning" });

    let sendData = { ...currentData.value };
    sendData.examineState = 2;
    api()
      .post("/cancel/examine", sendData)
      .then((res) => {
        if (res.code === 200) {
          invalidReviewState.value.showDialog = false;
          ElMessage.success("成功拒绝！");
          table.value.methods.setDataType("list");
        } else {
          ElMessage.error(res.msg);
        }
      });
  },
  close() {
    invalidReviewState.value.showDialog = false;
    invalidReviewState.value.title = "";
    methods.resetRegisForm();
  },

  view(row: any) {
    invalidReviewState.value.showDialog = true;
    currentData.value = row;
    invalidReviewState.value.title = "作废查看";
  },
};
api()
  .get("public/guide")
  .then((res) => {
    guideOptions.value = res.data;
  });
onMounted(async () => {});

watch(
  () => searchForm.examineState,
  (newData) => {
    table.value.methods.setDataType("search");
  }
);

function search() {
  table.value.methods.setDataType("search");
}

function resetSearch() {
  resetParams(searchForm);
  table.value.methods.setDataType("reset");
}
</script>
<style lang="scss" scoped></style>
