<template>
  <div class="box">
    <nav-bar/>
    <div class="questionbox">
      <div v-for="(item,index) in questions" :key="index">
        <div class="questionclass">
          <van-cell :title="item.question"/>
          <van-cell>
            <van-radio-group v-model="resultList[index].value" direction="horizontal">
              <van-radio :name="item.departmentName">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </van-cell>
        </div>

        <!--        <van-list>-->
        <!--          <div>-->
        <!--            <li v-for="item in questions">-->
        <!--              {item}-->
        <!--              <span>{{ item.question }}</span>-->
        <!--            </li>-->
        <!--          </div>-->

        <!--        </van-list>-->
        <!--        <van-row>-->
        <!--          <van-col-->
        <!--              :class="((indexno==index)||(indexno>index))?'answeryesgray':'answeryes'" offset="16" span="3"-->
        <!--              @click="chooseyes(index)"-->
        <!--          >是-->
        <!--          </van-col>-->
        <!--          <van-col-->
        <!--              :class="(((index+1)==length))?'answernogray':'answerno'" offset="1" span="3" @click="chooseno(index)"-->
        <!--          >否-->
        <!--          </van-col>-->
        <!--        </van-row>-->

      </div>
      <div>
        <van-button type="primary" size="large" @click="handlerAnalyse">确定</van-button>
      </div>
    </div>

    <van-popup
        v-model="analyShow"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '30%' }">
      <span> 推荐科室：</span>
      <van-cell
          v-for="(item,i) in showList"
          :key="i"
          :title="item.value"
      />
    </van-popup>
    <div class="gao"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  getdzQuestions

} from "@/request/api.js";
import {Toast} from 'vant';

