<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="拜访人姓名" prop="customerName">
        <el-input v-model="formData.customerName" placeholder="请输入拜访人姓名" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="formData.contact" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="客户公司名称" prop="companyName">
        <el-input v-model="formData.companyName" placeholder="请输入客户公司名称" />
      </el-form-item>
      <el-form-item label="省名称" prop="provinceName">
        <el-input v-model="formData.provinceName" placeholder="请输入省名称" />
      </el-form-item>
      <el-form-item label="市名称" prop="cityName">
        <el-input v-model="formData.cityName" placeholder="请输入市名称" />
      </el-form-item>
      <el-form-item label="区名称" prop="areaName">
        <el-input v-model="formData.areaName" placeholder="请输入区名称" />
      </el-form-item>
      <el-form-item label="定位地址文字描述" prop="locationText">
        <el-input v-model="formData.locationText" placeholder="请输入定位地址文字描述" />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="formData.longitude" placeholder="请输入经度" />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="formData.latitude" placeholder="请输入纬度" />
      </el-form-item>
      <el-form-item label="定位静态图URL" prop="locationImage">
        <UploadImg v-model="formData.locationImage" />
      </el-form-item>
      <el-form-item label="拜访日期" prop="visitDate">
        <el-date-picker
          v-model="formData.visitDate"
          type="date"
          value-format="x"
          placeholder="选择拜访日期"
        />
      </el-form-item>
      <el-form-item label="性质等级" prop="customerStatus">
        <el-radio-group v-model="formData.customerStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="拜访品种" prop="visitProductIds">
        <el-input v-model="formData.visitProductIds" placeholder="请输入拜访品种" />
      </el-form-item>
      <el-form-item label="拜访方式" prop="visitMethod">
        <el-select v-model="formData.visitMethod" placeholder="请选择拜访方式">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.VISIT_METHOD)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="拜访类型" prop="visitType">
        <el-select v-model="formData.visitType" placeholder="请选择拜访类型">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.VISIT_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务内容" prop="serviceContent">
        <Editor v-model="formData.serviceContent" height="150px" />
      </el-form-item>
      <el-form-item label="客户反馈" prop="customerFeedback">
        <el-input v-model="formData.customerFeedback" placeholder="请输入客户反馈" />
      </el-form-item>
      <el-form-item label="服务记录图片URL列表" prop="serviceImages">
        <UploadImg v-model="formData.serviceImages" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { InfoApi, InfoVO } from '@/api/visit/info'

/** 客户拜访记录 表单 */
defineOptions({ name: 'InfoForm' })

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

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  customerName: undefined,
  contact: undefined,
  companyName: undefined,
  provinceName: undefined,
  cityName: undefined,
  areaName: undefined,
  locationText: undefined,
  longitude: undefined,
  latitude: undefined,
  locationImage: undefined,
  visitDate: undefined,
  customerStatus: undefined,
  visitProductIds: undefined,
  visitMethod: undefined,
  visitType: undefined,
  serviceContent: undefined,
  customerFeedback: undefined,
  serviceImages: undefined,
})
const formRules = reactive({
  customerName: [{ required: true, message: '拜访人姓名不能为空', trigger: 'blur' }],
  contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
  companyName: [{ required: true, message: '客户公司名称不能为空', trigger: 'blur' }],
  provinceName: [{ required: true, message: '省名称不能为空', trigger: 'blur' }],
  cityName: [{ required: true, message: '市名称不能为空', trigger: 'blur' }],
  areaName: [{ required: true, message: '区名称不能为空', trigger: 'blur' }],
  locationText: [{ required: true, message: '定位地址文字描述不能为空', trigger: 'blur' }],
  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
  locationImage: [{ required: true, message: '定位静态图URL不能为空', trigger: 'blur' }],
  visitDate: [{ required: true, message: '拜访日期不能为空', trigger: 'blur' }],
  customerStatus: [{ required: true, message: '性质等级不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await InfoApi.getInfo(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as InfoVO
    if (formType.value === 'create') {
      await InfoApi.createInfo(data)
      message.success(t('common.createSuccess'))
    } else {
      await InfoApi.updateInfo(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    customerName: undefined,
    contact: undefined,
    companyName: undefined,
    provinceName: undefined,
    cityName: undefined,
    areaName: undefined,
    locationText: undefined,
    longitude: undefined,
    latitude: undefined,
    locationImage: undefined,
    visitDate: undefined,
    customerStatus: undefined,
    visitProductIds: undefined,
    visitMethod: undefined,
    visitType: undefined,
    serviceContent: undefined,
    customerFeedback: undefined,
    serviceImages: undefined,
  }
  formRef.value?.resetFields()
}
</script>
