<script setup lang="ts">
import { defineModel } from 'vue'
import { updateAddressApi } from '@/api/podUsOrder.ts'
import { AddressInfo } from '@/types/api/podUsOrder.ts'

const emits = defineEmits(['success'])
defineProps<{
  countryList: { countryCode: string }[]
  type: 1 | 2
}>()
const visible = defineModel<boolean>('visible')
const form = defineModel<AddressInfo>('form', {
  default: {
    receiverName: '',
    receiverPhone: '',
    receiverCountry: '',
    receiverProvince: '',
    receiverCity: '',
    receiverDistrict: '',
    receiverAddress1: '',
    receiverAddress2: '',
    receiverPostCode: '',
  },
})
const formRef = ref()
const rules = {
  receiverName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  receiverPhone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  receiverCountry: [{ required: true, message: '请输入国家', trigger: 'blur' }],
  receiverProvince: [
    { required: true, message: '请输入省/州', trigger: 'blur' },
  ],
  receiverCity: [{ required: true, message: '请输入市', trigger: 'blur' }],
  receiverAddress1: [
    { required: true, message: '请输入地址1', trigger: 'blur' },
  ],
  receiverPostCode: [
    { required: true, message: '请输入邮政编码', trigger: 'blur' },
  ],
}

const submitForm = async () => {
  formRef?.value.validate(async (valid: boolean) => {
    if (valid) {
      await updateAddressApi(form.value as never)
      visible.value = false
      emits('success')
      await ElMessageBox.alert(
        '请修改/刷新地址后取消物流或者更换物流在重新创建物流订单、获取跟踪号、获取打印面单',
        '提示',
        {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: true,
        },
      )
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :title="type === 1 ? '修改揽收信息' : '地址信息'"
    width="50%"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="receiverName">
        <el-input
          v-model="form.receiverName"
          :disabled="type === 2"
          clearable
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="电话" prop="receiverPhone">
        <el-input
          v-model="form.receiverPhone"
          :disabled="type === 2"
          clearable
          placeholder="请输入电话"
        />
      </el-form-item>
      <el-form-item label="国家" prop="receiverCountry">
        <el-select
          v-model="form.receiverCountry"
          clearable
          filterable
          :disabled="type === 2"
        >
          <el-option
            v-for="it in countryList"
            :key="it.countryCode"
            :label="it.countryCode"
            :value="it.countryCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省/州" prop="receiverProvince">
        <el-input
          v-model="form.receiverProvince"
          :disabled="type === 2"
          clearable
          placeholder="请输入省/州"
        />
      </el-form-item>
      <el-form-item label="市" prop="receiverCity">
        <el-input
          v-model="form.receiverCity"
          :disabled="type === 2"
          clearable
          placeholder="请输入市"
        />
      </el-form-item>
      <el-form-item label="区/县" prop="receiverDistrict">
        <el-input
          v-model="form.receiverDistrict"
          :disabled="type === 2"
          clearable
          placeholder="请输入区/县"
        />
      </el-form-item>
      <el-form-item label="地址1" prop="receiverAddress1">
        <el-input
          v-model="form.receiverAddress1"
          :disabled="type === 2"
          clearable
          placeholder="请输入地址1"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="地址2" prop="receiverAddress2">
        <el-input
          v-model="form.receiverAddress2"
          :disabled="type === 2"
          clearable
          placeholder="请输入地址2"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="邮政编码" prop="receiverPostCode">
        <el-input
          v-model="form.receiverPostCode"
          :disabled="type === 2"
          clearable
          placeholder="请输入邮政编码"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span v-if="type === 1">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
