<template>
  <el-container>
    <el-main>
      <div>
        姓名：<el-input v-model="answer.name" style="width: 100px" />
        <span style="margin-left: 10px">
          身份证：
          <el-input v-model="answer.idcard" style="width: 170px" />
        </span>
      </div>
      <div style="margin-top: 5px">
        电话：
        <el-input v-model="answer.phone" style="width: 120px" />
        <span style="margin-left: 10px"> 就诊日期：<el-date-picker type="date" v-model="answer.date" style="width: 130px" /> </span>
      </div>
      <div style="margin-top: 5px">
        住址地区：
        <el-select v-model="answer.addrProvince" style="width: 110px" @change="findChildRegion">
          <el-option v-for="item in region.province" :key="item.code" :value="item.code" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="answer.addrCity" style="width: 110px" @change="findGreatChildRegion">
          <el-option v-for="item in region.city" :key="item.code" :value="item.code" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="answer.addrDistrict" style="width: 110px">
          <el-option v-for="item in region.district" :key="item.code" :value="item.code" :label="item.name"></el-option>
        </el-select>
      </div>
      <div style="margin-top: 5px">
        体温：
        <label><input type="radio" name="temperature" value="1" v-model="answer.temperature" />正常</label>
        <label style="margin-left: 5px"> <input type="radio" name="temperature" value="2" v-model="answer.temperature" />发烧 </label>
        <el-input id="mFocus" type="number" style="width: 70px; margin-left: 5px" v-model="answer.feverNumber" :disabled="answer.temperature != 2" />℃
      </div>
      <div style="height: 7px"></div>
      <div v-for="item in assessmentItems" :key="item.key" style="margin-top: 5px">
        {{ item.label }}
        <div>
          <div v-for="option in item.options" :key="option.key">
            <label>
              <input type="radio" :name="item.key" :value="option.key" v-model="answer['item' + item.key]" />
              {{ option.label }}
            </label>
            <div v-for="child in option.children" :key="child.key" style="margin-left: 20px">
              <label>
                <input type="checkbox" name="symptoms" :value="child.key" v-model="answer.symptoms" />
                {{ child.label }}
              </label>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 70%; text-align: right; margin: 20px 0 0 0">签字：</div>
      <div style="width: 100%; text-align: center" class="no-print">
        <el-button style="width: 160px" type="primary" icon="Check" @click="submit"> 提交 </el-button>
        <el-button style="width: 160px" type="primary" icon="Printer" @click="print" :disabled="!printPermission"> 打印 </el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { getDate } from '@/utils/date'
import { getPatientInfo, submitCovidAssessment, getRegionProvince, getChildRegion } from '@/api/covid'
import { validateCovidAnswer } from '@/utils/validate'
import { useRouter } from 'vue-router'
import { assessmentItems } from '@/data/covid'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  setup() {
    const answer = reactive({
      name: '',
      phone: '',
      idcard: '',
      symptoms: [],
      addrProvince: 430000,
      addrCity: '',
      addrDistrict: '',
      date: '',
    })
    watchEffect(() => {
      if (answer.temperature == 2) {
        setTimeout(() => {
          document.getElementById('mFocus').focus()
        }, 100)
      } else {
        answer.feverNumber = ''
      }
    })
    watchEffect(() => {
      if (answer.symptoms.length > 0) {
        answer.item5 = 51
      }
    })
    watchEffect(() => {
      if (answer.item5 === 52) {
        answer.symptoms = []
      }
    })

    const region = reactive({ province: [], city: [], district: [] })

    const initRegion = () => {
      answer.date = getDate()
      getRegionProvince().then((res) => {
        region.province = res
        findChildRegion(430000)
      })
    }
    const findChildRegion = (code) => {
      getChildRegion(code).then((res) => {
        region.city = res
        answer.addrCity = res[0].code
        findGreatChildRegion(res[0].code)
      })
    }
    const findGreatChildRegion = (code) => {
      getChildRegion(code).then((res) => {
        region.district = res
        answer.addrDistrict = res[0].code
      })
    }
    const submit = () => {
      const message = validateCovidAnswer(answer)
      if (message === '') {
        submitCovidAssessment(answer).then(() => {
          ElMessageBox.alert('提交成功，如需打印请点击下方打印按钮。', '提示', {
            type: 'success',
          })
            .then(() => {
              printPermission.value = true
            })
            .catch(() => {
              printPermission.value = true
            })
        })
      } else {
        ElMessage.warning(message)
      }
    }

    const printPermission = ref(false)

    const print = () => {
      if (!printPermission.value) {
        ElMessage({
          message: '提交成功之后才可以打印！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
      } else {
        window.print()
      }
    }

    onMounted(() => {
      const router = useRouter()
      const patientId = router.currentRoute.value.params.patientId
      if (patientId === ':patientId') {
        answer.date = getDate()
        initRegion()
      } else {
        answer.patientId = patientId
        getPatientInfo(patientId).then((res) => {
          answer.name = res.name
          answer.phone = res.phone
          answer.idcard = res.idcard
          answer.date = getDate()
          initRegion()
        })
      }
    })
    return {
      answer,
      assessmentItems,
      region,
      initRegion,
      findChildRegion,
      findGreatChildRegion,
      submit,
      printPermission,
      print,
    }
  },
}
</script>

<style scoped>
@media print {
  .no-print {
    display: none;
  }
}
#question-body {
  position: relative;
  background-color: whitesmoke;
  border: 1px solid silver;
  border-radius: 10px;
  padding: 0 30px;
}
#question-body > div {
  margin-bottom: 15px;
}
.tip {
  font-size: 13px;
  color: gray;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>
