<template>
  <window-size>
    <div class="question-box">
      <p>1-1、您对住院科室护理人员服务满意吗？</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer.item1" direction="horizontal">
          <van-radio name="A">满意</van-radio>
          <van-radio name="B">不满意</van-radio>
        </van-radio-group>
      </div>
      <div v-show="answer.item1 === 'B'">
        <p style="margin-top: 6px">1-2、您对住院科室护理人员哪些服务不满意？</p>
        <van-checkbox-group v-model="answer.item2Arr" direction="horizontal">
          <van-checkbox
              shape="square"
              v-for="child in checkboxOptions1"
              :key="child.key"
              :name="child.key"
              style="margin-top: 5px"
          >{{ child.label }}
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="question-box">
      <p>2-1、您对住院科室医生服务满意吗？</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer.item3" direction="horizontal">
          <van-radio name="A">满意</van-radio>
          <van-radio name="B">不满意</van-radio>
        </van-radio-group>
      </div>
      <div v-show="answer.item3 === 'B'">
        <p style="margin-top: 6px">2-2、您对住院科室医生哪些服务不满意？</p>
        <van-checkbox-group v-model="answer.item4Arr" direction="horizontal">
          <van-checkbox
              shape="square"
              v-for="child in checkboxOptions2"
              :key="child.key"
              :name="child.key"
              style="margin-top: 5px"
          >{{ child.label }}
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="question-box">
      <p>3-1、您对医院环境卫生满意吗？</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer.item5" direction="horizontal">
          <van-radio name="A">满意</van-radio>
          <van-radio name="B">不满意</van-radio>
        </van-radio-group>
      </div>
      <div v-show="answer.item5 === 'B'">
        <p style="margin-top: 6px">3-2、您对医院环境卫生哪些项目不满意？</p>
        <van-checkbox-group v-model="answer.item6Arr" direction="horizontal">
          <van-checkbox
              shape="square"
              v-for="child in checkboxOptions3"
              :key="child.key"
              :name="child.key"
              style="margin-top: 5px"
          >{{ child.label }}
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="question-box">
      <p>4-1、您对医院食堂满意吗？</p>
      <div style="margin-top: 4px">
        <van-radio-group v-model="answer.item7" 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.item7 === 'B'">
        <p style="margin-top: 6px">4-2、您对医院食堂哪些项目不满意？</p>
        <van-checkbox-group v-model="answer.item8Arr" 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>
    </div>
    <div v-for="(item, index) in headQuestions" :key="item.key" class="question-box">
      <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>
    </div>

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>13-1、您选择我院的主要原因是什么？</p>
      <van-checkbox-group v-model="answer['item1002Arr']" direction="horizontal">
        <van-checkbox
            shape="square"
            v-for="child in checkboxOptions5"
            :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>14-1、如果您或亲朋好友需要医疗保健、治疗服务时，您会选择再来或推荐来吗？</p>
      <van-radio-group v-model="answer['item1004']" direction="horizontal">
        <van-radio
            shape="square"
            v-for="child in checkboxOptions6"
            :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>15-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 {onMounted, reactive, ref} from "vue";
import {submitInpatientSatisfiedAssessment} from '../../../api/assessments'
import {showToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter()
const answer = reactive({
  inpatientNo: null,
  times: null,
  patientId: null
})
const disableSubmitButton = ref(false)

const checkboxOptions1 = [
  {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: '服装礼仪'},
  {key: 'G', label: '其他'},
]

const checkboxOptions3 = [
  {key: 'A', label: '卫生情况'},
  {key: 'B', label: '布局不合理'},
  {key: 'C', label: '服务态度'},
  {key: 'D', label: '舒适度'},
  {key: 'E', label: '按时清理'},
  {key: 'F', label: '服装礼仪'},
  {key: 'G', label: '其他'},
]

const checkboxOptions4 = [
  {key: 'A', label: '卫生情况'},
  {key: 'B', label: '口味'},
  {key: 'C', label: '菜品'},
  {key: 'D', 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: '朋友推荐'},
  {key: 'D', label: '网络查询'},
  {key: 'E', label: '服务水平'},
  {key: 'F', label: '环境设备'},
  {key: 'G', label: '医疗价格'},
]

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

const headQuestions = [
  {key: 9, label: '5-1、您对药剂科工作人员服务满意吗？'},
  {key: 11, label: '6-1、您对放射科工作人员服务满意吗？'},
  {key: 13, label: '7-1、您对超声影像科工作人员服务满意吗？'},
  {key: 15, label: '8-1、您对检验科工作人员服务满意吗？'},
  {key: 17, label: '9-1、您对收费窗口工作人员服务满意吗？'},
  {key: 19, label: '10-1、您对门诊医护人员服务满意吗？'},
  {key: 21, label: '11-1、您对急诊医护人员服务满意吗？'},
  {key: 23, label: '12-1、您对医保科工作人员服务满意吗？'}
]

const tailQuestions = [
  {key: 10, label: '5-2、您对药剂科工作人员哪些服务不满意？'},
  {key: 12, label: '6-2、您对放射科工作人员哪些服务不满意？'},
  {key: 14, label: '7-2、您对超声影像科工作人员哪些服务不满意？'},
  {key: 16, label: '8-2、您对检验科工作人员哪些服务不满意？'},
  {key: 18, label: '9-2、您对收费窗口工作人员哪些服务不满意？'},
  {key: 20, label: '10-2、您对门诊医护人员哪些服务不满意？'},
  {key: 22, label: '11-2、您对急诊医护人员哪些服务不满意？'},
  {key: 24, label: '12-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 submitAnswer = () => {
  if (!validAnswer()) {
    return
  }
  submitInpatientSatisfiedAssessment(answer).then(() => {
    disableSubmitButton.value = true
    router.push({
      name: 'resultSuccess',
      params: {
        title: '提交成功',
        subtitle: '感谢您的评价，您的意见对我们非常重要。',
      },
    })
  })
}

const keyList = [
  {key1: 'item1', key2: 'item2Arr'},
  {key1: 'item3', key2: 'item4Arr'},
  {key1: 'item5', key2: 'item6Arr'},
  {key1: 'item7', key2: 'item8Arr'},
  {key1: 'item9', key2: 'item10Arr'},
  {key1: 'item11', key2: 'item12Arr'},
  {key1: 'item13', key2: 'item14Arr'},
  {key1: 'item15', key2: 'item16Arr'},
  {key1: 'item17', key2: 'item18Arr'},
  {key1: 'item19', key2: 'item20Arr'},
  {key1: 'item21', key2: 'item22Arr'},
  {key1: 'item23', key2: 'item24Arr'},
]

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['item23'] === 'B' && !answer['item24Input']) {
    showToast({
      message: `请补充【12-2】中的原因。`,
      position: 'top',
      duration: 3000,
    });
    return false;
  }

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

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

onMounted(() => {
  let visitId = router.currentRoute.value.params.visitId
  let visitIdArr = visitId.split('AND')
  if (visitIdArr.length < 3) {
    answer.inpatientNo = 'unknown'
    answer.times = 0
    answer.patientId = visitId
  } else {
    answer.inpatientNo = visitIdArr[0]
    answer.times = visitIdArr[1]
    answer.patientId = visitIdArr[2]
  }
})
</script>

<style scoped>
.question-box {
  padding: 6px 0 12px 6px;
  border-bottom: 1px dashed rgb(128, 128, 128);
}
.m-input {
  margin-top: 6px;
}
.m-input > input {
  border: none;
  width: 80%;
  height: 26px;
  border-bottom: 1px solid rgb(128, 128, 128);
}
</style>