<template>
  <div>
    <inforCard title="逝者信息">
      <el-form :model="checkoutForm" label-width="120px" disabled>
        <el-row :gutter="20" v-if="deceased.deceased">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input
                :prefix-icon="User"
                v-model="deceased.deceased.name"
                disabled
                placeholder="姓名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-radio-group v-model="deceased.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="deceased.deceased.idNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input
                v-model="deceased.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="deceased.deceased.familyName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买人电话" prop="buyer">
              <el-input v-model="deceased.deceased.familyPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买日期" prop="purchaseDate">
              <el-date-picker
                v-model="deceased.purchaseDate"
                type="datetime"
                format="YYYY-MM-DD: HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售金额" prop="salesAmount">
              <el-input v-model.number="deceased.salesAmount" type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-else>
          <!-- <el-col :span="8">
            <el-form-item label="姓名">
              <el-input
                :prefix-icon="User"
                v-model="deceased.name"
                disabled
                placeholder="姓名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-radio-group v-model="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="deceased.idNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input v-model="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="deceased.familyName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买人电话" prop="buyer">
              <el-input v-model="deceased.familyPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买日期" prop="purchaseDate">
              <el-date-picker
                v-model="deceased.purchaseDate"
                type="datetime"
                format="YYYY-MM-DD: HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售金额" prop="salesAmount">
              <el-input v-model.number="deceased.salesAmount" type="number">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </inforCard>
    <inforCard title="已选服务项目">
      <el-table
        :data="servicesList"
        style="max-height: 160px; overflow-y: auto">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="price" label="单价">
          <template #default="{ row }"> {{ row.price }} 元 </template>
        </el-table-column>
        <el-table-column prop="price" label="总金额">
          <template #default="{ row }">
            {{ row.price * row.quantity }} 元
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </inforCard>
    <inforCard title="结账列表">
      <el-form
        ref="formRef"
        :model="checkoutForm"
        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="checkoutForm.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="checkoutForm.settlementDate"
                type="date"
                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="checkoutForm.handler"
                placeholder="经办人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现金金额" prop="cash">
              <el-input
                v-model.number="checkoutForm.cashAmount"
                type="number"
                :min="0"
                @input="caleValue('cashAmount')">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银联" prop="unionPay">
              <el-input
                v-model.number="checkoutForm.unionPayAmount"
                type="number"
                :min="0"
                @input="caleValue('unionPayAmount')">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

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

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

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
// @ts-ignore
import { User } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { userInfor } from "@/store/user/user";
import { defaultRetail } from "@/defaultForm/defaultRetail";
import { defaultPaymentForm } from "@/defaultForm/defaultPaymentForm";
import request from "@/lib/request";

const props = withDefaults(
  defineProps<{
    executeType?: string;
    deceased: RegisForm;
  }>(),
  {
    deceased: () => {
      return {
        ...defaultRetail(),
        deceased: {},
      };
    },
  }
);

const emit = defineEmits(["updateData"]);
const userInforStore = userInfor().userInfor;

let checkoutForm = defineModel({ default: defaultPaymentForm() });
let servicesList = ref([]);

onMounted(() => {
  checkoutForm.value.handler =
    checkoutForm.value.handler || (userInforStore.name as string);
  request()
    .get(
      "/deceased-retail/selected-service?retailId=" +
        props.deceased.id +
        "&retailType=" +
        props.deceased.retailType
    )
    .then((res) => {
      servicesList.value = res.data?.list || [];
    });
});

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

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

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

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