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

const emit = defineEmits(["changeStatus"]);

const formRef = ref<InstanceType<typeof ElForm>>(null);

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

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 => isValid && emit("changeStatus", formData));
</script>

<template>
  <el-form
    ref="formRef"
    label-width="150px"
    :rules="rules"
    :model="formData"
    size="small"
  >
    <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>
      <el-button type="primary" @click="handleSavePost">保存</el-button>
    </el-form-item>
  </el-form>
</template>
