<template>
  <!-- 修改和增加 -->
  <el-dialog title="付款" v-model="show" width="400px" @close="reset">
    <el-form :inline="false" ref="refform" label-width="90" :model="form" :rules="rules" class="demo-form-inline">
      <el-form-item label="供应商">
        <el-input v-model="supplierName" placeholder="请输入供应商名称" readonly></el-input>
      </el-form-item>
      <el-form-item label="付款金额 " prop="amount">
        <el-input-number v-model="form.amount" :readonly="form.flowIdList.length > 1" :max="maxAmount" placeholder="请输入付款金额"
          style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="付款方式" prop="type">
        <el-input v-model="form.type" placeholder="请输入付款方式"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item style="display: flex; justify-content: flex-end">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('refform')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<script setup>
import AuthAPI from "@/api/supplier/index";
import { ElMessage } from "element-plus";

const emits = defineEmits(["refresh"]);

const rules = {
  amount: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
  type: [{ required: true, message: "请输入付款方式", trigger: "blur" }],

};

const basicForm = {
  flowIdList: [],
  amount: undefined,
  type: '',
  remark: '',
};
const form = reactive({
  ...basicForm,
});
const supplierName = ref('');
const maxAmount = ref(0);
const show = ref(false);
function open(item) {
  form.flowIdList = item.flowIdList
  supplierName.value = item.supplierName
  form.amount = item.allAmount
  maxAmount.value = item.allAmount
  // Object.assign(form, item);
  show.value = true;
}

function close() {
  show.value = false;
}
const refform = ref();
async function submitForm() {
  refform.value.validate(async (valid) => {
    if (valid) {
      const res = await AuthAPI.billPay(form);
      ElMessage({ type: "success", message: "付款成功" });
      emits("refresh");
      close();
    }
  });
}

function reset() {
  console.log("reset");
  Object.assign(form, basicForm);
  close();
}
defineExpose({
  open,
  close,
});
</script>
