<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { Contestant } from '../types'
import { ElMessage } from 'element-plus'
import { pick } from 'lodash-es'
import AppUpload from '@/components/base/AppUpload.vue'
import { createContestant, updateContestant } from '../api'
import { useMapStore } from '@/stores/map'
import { useArea } from '@/composables/useArea'
import { contestModeList } from '@/utils/dictionary'

interface Props {
  data: Contestant
}

const props = defineProps<Props>()

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

// 性别
const genderList = useMapStore().getMapValuesByKey('system_gender')
// 证件类型
const idTypeList = useMapStore().getMapValuesByKey('system_id_type')

const formRef = $ref<FormInstance>()
const form = reactive({
  competition_id: '',
  competition_name: '',
  gender: '1',
  id_number: '',
  id_type: '',
  mobile: '',
  mode: '',
  org_name: '',
  province: '',
  city: '',
  county: '',
  student_name: '',
  specialty_name: '',
  grade: '',
  class_name: '',
  teacher_name: '',
  picture: ''
})
watchEffect(() => {
  if (!props.data) return
  const { student, competition } = props.data
  Object.assign(form, {
    competition_id: competition.id,
    competition_name: competition.name,
    gender: student.gender,
    id_number: student.id_number,
    id_type: student.id_type,
    mobile: student.mobile,
    mode: props.data.mode,
    org_name: student.org.department_name,
    province: student.info.province_name,
    city: student.info.city_name,
    county: student.info.county_name,
    student_name: student.name,
    specialty_name: student.specialty.name,
    class_name: student.class.name,
    teacher_name: props.data.teacher_name,
    grade: props.data.grade,
    picture: props.data.picture
  })
})

const rules = ref<FormRules>({
  grade: [{ required: true, message: '请输入年级' }],
  teacher_name: [{ required: true, message: '请输入指导教师' }]
})
const isUpdate = $computed(() => {
  return !!props.data?.id
})
const title = $computed(() => {
  return isUpdate ? '编辑参赛选手信息' : '新增参赛选手'
})

const { provinceList, cityList, countyList, provinceValue, cityValue, countyValue } = useArea(
  props.data?.student.info.province_name || '',
  props.data?.student.info.city_name || '',
  props.data?.student.info.county_name || ''
)
watchEffect(() => {
  form.province = provinceValue.value
  form.city = cityValue.value
  form.county = countyValue.value
})

// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    isUpdate ? handleUpdate() : handleCreate()
  })
}
// 新增
function handleCreate() {
  const params = pick(form, ['competition_id', 'mode', 'picture', 'grade', 'teacher_name', 'mobile', 'student_name'])
  createContestant(params).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate() {
  const params = pick(form, ['mode', 'picture', 'grade', 'teacher_name'])
  updateContestant({ id: props.data.id, ...params }).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="$emit('update:modelValue')">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="报名赛项">
        <el-input v-model="form.competition_name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="参赛形式" prop="mode">
        <el-radio-group v-model="form.mode" :disabled="isUpdate">
          <el-radio v-for="item in contestModeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="姓名" prop="student_name">
        <el-input v-model="form.student_name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender" :disabled="isUpdate">
          <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="id_type">
        <el-radio-group v-model="form.id_type" :disabled="isUpdate">
          <el-radio v-for="item in idTypeList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="证件号码" prop="id_number">
        <el-input v-model="form.id_number" :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="org_name">
        <el-input v-model="form.org_name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select v-model="provinceValue" style="width: 100%" :disabled="isUpdate">
          <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%" :disabled="isUpdate">
          <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="county">
        <el-select v-model="countyValue" style="width: 100%" :disabled="isUpdate">
          <el-option v-for="item in countyList" :value="item.label" :key="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业名称" prop="specialty_name">
        <el-input v-model="form.specialty_name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-input v-model="form.grade" />
      </el-form-item>
      <el-form-item label="班级" prop="class_name">
        <el-input v-model="form.class_name" :disabled="isUpdate" />
      </el-form-item>
      <el-form-item label="指导教师" prop="teacher_name">
        <el-input v-model="form.teacher_name" />
      </el-form-item>
      <el-form-item label="证件照" prop="picture">
        <AppUpload v-model="form.picture" accept="image/*">
          <template #tip>证件照说明：请上传蓝底1寸或蓝底2寸证件照，照片大小控制在500kb以内。</template>
        </AppUpload>
      </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>
