<script setup lang="ts">
import { reactive, ref } from "vue";
import OrderTable from "./order-table.vue";
import { httpAdd } from "/@/api/purchase/orderPay";
import { create_rules } from "../../config/rules";
import { useResponseHandle } from "/@/hooks";
import { ElForm } from "element-plus";

const responseHandle = useResponseHandle();

const formRef = ref<InstanceType<typeof ElForm>>(null);
const formData = reactive<Record<string, string>>({
  payNo: "",
  pay_fee: ""
});

function changeOrderDetail({ payNo }) {
  formData.payNo = payNo;
}

function hanldeNewPayment() {
  formRef.value.validate(async isValid => {
    if (!isValid) return;

    const { code, message, data } = await httpAdd(formData);

    responseHandle({
      code,
      message,
      handler: () => {
        console.log(data);
      }
    });
  });
}
</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-order-detail="changeOrderDetail" />
    </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="hanldeNewPayment">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
