<script setup lang="ts">
import { ref, unref } from "vue";
import { ElForm } from "element-plus";

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

const formData = ref({
  post_company: "",
  post_code: "",
  post_fee: ""
});

const visible = ref(false);
let invNo = "";

const rules = {
  post_company: [
    { message: "请输入物流快递公司", trigger: "change", required: true }
  ],
  post_code: [{ message: "请输入物流编码", trigger: "change", required: true }],
  post_fee: [{ message: "请输入物流费", trigger: "change", required: true }]
};

const handleSavePost = () => {
  formRef.value.validate(isValid => {
    if (isValid) {
      emit("post-save", {
        ...unref(formData),
        invNo
      });

      visible.value = false;
    }
  });
};

defineExpose({
  onDisplay(_invNo: string) {
    formData.value = {
      post_company: "",
      post_code: "",
      post_fee: ""
    };
    visible.value = true;
    invNo = _invNo;
  }
});
</script>

<template>
  <ElDialog
    center
    title="填写物流"
    v-model="visible"
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" label-width="110px" :rules="rules" :model="formData">
      <el-form-item label="物流快递公司" prop="post_company">
        <el-input v-model="formData.post_company" />
      </el-form-item>
      <el-form-item label="物流编码" prop="post_code">
        <el-input v-model="formData.post_code" />
      </el-form-item>
      <el-form-item label="物流费" prop="post_fee">
        <el-input v-model="formData.post_fee" />
      </el-form-item>

      <el-form-item>
        <div class="w-full flex justify-end">
          <el-button type="primary" @click="handleSavePost">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </ElDialog>
</template>
