<template>
  <el-form
    style="max-height: 72vh; overflow-y: auto"
    ref="formRef"
    :model="formData"
    label-width="120px"
    label-position="right">
    <inforCard title="逝者信息">
      <el-form :model="formData" label-width="120px" disabled>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input
                v-model="formData.deceased.name"
                disabled
                placeholder="姓名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-radio-group v-model="formData.deceased.gender" disabled>
                <el-radio-button value="男" label="男"></el-radio-button>
                <el-radio-button value="女" label="女"></el-radio-button>
              </el-radio-group> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" prop="idNumber">
              <el-input v-model="formData.deceased.idNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input
                v-model="formData.deceased.age"
                disabled
                placeholder="年龄">
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="购买人姓名" prop="buyer">
              <el-input v-model="formData.deceased.familyName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买人电话" prop="buyer">
              <el-input v-model="formData.deceased.familyPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买日期" prop="purchaseDate">
              <el-date-picker
                v-model="formData.deceased.purchaseDate"
                type="datetime"
                format="YYYY-MM-DD: HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </inforCard>

    <inforCard title="结账列表">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="120px"
        label-position="right">
        <el-row :gutter="20">
          <!-- 第一行 -->
          <el-col :span="8">
            <el-form-item label="结账日期" prop="checkoutDate">
              <el-date-picker
                v-model="formData.payment.checkoutDate"
                type="date"
                placeholder="结账日期"
                format="YYYY-MM-DD"
                disabled />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="结算日期" prop="settlementDate">
              <el-date-picker
                v-model="formData.payment.settlementDate"
                type="date"
                disabled
                placeholder="选择日期"
                format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人" prop="handler">
              <el-input
                disabled
                v-model="formData.payment.handler"
                placeholder="经办人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现金金额" prop="cash">
              <el-input
                disabled
                v-model="formData.payment.cashAmount"
                :min="0"
                @change="caleValue('cashAmount')"
                type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银联" prop="unionPay">
              <el-input
                disabled
                v-model="formData.payment.unionPayAmount"
                :min="0"
                @change="caleValue('cashAmount')"
                type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="银行卡" prop="cardPay">
              <el-input
                disabled
                v-model="formData.payment.cardAmount"
                :min="0"
                @change="caleValue('cashAmount')"
                type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="对公" prop="transfer">
              <el-input
                disabled
                v-model="formData.payment.publicTransferAmount"
                :min="0"
                @change="caleValue('cashAmount')"
                type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车间支付" prop="transfer">
              <el-input
                disabled
                v-model="formData.payment.workshopPayment"
                :min="0"
                @change="caleValue('cashAmount')"
                type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </inforCard>

    <inforCard title="作废信息">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="作废申请人">
            <el-input
              disabled
              v-model="formData.cancelPerson"
              placeholder="请输入作废申请人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="作废时间">
            <el-date-picker
              disabled
              v-model="formData.cancelDate"
              type="datetime"
              placeholder="选择作废时间" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="作废原因">
            <el-input
              disabled
              v-model="formData.cancelReason"
              type="textarea"
              placeholder="请输入作废原因" />
          </el-form-item>
        </el-col>
      </el-row>
    </inforCard>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { defaultPaymentForm } from "@/defaultForm/defaultPaymentForm";
import { defaultRetail } from "@/defaultForm/defaultRetail";

const formRef = ref();

// 表单数据
const formData = defineModel<any>({
  default: {
    payment: defaultPaymentForm(),
    deceased: {},
    retail: defaultRetail(),
  },
});

if (!formData.value.payment) {
  formData.value.payment = defaultPaymentForm();
}
if (!formData.value.deceased) {
  formData.value.deceased = { ...formData.value.retail };
}

const props = withDefaults(
  defineProps<{
    add?: boolean;
    type?: "审核" | "申请";
  }>(),
  {
    add: false,
    type: "审核",
  }
);

onMounted(() => {});

let keys = [
  "cashAmount",
  "unionPayAmount",
  "cardAmount",
  "publicTransferAmount",
  "workshopPayment",
];

function caleValue(keyVal: string) {
  let total = 0;
  let currentVal = formData.value.payment[keyVal];

  keys.forEach((key) => {
    if (keyVal !== key) {
      let tempVal = Number(formData.value.payment[key]).toFixed(2);
      total = Number(total) + Number(tempVal);
    }
  });
  let salesAmount = Number(formData.value.deceased.salesAmount);

  if (salesAmount - (total + currentVal) < 0) {
    formData.value[keyVal] = salesAmount - total;
  }
}
</script>
<style lang="scss" scoped></style>