export default {
  components: {},
  data() {
    return {
      radio: [],
      area: "",
      type: "",
      questions: [],
      disabled: false,
      resultList: [],
      showList: [],
      zdResult: [],
      indexno: -1,
      answeryes: "",
      answerno: true,
      analyShow: false,
      length: 0,
      wentiflag: 0,


    };
  },
  // updated() {
  //
  //
  //   setTimeout(() => {
  //     this.$nextTick(() => {
  //       var container = this.$el.querySelector(".questionbox");
  //       let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  //       document.documentElement.scrollTop = container.scrollHeight;
  //       document.body.scrollTop = container.scrollHeight;
  //
  //
  //     })
  //   }, 100)
  // },
  mounted() {

    this.area = this.$route.query.area;
    this.type = this.$route.query.type;
    let data = {
      area: this.area,
      type: this.type
    }
    getdzQuestions(data).then(res => {

      this.questions = res.data
      console.log(this.questions)
      for (let i = 0; i < this.questions.length; i++) {
        this.resultList.push(
            {
              id: this.questions[i].id,
              value: this.questions[i].departmentName,
            }
        )
        console.log(this.resultList)
      }

      // console.log(this.list)
      // console.log(this.list[0])
      // this.questionlist.push(this.list[0]);
      // console.log(this.questionlist)
      // this.length = this.list.length;
    })

    // var mx = '{"root":[{"body":"头部","zhengzhuanglist":[{"zhengzhuang":"头晕","wenti":[{"wentimx":"是否伴有四肢无力，部分身体麻木，视觉模糊，语言困难？","keshi":"神经内科"},{"wentimx":"是否脸色苍白，指甲色淡？","keshi":"血液内科"}]},{"zhengzhuang":"面部疼痛","wenti":[{"wentimx":"疼痛部位是否有水疱状皮疹？","keshi":"皮肤科,神经内科"}]},{"zhengzhuang":"头痛","wenti":[{"wentimx":"是否有药物或酒精摄入史？","keshi":"神经内科"},{"wentimx":"是否头后部痛且伴有头晕、耳鸣、心悸、呼吸困难？","keshi":"神经内科,呼吸内科"},{"wentimx":"头部有无撞击或受过伤？","keshi":"神经外科"},{"wentimx":"脸部附近是否感到电击般疼痛？","keshi":"神经内科"},{"wentimx":"是否头部一侧跳痛？","keshi":"神经内科"},{"wentimx":"是否伴有头晕、恶心、呕吐？","keshi":"神经内科"},{"wentimx":"脖子、肩部肌肉是否酸胀？","keshi":"骨科"},{"wentimx":"是否头痛以头前部为中心，并伴有眼睛、鼻子的异常？","keshi":"耳鼻咽喉头颈外科,神经内科"},{"wentimx":"是否头部闷痛，且有加重倾向？","keshi":"神经内科,心内科"},{"wentimx":"是否头后部痛且伴有头晕、耳鸣、心悸、呼吸困难？","keshi":"神经内科,骨科"},{"wentimx":"与以前相比，早上是否感觉难受，不易起床，且持续一段时间？","keshi":"精神卫生科"},{"wentimx":"是否伴有眼睛疲劳、疼痛或模糊？","keshi":"眼科"}]},{"zhengzhuang":"耳痛","wenti":[{"wentimx":"最近是否感冒？","keshi":"耳鼻咽喉头颈外科"},{"wentimx":"是否伴有牙齿疼痛？","keshi":"牙科,耳鼻咽喉头颈外科"},{"wentimx":"抽拉耳垂时是否疼痛？","keshi":"耳鼻咽喉头颈外科"},{"wentimx":"是否伴有头痛和喷射性呕吐？","keshi":"耳鼻咽喉头颈外科,神经内科"},{"wentimx":"耳中是否会流出青黄色的分泌物？","keshi":"耳鼻咽喉头颈外科"}]},{"zhengzhuang":"腮腺肿大","wenti":[{"wentimx":"是否伴有发热，皮肤潮红、局部水肿，按压腺体有脓液流入口腔，腺体肿大可伴有暂时性面瘫？","keshi":"耳鼻咽喉头颈外科,呼吸内科"},{"wentimx":"是否发生在中老年，在耳垂后下方，圆形或椭圆形，表面光滑，少有结节，质地软，有弹性，时大时小？","keshi":"牙科,耳鼻咽喉头颈外科"},{"wentimx":"是否发生在中年以上，单侧腮腺内无痛性肿块，生长缓慢，无自觉症状，呈结节状，周界清楚，有一定的活动度？","keshi":"牙科,耳鼻咽喉头颈外科"}]}]},{"body":"耳眼口鼻","zhengzhuanglist":[{"zhengzhuang":"口臭","wenti":[{"wentimx":"是否吃过大蒜、洋葱或是在过去的24小时内喝过酒？","keshi":"牙科"},{"wentimx":"是否吸烟？","keshi":"牙科"},{"wentimx":"舌头或口腔内是否肿痛？","keshi":"牙科,耳鼻咽喉头颈外科"},{"wentimx":"是否没有天天刷牙？","keshi":"牙科"}]},{"zhengzhuang":"嘴疼","wenti":[{"wentimx":"上唇部及周围是否疼痛，并在疼痛处出现红色小苞？","keshi":"皮肤科"},{"wentimx":"最近是否更换化妆品，并且口唇周围红肿？","keshi":"皮肤科"},{"wentimx":"口腔内或舌头上是否出现白色的小点或者黏膜缺损？","keshi":"牙科"},{"wentimx":"口腔内或舌头上是否出现乳黄色的膜，而且容易刮掉？","keshi":"牙科"}]},{"zhengzhuang":"眼屎多","wenti":[{"wentimx":"是否伴有眼睑下垂、一侧面部变软无力、耳朵疼？","keshi":"神经内科"},{"wentimx":"眼睛上是否有很痛的肿粒？","keshi":"眼科"},{"wentimx":"眼睛是否发红、发痒且疼痛？","keshi":"眼科"}]},{"zhengzhuang":"牙痛","wenti":[{"wentimx":"牙痛是否是突发出现，伴有发热、牙龈肿胀或颈部肿胀？","keshi":"牙科"},{"wentimx":"是否遇到冷、热、酸、甜刺激时疼痛？","keshi":"牙科"},{"wentimx":"是否伴有下颚疼痛，张嘴时听到咯咯的声音，并感到疼痛？","keshi":"牙科"},{"wentimx":"是否不过牙，且在咀嚼或撕咬时感到很疼？","keshi":"牙科"}]},{"zhengzhuang":"流泪","wenti":[{"wentimx":"是否伴有红眼、眼分泌物多、有异物感、眼内烧灼样疼痛等？","keshi":"眼科"},{"wentimx":"是否有异物感、眼睛红、畏光、睁不开眼睛、疼痛、结膜水肿？","keshi":"眼科"},{"wentimx":"是否伴有眼睛剧烈瘙痒、怕光、有异物感，睫毛常被分泌物粘连？","keshi":"眼科"},{"wentimx":"是否伴有眼部胀痛、头痛、头晕、视力下降？","keshi":"眼科"}]},{"zhengzhuang":"耳鸣","wenti":[{"wentimx":"是否在噪声很大的环境里待过而且听力收到影响？","keshi":"耳鼻咽喉头颈外科,耳科"},{"wentimx":"脑部或者耳部是否受到过打击之后才出现的耳鸣？","keshi":"耳鼻咽喉头颈外科,耳科,神经外科"},{"wentimx":"眩晕是否突然出现而且很严重，且伴有恶心、呕吐？","keshi":"耳鼻咽喉头颈外科,耳科,神经外科"},{"wentimx":"是否感到眩晕，失去平衡，伴有麻木、四肢移动困难、语言困难、视物模糊、意识模糊？","keshi":"神经内科"}]},{"zhengzhuang":"眼球突出","wenti":[{"wentimx":"是否高度近视？","keshi":"眼科"},{"wentimx":"是否出现单侧眼睑红肿、下垂，并伴有疼痛、复视及眼球运动障碍？","keshi":"眼科"},{"wentimx":"是否伴有高热、眼睑和结膜高度充血、水肿，眼睑部皮肤红肿、压痛？","keshi":"眼科"},{"wentimx":"是否伴有消瘦、怕热、多汗、心悸？","keshi":"眼科"}]},{"zhengzhuang":"眼睛红","wenti":[{"wentimx":"春秋季流行，是否双眼有异物感、疼痛，畏光流泪，有水性或粘性分泌物，结膜充血、水肿，耳前淋巴结肿大？","keshi":"眼科"},{"wentimx":"眼睑部内侧或外侧是否出现异状胬肉（比如鸟翼），表面不行，尖端向中间攀移、血管充血？","keshi":"眼科"},{"wentimx":"是否伴有眼痛、畏光流泪，实力减退，瞳孔缩小、对光反射迟钝等症状？","keshi":"眼科"},{"wentimx":"是否有水性分泌物，下眼睑常有水泡或膜状物形成，视力不受影响，病程短7-10天？","keshi":"眼科"}]},{"zhengzhuang":"眼睛干涩","wenti":[{"wentimx":"是否长期使用某种眼药水？","keshi":"眼科"},{"wentimx":"是否带隐形眼镜？","keshi":"眼科"},{"wentimx":"是否为怀孕期、哺乳期或口服避孕药的妇女？","keshi":"妇科"},{"wentimx":"是否处于更年期、且伴有眼干、口干、萎缩性舌炎、口腔黏膜糜烂、灼痛及刺激痛等？","keshi":"风湿免疫门诊,妇科"}]},{"zhengzhuang":"牙齿异常","wenti":[{"wentimx":"牙齿表面是否有深浅、大小各不相同的带状或点状凹陷缺损？","keshi":"牙科"},{"wentimx":"颜色由黄变成暗棕或灰色，且在婴幼儿时期，是否服用四环素药物？","keshi":"牙科"},{"wentimx":"出生时或出生后不就下颌就有牙齿萌出？","keshi":"牙科"},{"wentimx":"牙齿表面是否出现黄褐色斑块？","keshi":"牙科"}]}]}]}';
    // this.list = JSON.parse(mx);
    // //console.log(JSON.parse(mx));
    // for (var i = 0; i < this.list.root[0].zhengzhuanglist.length; i++) {
    //   if (this.Detail == this.list.root[0].zhengzhuanglist[i].zhengzhuang) {
    //     this.wentiflag = i;
    //   }
    //
    // }
    //console.log(this.wentiflag);

    //console.log(this.questionlist);
  },
  methods: {

    handlerAnalyse() {
      let ss = this.resultList
      console.log(ss)
      let aa = []
      for (let i = 0; i < ss.length; i++) {
        if (ss[i].value !== '0') {
          aa.push(ss[i])
        }
      }

 // 去重处理 - 使用 Map
  const map = new Map();
  const uniqueDepartments = aa.filter(item => 
    !map.has(item.value) && map.set(item.value, 1)
  );

      this.showList = uniqueDepartments
      // this.resultList = aa
      console.log(this.showList)
      this.analyShow = true
    },

    // chooseyes(index) {
    //   if ((this.indexno + 1) == parseInt(index)) {
    //     Toast(this.list[0].departmentName);
    //
    //   }
    //   if (this.length == (index + 1)) {
    //     Toast(this.list[0].departmentName);
    //
    //   }
    //
    // },
    // chooseno(index) {
    //   if (this.length > parseInt(index) && this.indexno < parseInt(index)) {
    //     this.questionlist.push(this.list[index + 1]);
    //     this.indexno = parseInt(index);
    //     //console.log(this.questionlist);
    //
    //   }

    /*         console.log(this.length);
            console.log(index);
            console.log(this.indexno); */

    // },
  },
};
</script>


<style scoped lang="scss">

.tjCard {
  margin-top: 0.5rem;
  height: 2.5rem;
  border: 2px solid;
}

.questionclass {
  padding: 0.75rem 0;
  background-color: #fff;
  height: 80%;

}

.van-cell__title {
  max-width: 70%; //可根据自己需求设定值
  text-align: left;
}

.van-col {
  font-size: 0.375rem;
  color: #166bcc;
  border: 2px solid #166bcc;
  border-radius: 0.375rem;
  height: 0.75rem;
  text-align: center;
  line-height: 0.75rem;
}

.answeryesgray {
  color: #ccc;
  border: 1px solid #ccc;
}

.answernogray {
  color: #ccc;
  border: 2px solid #ccc;
}

.gao {
  height: 2rem;
  width: 100%;
}

.box {
  height: 100%;
  width: 100%;


}
</style>
