<template>
  <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px">
    <el-form-item label="收件人">
      <el-input v-model="formData.receiverName" placeholder="请输入收件人名称" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="formData.receiverMobile" placeholder="请输入收件人手机号" />
    </el-form-item>
    <el-form-item label="所在地">
      <el-tree-select
        v-model="formData.receiverAreaId"
        :data="areaList"
        :props="defaultProps"
        :render-after-expand="true"
      />
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input
        v-model="formData.receiverDetailAddress"
        :rows="3"
        placeholder="请输入收件人详细地址"
        type="textarea"
      />
    </el-form-item>
  </el-form>
</template>
<script  setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
import { getAreaTree } from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
import { ElMessage } from 'element-plus';

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: 0, // 订单编号
  receiverName: '', // 收件人名称
  receiverMobile: '', // 收件人手机
  receiverAreaId: null, //收件人地区编号
  receiverDetailAddress: '' //收件人详细地址
})
const areaList = ref([]) // 地区列表
// 定义一个表单验证方法
function validateForm() {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve(formData.value);
      } else {
        ElMessage.error('表单验证失败');
        reject(new Error('Validation failed'));
      }
    });
  });
}
defineExpose({ validateForm });
onMounted(async () => {
  // 获得地区列表
  areaList.value = await getAreaTree()
})
</script>
