<template>
  <el-container>
    <el-aside width="300px">
      <el-table :height="aside" :data="list" stripe highlight-current-row @row-click="queryDetail">
        <el-table-column prop="id" label="问卷Id" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名" width="80"></el-table-column>
        <el-table-column prop="date" label="日期" width="140"></el-table-column>
      </el-table>
    </el-aside>
    <el-main>
      <div style="width: 100%; text-align: center; font-size: 20px; font-weight: bold; margin-top: 10px">新型冠状病毒感染流行病学史问卷</div>
      <div style="margin-top: 10px">
        <span> 姓名：<el-input v-model="detail.name" style="width: 120px" readonly /> </span>
        <span style="margin-left: 15px"> 电话：<el-input v-model="detail.phone" style="width: 130px" readonly /> </span>
        <span style="margin-left: 15px"> 身份证：<el-input v-model="detail.idcard" style="width: 180px" readonly /> </span>
      </div>
      <div style="margin-top: 10px">
        就诊日期：<el-date-picker type="date" v-model="detail.date" style="width: 160px" readonly />
        <span style="margin-left: 20px">体温：</span>
        <label><input type="radio" name="temperature" value="1" v-model="detail.temperature" />正常</label>
        <label style="margin-left: 20px"> <input type="radio" name="temperature" value="2" v-model="detail.temperature" />发烧 </label>
        <el-input style="width: 70px; margin-left: 5px" v-model="detail.feverNumber" readonly />℃
      </div>
      <div style="margin: 10px 0">
        住址地区：
        <el-input v-model="detail.addrProvince" style="width: 130px" readonly></el-input>
        <el-input v-model="detail.addrCity" style="width: 130px" readonly></el-input>
        <el-input v-model="detail.addrDistrict" style="width: 130px" readonly></el-input>
      </div>
      <div v-for="item in assessmentItems" :key="item.key" style="margin-top: 10px">
        {{ 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="detail['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="symptomsList" :value="child.key" v-model="detail.symptomsList" />
                {{ child.label }}
              </label>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getList, getDetail } from '@/api/covid'
import { assessmentItems } from '@/data/covid'
import store from '@/store'
export default {
  setup() {
    const router = useRouter()
    const patientId = router.currentRoute.value.params.patientId
    const windowSize = store.state.app.windowSize
    const aside = windowSize.h
    const list = ref([])
    const detail = ref({})
    const queryDetail = (row) => {
      getDetail(row.id).then((res) => {
        detail.value = res
      })
    }
    onMounted(() => {
      getList(patientId).then((res) => {
        list.value = res
      })
    })
    return {
      aside,
      list,
      detail,
      assessmentItems,
      queryDetail,
    }
  },
}
</script>
