<template>
  <window-size>
    <div v-for="(item, index) in headQuestions" :key="item.key"
         style="padding: 6px 0 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>{{ item.label }}</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer['item' + item.key]" direction="horizontal">
          <van-radio name="A">满意</van-radio>
          <van-radio name="B">不满意</van-radio>
          <van-radio name="C">未接触</van-radio>
        </van-radio-group>
      </div>
      <div v-show="answer['item' + item.key] === 'B'">
        <p style="margin-top: 6px">{{ tailQuestions[index].label }}</p>
        <van-checkbox-group v-model="answer['item' + (item.key + 1) + 'Arr']" direction="horizontal">
          <van-checkbox
              shape="square"
              v-for="child in getOptions(item.key)"
              :key="child.key"
              :name="child.key"
              style="margin-top: 5px"
          >{{ child.label }}
          </van-checkbox>
        </van-checkbox-group>
        <div class="m-input">其他：<input type="text" v-model="answer['item' + (item.key + 1) + 'Input']"></div>
      </div>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>9-1、您选择我院的主要原因是什么？</p>
      <van-checkbox-group v-model="answer['item1002Arr']" direction="horizontal">
        <van-checkbox
            shape="square"
            v-for="child in checkboxOptions4"
            :key="child.key"
            :name="child.key"
            style="margin-top: 5px"
        >{{ child.label }}
        </van-checkbox>
      </van-checkbox-group>
      <div class="m-input">其他：<input type="text" v-model="answer['item1002Input']"></div>
    </div>
    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>10-1、如果您或亲朋好友需要医疗保健、治疗服务时，您会选择再来或推荐来吗？</p>
      <van-radio-group v-model="answer['item1004']" direction="horizontal">
        <van-radio
            shape="square"
            v-for="child in checkboxOptions5"
            :name="child.key"
            style="margin-top: 5px"
        >{{ child.label }}
        </van-radio>
      </van-radio-group>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>11-1、请您对本次就诊的医疗服务全过程给予整体评价(1-10分)</p>
      <van-radio-group v-model="answer['item1006']" direction="horizontal">
        <van-radio
            shape="square"
            v-for="n in 10"
            :name="n"
            style="margin-top: 5px"
        >{{ n }}
        </van-radio>
      </van-radio-group>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>您最满意的医生、护士是：</p>
      <div class="m-input">
        <input type="text" v-model="answer.satisfyStaff">
      </div>
    </div>

    <div class="m-input" style="padding: 0 6px; margin-bottom: 20px">
      您对我院的建议和意见：
      <input type="text" v-model="answer.suggestion" style="width: 100%">
    </div>
    <van-button type="primary" block :disabled="disableSubmitButton" @click="submitAnswer">提交</van-button>
  </window-size>
