<template>
  <BackNav />
  <div style="height: 20px"></div>
  <div id="question-body">
    <van-field v-model="answer.name" type="text" label="姓名" disabled />
    <van-field v-model="answer.idcard" type="text" label="身份证" disabled />
    <van-field v-model="answer.phone" type="tel" label="电话" placeholder="请输入手机号" />
    <van-field
      readonly
      clickable
      name="calendar"
      v-model="answer.date"
      label="就诊日期"
      placeholder="点击选择日期"
      @click="answer.showCalendar = true"
    />
    <van-calendar v-model:show="answer.showCalendar" :show-confirm="false" @confirm="onConfirmDate" />
    <div>
      <van-radio-group v-model="answer.temperature" direction="horizontal">
        体温：
        <van-radio name="1">正常</van-radio>
        <van-radio name="2">发烧</van-radio>
        <van-field
          ref="mFocus"
          style="width: 80px"
          v-model="answer.feverNumber"
          type="number"
          :disabled="answer.temperature != 2"
        />&nbsp;℃
      </van-radio-group>
    </div>
    <van-field
      readonly
      clickable
      name="area"
      v-model="answer.address"
      label="住址地区"
      placeholder="点击选择省市区"
      @click="answer.showArea = true"
    />
    <van-popup v-model:show="answer.showArea" position="bottom">
      <van-area :area-list="areaList" value="430105" @confirm="onConfirmArea" @cancel="answer.showArea = false" />
    </van-popup>
    <div v-for="item in assessmentItems" :key="item.key">
      {{ item.label }}
      <div style="margin-top: 7px; margin-left: 10px">
        <van-radio-group v-model="answer['item' + item.key]" direction="vertical">
          <van-radio v-for="option in item.options" :key="option.key" :name="option.key" style="margin-top: 10px">
            <span :style="{ color: option.color }">{{ option.label }}</span>

            <van-checkbox-group v-model="answer.symptoms">
              <van-checkbox
                shape="square"
                v-for="child in option.children"
                :key="child.key"
                :name="child.key"
                style="margin-top: 5px"
                >{{ child.label }}</van-checkbox
              >
            </van-checkbox-group>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
    <van-button @click="submit" type="primary" icon="passed" block>提交</van-button>
  </div>
</template>

<script setup>
import BackNav from '@/components/back-nav'
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { assessmentItems } from '@/data'
import { getDate } from '@/utils/date'
import { getPatientInfo, submitCovidAssessment } from '@/api/assessments'
import { validateCovid19Answer } from '@/utils/validate'
import { showDialog } from 'vant'
import allArea from '@/utils/area'
import { useRouter } from 'vue-router'

const areaList = allArea
const answer = reactive({
  name: '',
  phone: '',
  idcard: '',
  symptoms: [],
  addrProvince: 430000,
  addrCity: 430100,
  addrDistrict: 430105,
  showCalendar: false,
  address: '湖南省/长沙市/开福区',
  showArea: false,
  showIdKeyboard: false,
})
const onConfirmArea = (values) => {
  answer.addrProvince = values[0].code
  answer.addrCity = values[1].code
  answer.addrDistrict = values[2].code
  answer.address = values
      .filter((item) => !!item)
      .map((item) => item.name)
      .join('/')
  answer.showArea = false
}
const onConfirmDate = (date) => {
  answer.date =
      date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2)
  answer.showCalendar = false
}
const onInputIdcard = (val) => {
  if (val === '清空') {
    setTimeout(() => {
      answer.idcard = ''
    })
  }
}
const from = ref('')
const router = useRouter()

const mFocus = ref(null)
watchEffect(() => {
  if (answer.temperature === 2) {
    setTimeout(() => {
      mFocus.value.focus()
    }, 100)
  } else {
    answer.feverNumber = ''
  }
})
watchEffect(() => {
  if (answer.symptoms.length > 0) {
    answer.item5 = 51
  }
})
watchEffect(() => {
  if (answer.item5 === 52) {
    answer.symptoms = []
  }
})
const submit = () => {
  const message = validateCovid19Answer(answer)
  if (message === '') {
    submitCovidAssessment(answer).then((res) => {
      showDialog({
        title: '提示',
        message: '提交成功！',
      }).then(() => {
        router.go(-1)
      })
    })
  } else {
    showDialog({
      title: '提示',
      message: message,
    }).then(() => {
      if (message.startsWith('请先绑定')) {
        router.push('/myPatientIdCards')
      }
    })
  }
}

onMounted(() => {
  const patientId = router.currentRoute.value.params.patientId
  if (!patientId || patientId === ':patientId') {
    showDialog({
      message: '请先绑定就诊卡！',
      title: '提示',
    }).then(() => {
      router.push('/myPatientIdCards')
    })
  } else {
    from.value = router.currentRoute.value.params.from
    answer.patientId = patientId
    getPatientInfo(patientId).then((res) => {
      answer.name = res.name
      answer.phone = res.phone
      answer.idcard = res.idcard
      answer.date = getDate()
    })
  }
})
</script>

<style scoped>
#question-body {
  padding: 0 20px 20px 20px;
}
#question-body > div {
  margin-bottom: 15px;
}
</style>
