<script setup lang="ts">
import { reactive, ref } from "vue";
import OrderTable from "./order-table.vue";
import { create_rules } from "../../config/configs";
import { ElForm, ElMessage } from "element-plus";

const emit = defineEmits(["createPayment"]);
const formRef = ref<InstanceType<typeof ElForm>>(null);

const wpay = ref("0");

const formData = reactive<Record<string, string>>({
  payNo: "",
  pay_fee: ""
});

function changePaymentDetail({ payNo, wpay_fee }) {
  formData.payNo = payNo;
  wpay.value = wpay_fee;
  formRef.value.validateField("payNo");
}

function handleCreate() {
  if (Number(formData.pay_fee) > Number(wpay.value)) {
    return ElMessage.error("付款金额不能超过未付款金额");
  }

  formRef.value.validate(isVaild => isVaild && emit("createPayment", formData));
}
</script>

<template>
  <h1 text-xl font-bold py-2>新建采购付款申请</h1>
  <!-- 新建  显示选择的对账列表 -->
  <el-form ref="formRef" :model="formData" :rules="create_rules">
    <el-form-item label="订单对账" prop="payNo">
      <OrderTable @change-payment-detail="changePaymentDetail" />
    </el-form-item>
    <el-form-item label="付款金额" prop="pay_fee">
      <el-input placeholder="请输入付款金额" v-model="formData.pay_fee" />
    </el-form-item>

    <el-form-item pl-20>
      <el-button type="primary" @click="handleCreate">保存</el-button>
    </el-form-item>
  </el-form>
</template>
