<template>
  <ElDialog
    v-model="visible"
    width="700px"
    title="更新报关信息"
    :close-on-click-modal="false"
  >
    <ElForm :model="form" label-width="110px" inline>
      <ElFormItem label="英文名称" prop="customsNameEnglish">
        <ElInput
          v-model="form.customsNameEnglish"
          clearable
          style="width: 200px"
          placeholder="请输入英文名称"
        />
      </ElFormItem>
      <ElFormItem label="中文名称" prop="customsNameChinese">
        <ElInput
          v-model="form.customsNameChinese"
          clearable
          style="width: 200px"
          placeholder="请输入中文名称"
        />
      </ElFormItem>
      <ElFormItem label="申报重量(g)" prop="customsWeight">
        <ElInput
          v-model="form.customsWeight"
          style="width: 200px"
          placeholder="请输入申报重量"
          clearable
        />
      </ElFormItem>
      <ElFormItem label="申报价值($)" prop="customsValue">
        <ElInput
          v-model="form.customsValue"
          placeholder="请输入申报价值"
          style="width: 200px"
          clearable
        />
      </ElFormItem>
      <ElFormItem label="海关编码" prop="customsCode">
        <ElInput
          v-model="form.customsCode"
          placeholder="请输入海关编码"
          clearable
          style="width: 200px"
        />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="closeDialog">取消</ElButton>
        <ElButton type="primary" @click="submit">提交</ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
import { updateCustomDeclarationInfoApi } from '@/api/podCnOrder'
import { FactoryOrderNewListData } from '@/types/api/factoryOrderNew';
import {
  CustomDeclarationInfoForm,
} from '@/types/api/podCnOrder'

defineOptions({
  name: 'UpdateCustomDeclarationInfoDialog',
})
const props = defineProps<{
  modelValue: boolean
  orderSelection: FactoryOrderNewListData[]
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'refreshTable'): void
}>()
const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
const form = ref<CustomDeclarationInfoForm>({
  customsNameEnglish: '',
  customsNameChinese: '',
  customsWeight: '',
  customsValue: '',
  customsCode: '',
})
const resetForm = () => {
  form.value = {
    customsNameEnglish: '',
    customsNameChinese: '',
    customsWeight: '',
    customsValue: '',
    customsCode: '',
  }
}
const closeDialog = async () => {
  visible.value = false
}
const submit = async () => {
  try {
    const res = await updateCustomDeclarationInfoApi({
      params: form.value,
      ids: props.orderSelection.map((item) => item.id).join(','),
    })
    if (res.code !== 200) return
    ElMessage.success('更新成功')
    visible.value = false
    emit('refreshTable')
  } catch (error) {
    console.error(error)
  }
}
defineExpose({
  resetForm,
})
</script>
<style scoped lang="scss">
  .dialog-footer {
    text-align: center;
  }
</style>
