<script setup>
import RPC from '@/utils/rpc'
import MapSelector from '@/components/MapSelector.vue'
import UploadFile from '@/components/UploadFile.vue'
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  row: [Object],
  categoryList: {
    type: Array,
    default: [],
  },
})

const emit = defineEmits(['closed', 'onSuccess'])

const dialogVisible = ref(false)

const isAdd = computed(() => props.type === 'add')

onMounted(() => {
  dialogVisible.value = true
})

const formRef = ref(null)
const formField = ref({})
const formRules = reactive({
  company_name: [{ required: true, message: '不可为空', trigger: 'change' }],
  contact_person: [{ required: true, message: '不可为空', trigger: 'change' }],
  contact_phone: [{ required: true, message: '不可为空', trigger: 'change' }],
  contact_email: [{ required: true, message: '不可为空', trigger: 'change' }],
  address: [{ required: true, message: '不可为空', trigger: 'change' }],
})

const loading = ref(false)
const showMapSelector = ref(false)

function closed() {
  emit('closed')
}

const submitForm = async () => {
  await formRef.value.validate()
  const api = isAdd.value ? '/enterprise/apply' : '/enterprise/update'
  const params = {
    ...formField.value,
    id: isAdd.value ? null : props.row.id,
  }
  RPC.post(api, params)
    .then((res) => {
      ElMessage.success('操作成功')
      emit('onSuccess')
      emit('closed')
    })
    .finally(() => {
      loading.value = false
    })
}

if (!isAdd.value) {
  formField.value = props.row
}
</script>

<template>
  <el-dialog
    align-center
    :title="isAdd ? '新增' : '修改'"
    width="80%"
    v-model="dialogVisible"
    @closed="closed"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      label-position="right"
      label-suffix=":"
      :model="formField"
      :rules="formRules"
      v-loading="loading"
      label-width="100"
    >
      <el-form-item prop="company_name" label="企业名称">
        <el-input placeholder="请输入" v-model="formField.company_name" />
      </el-form-item>
      <el-form-item prop="contact_person" label="姓名">
        <el-input placeholder="请输入" v-model="formField.contact_person" />
      </el-form-item>
      <el-form-item prop="contact_phone" label="手机号码">
        <el-input placeholder="请输入" v-model="formField.contact_phone" />
      </el-form-item>
      <el-form-item prop="contact_email" label="邮箱">
        <el-input placeholder="请输入" v-model="formField.contact_email" />
      </el-form-item>
      <el-form-item prop="address" label="地址">
        <el-input placeholder="请输入" v-model="formField.address" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed"> 取 消 </el-button>
        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 地图坐标选择器 -->
  <MapSelector
    v-model="showMapSelector"
    :longitude="formField.longitude"
    :latitude="formField.latitude"
    @confirm="handleCoordinateConfirm"
  />
</template>

<style lang="scss" scoped>
.main_image_box {
  width: 370px;
  height: 130px;
}
</style>
