<template>
  <window-size>
    <div id="sdsAssessment" ref="explain">
      <van-grid direction="horizontal" :column-num="5">
        <van-grid-item text="选项释义：" />
        <van-grid-item v-for="item in noteExpressions" :key="item.key" :text="item.label" />
      </van-grid>
    </div>
    <div style="height: 5px"></div>
    <div :style="radioStyle">
      <div style="height: 10px"></div>
      <div v-for="item in assessmentItems" :key="item.key">
        {{ item.label }}
        <div style="height: 5px"></div>
        <van-radio-group v-model="answer['item' + item.key]" direction="horizontal">
          <van-radio v-for="n in 4" :key="n" :name="item.key < 11 ? n : 5 - n">
            {{ noteExpressions[n - 1].key }}
          </van-radio>
        </van-radio-group>
        <div style="height: 10px"></div>
      </div>
    </div>
    <van-button type="primary" block icon="passed" @click="submit" style="position: absolute; bottom: 0">
      提交
    </van-button>
  </window-size>
</template>

<script setup>
import store from '@/store'
import { onMounted, reactive, ref } from 'vue'
import { getPatientInfo, submitDepressionAssessment } from '@/api/assessments'
import { validateDepressionAnswer } from '@/utils/validate'
import { showToast, showDialog } from 'vant'
import { useRouter } from 'vue-router'

const assessmentItems = [
  { key: 1, label: '1. 我觉得闷闷不乐，情绪低沉。' },
  { key: 2, label: '2. 我觉得不安而平静不下来。' },
  { key: 3, label: '3. 我一阵阵地哭出来或是想哭。' },
  { key: 4, label: '4. 我晚上睡眠不好。' },
  { key: 5, label: '5. 我比平常容易激动。' },
  { key: 6, label: '6. 我认为如果我死了别人会生活的更好些。' },
  { key: 7, label: '7. 我发觉我的体重在下降。' },
  { key: 8, label: '8. 我有便秘的苦恼。' },
  { key: 9, label: '9. 我心跳比平时快。' },
  { key: 10, label: '10. 我无缘无故感到疲乏。' },
  { key: 11, label: '11. 我的头脑和平时一样清楚。' },
  { key: 12, label: '12. 我觉得经常做的事情并没有困难。' },
  { key: 13, label: '13. 我觉得一天之中早晨最好。' },
  { key: 14, label: '14. 我对将来抱有希望。' },
  { key: 15, label: '15. 我吃的和平时一样多。' },
  { key: 16, label: '16. 我觉得做出决定是容易的。' },
  { key: 17, label: '17. 我觉得自己是个有用的人，有人需要我。' },
  { key: 18, label: '18. 我的生活过得很有意思。' },
  { key: 19, label: '19. 我与异性接触时和以往一样感到愉快。' },
  { key: 20, label: '20. 平常感兴趣的事我仍然照样感兴趣。' },
]
const noteExpressions = [
  { key: 'A', label: 'A (没有或很少时间)' },
  { key: 'B', label: 'B (小部分时间)' },
  { key: 'C', label: 'C (相当多时间)' },
  { key: 'D', label: 'D (绝大部分或全部时间)' },
]
const explain = ref(null)
const answer = reactive({})
const router = useRouter()
const radioStyle = reactive({
  background: 'white',
  overflowY: 'auto',
  padding: '0 15px',
})
onMounted(() => {
  radioStyle.height = store.state.screenSize.h - 107 - explain.value.offsetHeight + 'px'
  const patientId = router.currentRoute.value.params.patientId
  if (patientId !== ':patientId') {
    answer.patientId = patientId
    getPatientInfo(patientId).then((res) => {
      answer.name = res.name
      answer.phone = res.phone
      answer.idcard = res.idcard
    })
  }
})

const submit = () => {
  const valid = validateDepressionAnswer(answer)
  if (valid < 20) {
    showToast({
      message: '有未填的选项',
      position: 'top'
    })
  } else {
    answer.score = valid
    submitDepressionAssessment(answer).then(() => {
      if (valid < 50) {
        showDialog({
          title: '恭喜',
          message: '没有抑郁的烦恼。',
        }).then(() => {})
      } else if (valid < 60) {
        showDialog({
          title: '注意',
          message: '需要引起注意，分数越高，抑郁倾向越明显。',
        }).then(() => {})
      } else {
        showDialog({
          title: '严重',
          message: '应该及时拜访心理医生，进行治疗。',
        }).then(() => {})
      }
    })
  }
}
const closeScore = () => {
  answer.score = 0
}
</script>

<style>
#sdsAssessment .van-grid-item__content {
  padding: 3px 5px;
}
</style>