<template>
  <!-- 发货地址选择对话框 -->
  <el-dialog
    v-model="visible"
    :modal="false"
    title="选择发货地址"
    :close-on-click-modal="false"
  >
    <!-- 表单组件，用于选择快递公司和填写快递单号 -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="80px"
      @keyup.enter="onSubmit()"
    >
      <!-- 快递公司选择项 -->
      <el-form-item label="快递公司">
        <el-select
          v-model="dataForm.dvyId"
          placeholder="请选择"
        >
          <!-- 动态生成选项列表，从 dataForm.dvyNames 中获取 -->
          <el-option
            v-for="item in dataForm.dvyNames"
            :key="item.dvyId"
            :label="item.dvyName"
            :value="item.dvyId"
          />
        </el-select>
      </el-form-item>

      <!-- 快递单号输入项 -->
      <el-form-item
        label="快递单号"
        prop="dvyFlowId"
      >
        <el-input
          v-model="dataForm.dvyFlowId"
          controls-position="right"
          :min="0"
          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 { ElMessage } from 'element-plus'
import { ref, reactive, defineEmits, defineExpose } from 'vue'
import http from '@/api/http' // 假设这是你的HTTP请求库

// 定义事件发射器，用于向父组件传递刷新数据列表的信号
const emit = defineEmits(['refreshDataList'])

/**
 * 自定义验证规则，确保快递单号不为空且已正确填写
 * @param {Object} rule - 验证规则对象
 * @param {String} value - 输入值
 * @param {Function} callback - 回调函数，用于通知验证结果
 */
const validDvyFlowId = (rule, value, callback) => {
  if (!value.trim()) {
    callback(new Error('不能为空'))
  } else {
    callback()
  }
}

// 表单验证规则，确保所有必填字段不为空，并使用自定义验证器验证快递单号
const dataRule = {
  dvyFlowId: [
    { required: true, message: '不能为空', trigger: 'blur' },
    { validator: validDvyFlowId, trigger: 'blur' }
  ]
}

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

// 表单数据对象，存储快递公司ID、快递单号等信息
const dataForm = reactive({
  dvyId: '', // 快递公司ID
  dvyFlowId: '', // 快递单号
  dvyNames: [], // 快递公司列表
  orderNumber: '' // 订单编号
})

/**
 * 初始化方法，打开对话框并加载快递公司列表
 * @param {String} orderNumber - 订单编号
 * @param {String} [dvyId] - 默认快递公司ID（可选）
 * @param {String} [dvyFlowId] - 默认快递单号（可选）
 */
const init = (orderNumber, dvyId, dvyFlowId) => {
  visible.value = true
  dataForm.orderNumber = orderNumber || ''
  dataForm.dvyId = dvyId || ''
  dataForm.dvyFlowId = dvyFlowId || ''

  // 请求快递公司列表并填充到 dataForm.dvyNames
  http({
    url: http.adornUrl('/admin/delivery/list'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataForm.dvyNames = data
  })
}
defineExpose({ init }) // 将init方法暴露给父组件调用

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

/**
 * 表单提交方法，验证表单并提交数据
 */
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      // 提交发货信息
      http({
        url: http.adornUrl('/order/order/delivery'),
        method: 'put',
        data: http.adornData({
          orderNumber: dataForm.orderNumber,
          dvyId: dataForm.dvyId,
          dvyFlowId: dataForm.dvyFlowId
        })
      })
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              visible.value = false // 关闭对话框
              emit('refreshDataList') // 触发父组件的回调函数，刷新数据列表
            }
          })
        })
    }
  })
}
</script>
