<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { Expert, ExpertCreateParams } from '../types'
import { ElMessage } from 'element-plus'
import { createExpert, updateExpert } from '../api'
import { useMapStore } from '@/stores/map'
import { useArea } from '@/composables/useArea'
import { useGetProjectList } from '@/composables/useGetProjectList'

interface Props {
  data?: Expert
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

// 机构列表
const { organizations } = useGetProjectList()
// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')
// 职务
const positionList = useMapStore().getMapValuesByKey('expert_position')

const formRef = $ref<FormInstance>()
const form = reactive<ExpertCreateParams>({
  name: '',
  mobile: '',
  company: '',
  sex: '1',
  position_id: '',
  province: '',
  city: '',
  area: '',
  organization_id: ''
})

const { provinceList, cityList, countyList, provinceValue, cityValue, countyValue } = useArea(
  props.data?.province || '',
  props.data?.city || '',
  props.data?.area || ''
)
watchEffect(() => {
  form.province = provinceValue.value
  form.city = cityValue.value
  form.area = countyValue.value
})

watchEffect(() => {
  if (!props.data) return
  Object.assign(form, props.data, { position_id: props.data.position.id, organization_id: props.data.organization.id })
})

const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入姓名' }],
  mobile: [{ required: true, message: '请输入联系电话' }],
  company: [{ required: true, message: '请输入所在单位' }],
  position_id: [{ required: true, message: '请选择职务' }],
  province: [{ required: true, message: '请选择省' }],
  city: [{ required: true, message: '请选择市' }],
  area: [{ required: true, message: '请选择区/县' }],
  organization_id: [{ required: true, message: '请选择所属部门/学校' }]
})
const isUpdate = $computed(() => {
  return !!props.data?.id
})
const title = $computed(() => {
  return isUpdate ? '编辑专家信息' : '新增评分专家'
})

// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    isUpdate ? handleUpdate() : handleCreate()
  })
}
// 新增
function handleCreate() {
  createExpert(form).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate() {
  if (!props.data?.id) return
  updateExpert({ id: props.data.id, ...form }).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="value => $emit('update:modelValue', value)">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="所属部门/学校" prop="organization_id">
        <el-select v-model="form.organization_id" style="width: 100%" :disabled="isUpdate">
          <el-option v-for="item in organizations" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input v-model="form.mobile" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="所在单位" prop="company">
        <el-input v-model="form.company" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio v-for="item in genderList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="职务" prop="position_id">
        <el-select v-model="form.position_id" style="width: 100%">
          <el-option v-for="item in positionList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select v-model="provinceValue" style="width: 100%">
          <el-option v-for="item in provinceList" :value="item.label" :key="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select v-model="cityValue" style="width: 100%">
          <el-option v-for="item in cityList" :value="item.label" :key="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县" prop="area">
        <el-select v-model="countyValue" style="width: 100%">
          <el-option v-for="item in countyList" :value="item.label" :key="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-row justify="center">
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