</template>
<script setup>
import {reactive, ref} from "vue";
import {submitClinicSatisfiedAssessment} from '../../../api/assessments'
import {showToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter()
const answer = reactive({
  patientId: router.currentRoute.value.params.patientId
})
const disableSubmitButton = ref(false)
const headQuestions = [
  {key: 11, label: '1-1、您对门急诊导诊及护理人员服务满意吗？'}, // checkboxOptions3
  {key: 13, label: '2-1、您对门急诊医生服务满意吗？'},
  {key: 1, label: '3-1、您对药剂科工作人员服务满意吗？'},
  {key: 3, label: '4-1、您对放射科工作人员服务满意吗？'},
  {key: 5, label: '5-1、您对超声影像科工作人员服务满意吗？'},
  {key: 7, label: '6-1、您对检验科工作人员服务满意吗？'},
  {key: 9, label: '7-1、您对收费窗口工作人员服务满意吗？'},
  {key: 15, label: '8-1、您对医保科工作人员服务满意吗？'},
]

const tailQuestions = [
  {key: 12, label: '1-2、您对门急诊导诊及护理人员哪些服务不满意？'}, // checkboxOptions3
  {key: 14, label: '2-2、您对门急诊医生哪些服务不满意？'},
  {key: 2, label: '3-2、您对药剂科工作人员哪些服务不满意？'},
  {key: 4, label: '4-2、您对放射科工作人员哪些服务不满意？'},
  {key: 6, label: '5-2、您对超声影像科工作人员哪些服务不满意？'},
  {key: 8, label: '6-2、您对检验科工作人员哪些服务不满意？'},
  {key: 10, label: '7-2、您对收费窗口工作人员哪些服务不满意？'},
  {key: 16, label: '8-2、您对医保科工作人员哪些服务不满意？'},
]

const checkboxOptions = [
  {key: 'A', label: '叫号服务'},
  {key: 'B', label: '等待时长'},
  {key: 'C', label: '服务态度'},
  {key: 'D', label: '沟通解释'},
  {key: 'E', label: '及时响应'},
  {key: 'F', label: '服装礼仪'},
  {key: 'G', label: '准确率'},
]

const checkboxOptions2 = [
  {key: 'A', label: '技术水平'},
  {key: 'B', label: '隐私保护'},
  {key: 'C', label: '服务态度'},
  {key: 'D', label: '沟通解释'},
  {key: 'E', label: '按时坐诊'},
  {key: 'F', label: '服装礼仪'},
]

const checkboxOptions3 = [
  {key: 'A', label: '技术水平'},
  {key: 'B', label: '隐私保护'},
  {key: 'C', label: '服务态度'},
  {key: 'D', label: '沟通解释'},
  {key: 'E', label: '病情巡视'},
  {key: 'F', label: '服装礼仪'},
]

const checkboxOptions4 = [
  {key: 'A', label: '慕名而来'},
  {key: 'B', label: '就近选择'},
  {key: 'C', label: '朋友推荐'},
  {key: 'D', label: '网络查询'},
  {key: 'E', label: '服务水平'},
  {key: 'F', label: '环境设备'},
  {key: 'G', label: '医疗价格'},
]

const checkboxOptions41 = [
  {key: 'A', label: '专业能力'},
  {key: 'B', label: '等待时长'},
  {key: 'C', label: '服务态度'},
  {key: 'D', label: '沟通解释'},
  {key: 'E', label: '及时响应'},
  {key: 'F', label: '服装礼仪'},
  {key: 'G', label: '服务流程'},
]

const checkboxOptions5 = [
  {key: 'A', label: '会'},
  {key: 'B', label: '不会'},
  {key: 'C', label: '不一定'},
]

function getOptions(key) {
  if (key === 11) {
    return checkboxOptions3
  } else if (key === 13) {
    return checkboxOptions2;
  } else if (key === 15) {
    return checkboxOptions41;
  } else {
    return checkboxOptions
  }
}

const submitAnswer = () => {
  if (!validAnswer()) {
    return
  }
  submitClinicSatisfiedAssessment(answer).then(() => {
    disableSubmitButton.value = true
    router.push({
      name: 'resultSuccess',
      params: {
        title: '提交成功',
        subtitle: '感谢您的评价，您的意见对我们非常重要。',
      },
    })
  })
}

const keyList = [
  {key1: 'item11', key2: 'item12Arr', key3: 'item12Input'},
  {key1: 'item13', key2: 'item14Arr', key3: 'item14Input'},
  {key1: 'item1', key2: 'item2Arr', key3: 'item2Input'},
  {key1: 'item3', key2: 'item4Arr', key3: 'item4Input'},
  {key1: 'item5', key2: 'item6Arr', key3: 'item6Input'},
  {key1: 'item7', key2: 'item8Arr', key3: 'item8Input'},
  {key1: 'item9', key2: 'item10Arr', key3: 'item10Input'},
  {key1: 'item15', key2: 'item16Arr', key3: 'item16Input'},
]
const validAnswer = () => {
  for (let i = 0; i < keyList.length; i++) {
    let keyObj = keyList[i]
    if (answer[keyObj.key1] === 'B'
        && (!answer[keyObj.key2] || answer[keyObj.key2].length === 0)
        && !answer[keyObj.key3]) {
      showToast({
        message: `请补充或者勾选【${i + 1}-2】中您不满意的原因。`,
        position: 'top',
        duration: 3000,
      })
      return false
    }
  }

  if ((!answer['item1002Arr'] || answer['item1002Arr'].length === 0)
      && !answer['item1002Input']) {
    showToast({
      message: `请补充或者勾选【9-1】中的选项。`,
      position: 'top',
      duration: 3000,
    });
    return false;
  }
  if (!answer['item1004']) {
    showToast({
      message: `请勾选【10-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  if (!answer['item1006']) {
    showToast({
      message: `请勾选【11-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  return true
}
</script>

<style scoped>
.m-input {
  margin-top: 6px;
}

.m-input > input {
  border: none;
  width: 80%;
  height: 26px;
  border-bottom: 1px solid rgb(128, 128, 128);
}

</style>