<script setup lang="tsx">
import { ContentWrap } from '@common/src/components/ContentWrap'
import { Form, FormSchema } from '@common/src/components/Form'
import { useForm } from '@common/src/hooks/web/useForm'
import { PropType, reactive, watch, ref } from 'vue'
import { useValidator } from '@common/src/hooks/web/useValidator'
import { getCodeByType } from '@common/src/utils'
import { useRouter, useRoute } from 'vue-router'
import { personCaseCreate, personCaseUpdate, personCaseFind } from '@/api/xxx'
import Map from '@common/src/business-components/DynamicForm/src/components/Map.vue'

const { replace } = useRouter()
const { query } = useRoute()

const { required, phone } = useValidator()
const rules = reactive({
  telephone: [phone()]
})
const mapValue = ref('')
const formSchema = reactive<FormSchema[]>([
  {
    field: 'taskNo',
    label: '选择流调任务',
    component: 'Select'
  },
  {
    field: 'userName',
    label: '姓名',
    component: 'Input'
  },
  {
    field: 'age',
    label: '年龄',
    component: 'Input'
  },
  {
    field: 'sex',
    label: '性别',
    component: 'RadioGroup',
    componentProps: {
      options: getCodeByType('SEX')
    }
  },
  {
    field: 'career',
    label: '职业',
    component: 'Select',
    componentProps: {
      options: getCodeByType('CAREER')
    }
  },
  {
    field: 'educationDegree',
    label: '文化程度',
    component: 'Select',
    componentProps: {
      options: getCodeByType('EDUCATION_DEGREE')
    }
  },
  {
    field: 'currentAddress',
    label: '现住址',
    formItemProps: {
      slots: {
        default: () => {
          return (
            <>
              <Map ref="MapRef" v-model={mapValue.value} />
            </>
          )
        }
      }
    }
  },
  {
    field: 'currentDetail',
    label: '详细地址',
    component: 'Input',
    componentProps: {
      placeholder: '请输入，如楼层、门牌号'
    }
  },
  {
    field: 'resident',
    label: '户口地',
    component: 'Input'
  },
  {
    field: 'workUnit',
    label: '工作（学习）单位',
    component: 'Input'
  },
  {
    field: 'contacts',
    label: '联系人',
    component: 'Input'
  },
  {
    field: 'telephone',
    label: '联系电话',
    component: 'Input'
  }
])

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose, setSchema } = formMethods

const detail = ref()
const getDetail = async () => {
  const { data } = await personCaseFind({
    caseId: query.caseId
  })
  detail.value = data
  if (data.currentAddress) {
    mapValue.value = data.currentAddress
  }
  setValues(data)
}

watch(
  () => query.caseId,
  (val) => {
    if (!val) return
    getDetail()
  },
  {
    immediate: true
  }
)

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    console.log('formData', formData)
    let data = formData
    if (mapValue.value) {
      const map = JSON.parse(mapValue.value)
      data = {
        ...data,
        currentAddress: mapValue.value,
        districtNo: map.district_no
      }
    }
    let res
    if (query.actionType === 'edit') {
      res = await personCaseUpdate({
        ...data,
        caseId: query.caseId
      })
    } else {
      res = await personCaseCreate(data)
    }
    if (res.success) {
      back()
    }
  }
}
const back = () => {
  replace({
    path: '/survey-case-manage/page',
    query: {
      tabName: query.tabName
    }
  })
}
</script>

<template>
  <ContentWrap title="病例详情">
    <Form
      :rules="rules"
      @register="formRegister"
      :schema="formSchema"
      :isCol="false"
      class="w-700px"
    />
    <div class="btns text-right mt10px">
      <BaseButton type="primary" @click="submit">确认并提交</BaseButton>
      <BaseButton @click="back">返回</BaseButton>
    </div>
  </ContentWrap>
</template>
