<template>
  <!-- 发货信息对话框，用于导出待发货订单的Excel交给快递公司 -->
  <el-dialog
    v-model="visible"
    :modal="false"
    title="请输入发货信息"
    :close-on-click-modal="false"
    width="38%"
  >
    <!-- 表单组件，包含发件人姓名、手机号和地址的输入项 -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
      @keyup.enter="onSubmit()"
    >
      <!-- 发件人姓名输入项 -->
      <el-form-item
        label="发件人姓名"
        prop="consignmentName"
      >
        <el-input
          v-model="dataForm.consignmentName"
          controls-position="right"
          placeholder="请输入发件人姓名"
        />
      </el-form-item>

      <!-- 发货人手机号输入项 -->
      <el-form-item
        label="发货人手机号"
        prop="consignmentMobile"
      >
        <el-input
          v-model="dataForm.consignmentMobile"
          controls-position="right"
          placeholder="请输入发货人手机号"
        />
      </el-form-item>

      <!-- 发货地址输入项 -->
      <el-form-item
        label="发货地址"
        prop="consignmentAddr"
      >
        <el-input
          v-model="dataForm.consignmentAddr"
          controls-position="right"
          placeholder="请输入发货地址"
        />
      </el-form-item>
    </el-form>

    <!-- 对话框底部按钮组 -->
    <template #footer>
      <span class="dialog-footer">
        <!-- 取消按钮，关闭对话框 -->
        <el-button @click="visible = false">取消</el-button>
        <!-- 确定按钮，提交表单 -->
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'

// 定义事件发射器，用于向父组件传递数据
const emit = defineEmits(['inputCallback'])

// 控制对话框可见性
const visible = ref(false)

// 表单数据对象，存储发件人信息
const dataForm = reactive({
  consignmentName: '', // 发件人姓名
  consignmentMobile: '', // 发货人手机号
  consignmentAddr: '' // 发货地址
})

// 表单验证规则，确保所有必填字段不为空
const dataRule = {
  consignmentName: [
    { required: true, message: '发件人姓名不能为空', trigger: 'blur' }
  ],
  consignmentMobile: [
    { required: true, message: '发货人手机号不能为空', trigger: 'blur' }
  ],
  consignmentAddr: [
    { required: true, message: '发货地址不能为空', trigger: 'blur' }
  ]
}

// 表单引用，用于调用表单方法（如重置）
const dataFormRef = ref(null)

/**
 * 初始化方法，打开对话框并重置表单
 */
const init = () => {
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
}
defineExpose({ init }) // 将init方法暴露给父组件调用

/**
 * 表单提交方法
 */
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      visible.value = false // 关闭对话框
      emit('inputCallback', dataForm) // 触发父组件的回调函数，并传递表单数据
    }
  })
}
</script>
