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

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

    <div style="padding: 6px 6px 12px 6px; border-bottom: 1px dashed rgb(128,128,128)">
      <p>12-1、请您对本次就诊的医疗服务全过程给予整体评价(1-10分)</p>
      <van-radio-group v-model="answer.ztpj" 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.zmydyshs">
      </div>
    </div>

    <div class="m-input" style="padding: 0 6px; margin-bottom: 20px">
      您对我院的建议和意见：
      <input type="text" v-model="answer.dwydjyhyj" 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 {submitOutpatientQuestionnaire} from '@/api/assessments'
import {showDialog, showToast} from "vant";
import {useRouter} from "vue-router";
import {receiveAssessmentGift} from "@/api/coupon";

const router = useRouter()
const routerValue = router.currentRoute.value
const routerParams = routerValue.params.patientId
const couponGift = routerValue.path.indexOf('clinicSatisfiedByPush') > -1
    && routerParams.indexOf('AND') > -1

const answer = reactive({
  patientId: routerParams.split('AND')[0]
})

const disableSubmitButton = ref(false)
const headQuestions = [
  {code: 'mjzdzjhl', prefix: '1-1、', label: '您对门急诊导诊及护理人员服务满意吗？', hasWjc: true},
  {code: 'mjzys', prefix: '2-1、', label: '您对门急诊医生服务满意吗？', hasWjc: true},
  {code: 'yjk', prefix: '3-1、', label: '您对药剂科工作人员服务满意吗？', hasWjc: true},
  {code: 'fsk', prefix: '4-1、', label: '您对放射科工作人员服务满意吗？', hasWjc: true},
  {code: 'csyxk', prefix: '5-1、', label: '您对超声影像科工作人员服务满意吗？', hasWjc: true},
  {code: 'jyk', prefix: '6-1、', label: '您对检验科工作人员服务满意吗？', hasWjc: true},
  {code: 'sfck', prefix: '7-1、', label: '您对收费窗口工作人员服务满意吗？', hasWjc: true},
  {code: 'ybk', prefix: '8-1、', label: '您对医保科工作人员服务满意吗？', hasWjc: true},
  {code: 'yyhjws', prefix: '9-1、', label: '您对医院环境卫生满意吗?'}
]

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

// 默认选项
const mrXx = ['叫号服务', '等待时长', '服务态度', '沟通解释', '及时响应', '服装礼仪', '准确率']

const mjzysXx = ['技术水平', '隐私保护', '服务态度', '沟通解释', '按时坐诊', '服装礼仪']

const mjzjdzhlXx = ['技术水平', '隐私保护', '服务态度', '沟通解释', '病情巡视', '服装礼仪']

const lwyyyXx = ['慕名而来', '就近选择', '朋友推荐', '网络查询', '服务水平', '环境设备', '医疗价格']

const ybkXx = ['专业能力', '等待时长', '服务态度', '沟通解释', '及时响应', '服装礼仪', '服务流程']

const hjwxXx = ['食堂卫生', '门诊大厅卫生', '诊间卫生', '病房卫生', '卫生间卫生', '电梯卫生', '楼道卫生', '座椅卫生', '公共区域']

const hbhXx = ['会', '不会']

function getOptions(code) {
  if (code === 'mjzdzjhl') {
    return mjzjdzhlXx
  } else if (code === 'mjzys') {
    return mjzysXx
  } else if (code === 'ybk') {
    return ybkXx
  } else if (code === 'yyhjws') {
    return hjwxXx
  } else {
    return mrXx
  }
}

const submitAnswer = () => {
  if (!validAnswer()) {
    return
  }
  console.log(answer)
  submitOutpatientQuestionnaire(answer).then(() => {
    disableSubmitButton.value = true
    if (couponGift) {
      receiveAssessmentGift(routerParams).then((res) => {
        showDialog({
          title: '提示',
          message: res,
        }).then(() => {
          gotoResult()
        }).catch(() => {
          gotoResult()
        })
      }).catch(() => {
        gotoResult()
      })
    } else {
      gotoResult()
    }
  })
}

const gotoResult = () => {
  router.push({
    name: 'resultSuccess',
    params: {
      title: '提交成功',
      subtitle: '感谢您的评价，您的意见对我们非常重要。',
    },
  })
}

const keyList = [
  {key1: 'mjzdzjhl', key2: 'mjzdzjhlBmyyyList', key3: 'mjzdzjhlInput'},
  {key1: 'mjzys', key2: 'mjzysBmyyyList', key3: 'mjzysInput'},
  {key1: 'yjk', key2: 'yjkBmyyyList', key3: 'yjkInput'},
  {key1: 'fsk', key2: 'fskBmyyyList', key3: 'fskInput'},
  {key1: 'csyxk', key2: 'csyxkBmyyyList', key3: 'csyxkInput'},
  {key1: 'jyk', key2: 'jykBmyyyList', key3: 'jykInput'},
  {key1: 'sfck', key2: 'sfckBmyyyList', key3: 'sfckInput'},
  {key1: 'ybk', key2: 'ybkBmyyyList', key3: 'ybkInput'},
  {key1: 'yyhjws', key2: 'yyhjwsBmyyyList', key3: 'yyhjwsInput'}
]
const validAnswer = () => {
  for (let i = 0; i < keyList.length; i++) {
    let keyObj = keyList[i]
    if (answer[keyObj.key1] === '不满意'
        && (!answer[keyObj.key2] || answer[keyObj.key2].length === 0)
        && !answer[keyObj.key3]) {
      showToast({
        message: `请补充或者勾选【${i + 1}-2】中您不满意的原因。`,
        position: 'top',
        duration: 3000,
      })
      return false
    }
  }

  if ((!answer.xzwyyyList || answer.xzwyyyList.length === 0)
      && !answer.xzwyyyInput) {
    showToast({
      message: `请补充或者勾选【10-1】中的选项。`,
      position: 'top',
      duration: 3000,
    });
    return false;
  }
  if (!answer.sfhxzzl) {
    showToast({
      message: `请勾选【11-1】中的选项。`,
      position: 'top',
      duration: 3000,
    })
    return false
  }
  if (!answer.ztpj) {
    showToast({
      message: `请勾选【12-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>