<template>
  <div class="questions">
    <div class="question-main">
      <div class="question-choose flex flex-row-left flex-col-center">
        <span>问卷选择</span>
        <el-select size="small" v-model="questionTest" @change="testChange">
          <el-option
            :value="item.value"
            :label="item.key"
            v-for="(item,index) in testList"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="tip">跟据您最近一年的体验和感觉,请完成以下问卷</div>
      <!-- 体质辨识问卷 -->
      <template v-if="questionTest==1">
        <div v-for="(item,index) in questions" :key="index">
          <div class="title">体质名称:{{item.groupname}}</div>
          <div class="title">体质介绍:{{item.description}}</div>

          <div class="question-body">
            <div class="question-item" v-for="(item1,index1) in item.item" :key="index1">
              <div class="question-title">{{item1.itemseqn}}、{{item1.itemname}}</div>
              <div class="question-answers flex-vertical-center-l">
                <div
                  :class="item2.checked?'flex-center active':'flex-center'"
                  v-for="(item2,index2) in item1.options"
                  :key="index2"
                  @click.stop="choosequestion(item.groupid,item1.itemid,item2.optioned)"
                >{{item2.optionname}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 基公卫问卷  -->
      <template v-if="questionTest==2">
        <div v-for="(item,index) in questions" :key="index">
          <div class="question-body">
            <div class="question-item">
              <div class="question-title">{{item.itemseqn}}、{{item.itemname}}</div>
              <div class="question-answers flex-vertical-center-l">
                <div
                  :class="item1.checked?'flex-center active':'flex-center'"
                  v-for="(item1,index1) in item.options"
                  :key="index1"
                  @click.stop="checkBasicOption(index,index1)"
                >
                  {{item1.dealName}}
                  <span v-if="item1.tipText">{{item1.tipText}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <!--  -->
    <div class="flex flex-row-left">
      <div class="submit flex-center" style="margin-right:10px;" @click="submit">提交</div>
      <div class="submit flex-center" @click="$router.back()">返回</div>
    </div>
  </div>
</template>
<script>
import {
  getPhysicalQ,
  getPhysicaRes,
  getPhysicalTest,
  getBasicQuestion,
  getBasicRes
} from "@/api/knowledge.js";
import { addPhysicalList } from "@/api/diagnosis.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      questionTest: "",
      testList: [],
      questions: [],
      qlength: 0
    };
  },
  created() {
    this.getPhysicalQ();
    this._getPhysicalTest();
  },
  computed: {
    ...mapGetters(["getPatiensInfo"])
  },
  methods: {
    testChange(e) {
      console.log(e, "修改");
      if (e == 1) {
        this.getPhysicalQ();
      } else {
        this._getBasicQuestion();
      }
    },
    submit() {
      if (this.questionTest == 2) {
        this._getBasicRes();
        return;
      }
      // let choose = 0
      // this.questions.forEach((item, index2) => {
      //     item.item.forEach((item1, index3) => {
      //         item1.options.forEach((item2, index4) => {

      //             if (item2.checked) {

      //                 choose += 1
      //             }
      //         })
      //     })
      // })

      // if (choose !== this.qlength) {
      //     this.$message({
      //         showClose: true,
      //         message: '请完善问卷信息'
      //     })
      //     return
      // }

      this.getPhysicaRes();
    },
    // 基公卫 问卷选中
    checkBasicOption(index, index1) {
      this.questions[index].options.forEach((item, current) => {
        if (current == index1) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    // 选择答案
    choosequestion(id, id1, id2) {
      this.questions.forEach((item, index2) => {
        if (item.groupid == id) {
          item.item.forEach((item1, index3) => {
            if (id1 == item1.itemid) {
              item1.options.forEach((item2, index4) => {
                if (item2.optioned == id2) {
                  item2.checked = true;
                } else {
                  item2.checked = false;
                }
              });
            }
          });
        }
      });
      // this.questions[index].children[index1].checked = !this.questions[index].children[index1].checked
    },
    //获取体质辨识问卷
    async getPhysicalQ() {
      let params = {
        groups: "1,2,3,4,5,6,7,8,9"
      };
      let res = await getPhysicalQ(params);
      if (res.code == 0) {
        res.data.options.forEach(item => {
          if (item.optioned == "6") {
            item.checked = true;
          } else {
            item.checked = false;
          }
        });
        res.data.options = JSON.stringify(res.data.options);
        res.data.groups.forEach((item, index) => {
          this.qlength += item.item.length;
          item.item.forEach(item1 => {
            item1.options = JSON.parse(res.data.options);
          });
        });

        this.questions = res.data.groups;
      }
    },
    // 获取基公卫 问卷内容
    async _getBasicQuestion() {
      let res = await getBasicQuestion();
      if (res.code == 0) {
        res.data.problems.forEach((item, index) => {
          item.options.forEach((item1, index1) => {
            item1.dealName = "";
            let name = item1.optionname.split("\n")[0];
            item1.tipText = item1.optionname.split("\n")[1];
            item1.checked = false;
            if (name == 1) {
              item1.dealName = "没有(根本不)";
            }

            if (name == 2) {
              item1.dealName = "很少(有一点)";
            }

            if (name == 3) {
              item1.dealName = "有时(有些)";
              item1.checked = true;
            }

            if (name == 4) {
              item1.dealName = "经常(相当)";
            }

            if (name == 5) {
              item1.dealName = "总是(非常)";
            }
          });
        });

        this.questions = res.data.problems;
      }
    },
    // 获取问卷列表
    async _getPhysicalTest() {
      let res = await getPhysicalTest({
        basisPatientId: this.getPatiensInfo.basisPatient.pid
      });
      if (res.code == 0) {
        res.data.forEach(item => {
          if (item.key.indexOf("系统推荐") != -1) {
            this.questionTest = item.value;
            if (item.value == 1) {
              this.getPhysicalQ();
            } else {
              this._getBasicQuestion();
            }
          }
        });
        this.testList = res.data;
      }
    },

    // 获取结果
    async getPhysicaRes() {
      let answers = [];

      this.questions.forEach(item => {
        let obj = {
          groupid: item.groupid,
          groupseqn: item.groupseqn,
          item: []
        };
        item.item.forEach(item1 => {
          let obj1 = {
            itemSeqn: item1.itemseqn,
            itemid: item1.itemid,
            optionid: "",
            score: ""
          };
          item1.options.forEach(item2 => {
            if (item2.checked) {
              obj1.optionid = item2.optioned;
              obj1.score = item2.score;
              obj.item.push(obj1);
            }
          });
        });
        answers.push(obj);
      });

      let params = answers;
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getPhysicaRes(params).catch(err => {
        loading.close();
      });
      if (res.code == 0) {
        this.addPhysicalList(res.data, loading);
      }
    },
    // 获取公卫结果
    async _getBasicRes() {
      let params = [];

      this.questions.forEach((item, index) => {
        item.options.forEach(item1 => {
          if (item1.checked) {
            let obj = {
              itemId: item1.optioned,
              score: item1.score
            };

            params.push(obj);
          }
        });
      });
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getBasicRes(params).catch(err => {
        loading.close();
      });
      if (res.code == 0) {
        this.addPhysicalList(res.data, loading);
      }
    },
    // 提交体质辨识信息
    async addPhysicalList(group, loading) {
      let params = {
        group,
        patientId: this.getPatiensInfo.basisPatient.pid,
        questionnaireType: this.questionTest
      };
      let res = await addPhysicalList(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          showClose: true,
          message: "提交成功",
          type: "success"
        });

        setTimeout(() => {
          this.$router.push({
            path: "/index/questionsr?pid=" + res.ResultInfo + "&type=edit"
          });
        }, 2000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.question-choose {
  margin-bottom: 10px;

  span {
    font-size: 16px;
    font-weight: 600;
    margin-right: 10px;
  }
}

.questions {
  padding: 10px 10px;
  background: #fff;
  border-radius: 5px;
  height: 78vh;
  // overflow: auto;

  .question-main {
    height: 89%;
    overflow: auto;
    // background: red;
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-bottom: 37px;
  }

  .question-body {
    .question-item {
      margin-bottom: 28px;

      .question-title {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 25px;
      }

      .question-answers {
        div {
          width: 120px;
          height: 40px;
          background: #f5f5f5;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          cursor: pointer;
          margin-right: 50px;
          position: relative;

          span {
            position: absolute;
            left: 0;
            // right: 0;
            font-size: 12px;
            top: -22px;
            color: #000;
            width: 180px;
            // text-align: center;
          }
        }

        .active {
          background: #ffae45;
          color: #fff;
        }
      }
    }
  }

  .submit {
    margin-top: 10px;
    width: 100px;
    height: 40px;
    background: #5386f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.tip {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.question-choose ::v-deep .el-select {
  width: 350px;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .questions {
    height: 87vh;

    .question-main {
      height: 94%;
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .questions {
    height: 86vh;

    .question-main {
      height: 94%;
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .questions {
    height: 80vh;

    .question-main {
      height: 90%;
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .questions {
    height: 80vh;

    .question-main {
      height: 90%;
    }
  }
}
</style>