<template>
  <div id="startQuestion" class="startQuestionPageDiv">
    <div>
      <div class="xzDivAll" v-if="currenPageItem == 'question'">
        <div class="titleDivAll">
          <div class="questionIndexDiv">
            {{ questionData.position }}/{{ activityQuestionBankDTOList.length }}
          </div>
          <div class="titlePromptDiv">你们的每一个回答对我们都有很大的帮助</div>
        </div>
        <div class="questionDivAll">
          <div class="questionTitleDiv">
            <span>{{ questionData.position }}、</span>
            <span
              class="wjTypeDiv"
              v-if="
                questionData.questionType == 1 || questionData.questionType == 2
              "
            >
              【
              <span v-if="questionData.questionType == 1">单选题</span>
              <span v-else-if="questionData.questionType == 2">多选题</span>
              】
            </span>
            <span>{{ questionData.questionName }}</span>
            <span style="color:#E6A23C" v-if="questionData.maxAnswerCount && questionData.questionType == 2">
              (至多{{questionData.maxAnswerCount}}项)
            </span>
          </div>

          <div
            v-if="
              questionData.questionType == 1 || questionData.questionType == 2
            "
            class="questionListDiv"
          >
            <div class="questionItemDiv">
              <div
                v-for="(item, index) in questionData.qaAnswerList"
                :key="index"
                @click="
                  SelectButtonClick(questionData.questionType, index, item)
                "
              >
                <div class="voteBox">
                  <div class="m-r-17">
                    <div
                      :class="
                        item.isChecked
                          ? 'voteSelectButtonChecked'
                          : 'voteSelectButton'
                      "
                    ></div>
                  </div>
                  <div class="questionNameDiv">{{ item.answerName }}</div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="questionData.questionType == 3">
            <textarea
              class="textarea"
              v-model.trim="questionData.inputQuestion"
              onkeyup="javascript:if(event.keyCode == 32)event.returnValue = false;"
              maxlength="100"
              placeholder="至少请输入1个字,最多可输入100字"
              @input="
                SelectButtonClick(questionData.questionType, null, $event)
              "
            ></textarea>
          </div>

          <div
            class="buttonDivAll"
            :class="
              questionType == 3 ? 'buttonDivAll' : 'buttonDivAll buttonDivAll1'
            "
          >
            <div
              class="backBtn"
              v-if="questionData.position > 1"
              @click="backClick('question', questionData.position)"
            >
              <上一题
            </div>
            <div
              v-if="questionData.position != activityQuestionBankDTOList.length"
              class="nextBtn"
              @click="nextBtnClick(questionData.position)"
            >
              下一题>
            </div>
            <div
              class="nextSubmitBtnAll"
              v-if="questionData.position == activityQuestionBankDTOList.length"
              @click="submitBtnClick(questionData.position, 'question')"
            >
              提交
              <!-- <span class="nextSubmitBtn">提交</span> -->
              <!-- <div class="nextSubmitBtn">
                提交12
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="xzDivAll" v-else-if="currenPageItem == 'userMessage'">
        <div class="titleDivAll4">
          <div class="titlePromptDiv">你们的每一个回答对我们都有很大的帮助</div>
        </div>
        <div class="questionDivAll">
          <div class="userListDivAll" v-if="backType == 1">
            <div
              class="userItemDiv"
              v-for="(item, index) in activityInformationDTOList"
              :key="index"
            >
              <div class="titleDiv">
                <span>{{ index + 1 }}、</span>
                <span class="wjTypeDiv" v-if="item.questionType == 1"
                  >【单选】</span
                >
                <span class="wjTypeDiv" v-if="item.questionType == 2"
                  >【多选】</span
                >
                <span>{{ item.questionName }}</span>
              </div>

              <div class="questionDiv">
                <div v-if="item.questionType == 3">
                  <input
                    class="inputQuestionDiv"
                    maxlength="50"
                    onkeyup="javascript:if(event.keyCode == 32)event.returnValue = false;"
                    v-model.trim="item.inputQuestion"
                    @input="
                      SelectButtonClick1('userMessage', index, null, item)
                    "
                  />
                </div>

                <div v-else class="questionListDiv">
                  <div class="questionItemDiv">
                    <div
                      v-for="(items, index1) in item.qaAnswerList"
                      :key="index1"
                      @click="
                        SelectButtonClick1('userMessage', index, index1, items)
                      "
                    >
                      <div class="voteBox">
                        <div class="m-r-17">
                          <div
                            :class="
                              items.isChecked
                                ? 'voteSelectButtonChecked'
                                : 'voteSelectButton'
                            "
                          ></div>
                        </div>
                        <div class="questionNameDiv">
                          {{ items.answerName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="btnDivAll" @click="submitBtnClick(null, 'userMessage')">
              提交并领奖
            </div>
          </div>

          <div class="userListDivAll" v-else-if="backType == 2">
            <div
              class="userItemDiv"
              v-for="(item, index) in activityQuestionBankDTOList"
              :key="index"
            >
              <div class="titleDiv">
                <span>{{ index + 1 }}、</span>
                <span class="wjTypeDiv" v-if="item.questionType == 1"
                  >【单选】</span
                >
                <span class="wjTypeDiv" v-if="item.questionType == 2"
                  >【多选】</span
                >
                <span>{{ item.questionName }}</span>
              </div>

              <div class="questionDiv">
                <div v-if="item.questionType == 3">
                  <input
                    class="inputQuestionDiv"
                    maxlength="50"
                    onkeyup="javascript:if(event.keyCode == 32)event.returnValue = false;"
                    v-model.trim="item.inputQuestion"
                    @input="
                      SelectButtonClick1('userMessage1', index, null, item)
                    "
                  />
                </div>

                <div v-else class="questionListDiv">
                  <div class="questionItemDiv">
                    <div
                      v-for="(items, index1) in item.qaAnswerList"
                      :key="index1"
                      @click="
                        SelectButtonClick1('userMessage1', index, index1, items)
                      "
                    >
                      <div class="voteBox">
                        <div class="m-r-17">
                          <div
                            :class="
                              items.isChecked
                                ? 'voteSelectButtonChecked'
                                : 'voteSelectButton'
                            "
                          ></div>
                        </div>
                        <div class="questionNameDiv">
                          {{ items.answerName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button
              :disabled="isDisable"
              class="btnDivAll"
              @click="submitBtnClick(null, 'userMessage1')"
            >
              提交并领奖
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../util/apis1.js";
let { getQuestion, questionnaireAnswer } = apis1;
import {
  NoPrizeResultPopComService,
  PrizeResultPopComService
} from "../../util/hdzxtcomCreate.js";
import { AddBuyErrDialogService } from "../../util/comCreate.js";
import { checkQuestionAnswerInput } from '../../util/tools.js';
export default {
  name: "StartQuestion",
  data() {
    return {
      questionData: {}, //当前问题数据
      currenPageItem: "question", //question 答题 userMessage 用户信息搜集
      backType: 1, //1-调查问卷，2-预约问卷
      checkNow: [], // 选中列表数据
      questionType: 1,
      checkEndNow: [],
      checkNowanswerItemIdEnd: [],
      activityQuestionBankDTOList: [], //答题数据
      checkNowuser: [], // 用户信息搜集选中列表数据
      isDisable: false,
      //用户信息搜集数据
      activityInformationDTOList: [],
      doublePoint: true
    };
  },
  created() {
    this.styleData = this.$route.query.styleData;
    this.isTemplate = this.$route.query.isTemplate;
    this.initData();
  },
  methods: {
    initData() {
      getQuestion(callBackData => {
        console.log(callBackData, "答题数据");

        this.collectInfoFlag = callBackData.data.collectInfoFlag; //0不搜集  1收集
        this.backType = callBackData.data.bankType; //1-调查问卷，2-预约问卷
        this.activityQuestionBankDTOList =
          callBackData.data.activityQuestionBankDTOList;
        this.activityInformationDTOList =
          callBackData.data.activityInformationDTOList;
        // this.questionType = this.activityQuestionBankDTOList[0].questionType;
        this.questionData = this.activityQuestionBankDTOList[0];
        if (this.backType == 2) {
          this.currenPageItem = "userMessage";
        } else if (this.backType == 1) {
          this.currenPageItem = "question";
        }
        this.questionData.position = 1;
      });
    },
    //下一题
    nextBtnClick(position) {
      console.log(position,"po")
      //判断是否选择题目
      console.log(this.checkEndNow, "下一题");
      console.log(this.questionData, "下一题2222");
      if(this.questionData.questionType == 2 && this.questionData.maxAnswerCount){
        let isCheckedNum = 0
        this.questionData.qaAnswerList.map(item=>{
          if(item.isChecked){
            isCheckedNum ++
          }
        })
        console.log(isCheckedNum,"isCheckedNum")
        if(isCheckedNum > this.questionData.maxAnswerCount){
          this.$toast("至多选择"+ this.questionData.maxAnswerCount +"项");
          return;
        }
        if(isCheckedNum < 2){
          this.$toast("至少选择2项");
          return;
        }
      }
      let checkCount = 0;
      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == this.questionData.questionId) {
          checkCount = checkCount + 1;
        }
        if (this.questionData.questionType == 3) {
          if (this.checkEndNow[position - 1]) {
            if (this.checkEndNow[position - 1].answerIdList[0].length < 1) {
              this.$toast("至少输入1个字");
              return;
            }
          }
        }
        //多选必须至少选择两个答案
        // if (this.questionData.questionType == 2) {
        //   console.log(this.checkEndNow[position - 1], 'zcxczxc');
        //   if (this.checkEndNow[position - 1]) {
        //     if (this.checkEndNow[position - 1].answerIdList.length < 2) {
        //       this.$toast('多选题必须选择2个及2个以上的选项');
        //       return;
        //     }
        //   }
        // }
      }
      console.log(checkCount,"checkCount")
      if (checkCount == 0 && this.questionData.questionType == 1) {
        this.$toast("请给出答案");
        return;
      }
      if(checkCount > 0 && this.questionData.inputQuestion){
        if (!checkQuestionAnswerInput(this.questionData.inputQuestion)) {
          this.$toast('回答内容不可包含表情等特殊字符');
          return;
        }
      }
    
      this.checkNowanswerItemIdEnd = [];
      let aa = this.activityQuestionBankDTOList[position];
      // if (aa.questionType  == 3) {
      //   //填空题if()
      //   aa.inputQuestion = null;
      // }
      aa.position = position + 1;
      this.questionData = aa;

      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == this.questionData.questionId) {
          this.checkNowanswerItemIdEnd = this.checkEndNow[i].answerIdList;
        }
      }
    },
    //上一步
    backClick(currenPageItem, position) {
      let aa = this.activityQuestionBankDTOList[position - 2];
      // if (aa.questionType == 3) {
      //   //填空题
      //   aa.inputQuestion = null;
      // }
      aa.position = position - 1;
      this.questionData = aa;
      this.checkNowanswerItemIdEnd = []
      this.questionData.qaAnswerList.map(item=>{
        if(item.isChecked){
          this.checkNowanswerItemIdEnd.push(item.answerId)
        }
      })
    },
    //提交
    submitBtnClick(position, currenPageItem) {
      console.log(this.checkEndNow, "提交");
      console.log(position, "提交position");
      if(this.questionData.questionType == 2 && this.questionData.maxAnswerCount){
        let isCheckedNum = 0
        this.questionData.qaAnswerList.map(item=>{
          if(item.isChecked){
            isCheckedNum ++
          }
        })
        console.log(isCheckedNum,"isCheckedNum")
        if(isCheckedNum > this.questionData.maxAnswerCount){
          this.$toast("至多选择"+ this.questionData.maxAnswerCount +"项");
          return;
        }
        if(isCheckedNum < 2){
          this.$toast("至少选择2项");
          return;
        }
      }
      
      if (currenPageItem == "question") {
        //判断是否选择题目
        let checkCount = 0;
        for (var i = 0; i < this.checkEndNow.length; i++) {
          if (this.checkEndNow[i].questionId == this.questionData.questionId) {
            checkCount = checkCount + 1;
          }
          if (this.questionData.questionType == 3) {
            if (this.checkEndNow[position - 1]) {
              if (this.checkEndNow[position - 1].answerIdList[0].length < 1) {
                this.$toast("至少输入1个字");
                return;
              }
            }
          }
          //多选必须至少选择两个答案
          // if (this.questionData.questionType == 2) {
          //   if (this.checkEndNow[position - 1]) {
          //     if (this.checkEndNow[position - 1].answerIdList.length < 2) {
          //       this.$toast('多选题必须选择2个及2个以上的选项');
          //       return;
          //     }
          //   }
          // }
        }
        if (checkCount == 0) {
          this.$toast("请给出答案");
          return;
        }
        if(checkCount > 0 && this.questionData.inputQuestion){
          if (!checkQuestionAnswerInput(this.questionData.inputQuestion)) {
            this.$toast('回答内容不可包含表情等特殊字符');
            return;
          }
        }
        if (this.collectInfoFlag == 0) {
          //不搜集直接调用接口
          this.questionnaireAnswer1();
        } else {
          //搜集显示用户信息搜集问题列表
          this.currenPageItem = "userMessage";
        }
      } else if (currenPageItem == "userMessage") {
        let checkCount = 0;
        for (var i = 0; i < this.checkEndNow.length; i++) {
          for (var j = 0; j < this.activityInformationDTOList.length; j++) {
            if (
              this.checkEndNow[i].questionId ==
              this.activityInformationDTOList[j].questionId
            ) {
              checkCount = checkCount + 1;
            }
            if (this.activityInformationDTOList[j].questionType == 2) {
              //多选 必须选择2个及2个以上的选项
              // if (this.checkEndNow[i].questionId == this.activityInformationDTOList[j].questionId) {
              //   if (this.checkEndNow[i].answerIdList.length < 2) {
              //     this.$toast('多选题必须选择2个及2个以上的选项');
              //     return;
              //   }
              // }
            }
          }
          for (var j = 0; j < this.activityQuestionBankDTOList.length; j++) {
            if (
              this.checkEndNow[i].questionId ==
              this.activityQuestionBankDTOList[j].questionId
            ) {
              checkCount = checkCount + 1;
            }
            if (this.activityQuestionBankDTOList[j].questionType == 2) {
              //多选 必须选择2个及2个以上的选项
              // if (this.checkEndNow[i].questionId == this.activityQuestionBankDTOList[j].questionId) {
              //   if (this.checkEndNow[i].answerIdList.length < 2) {
              //     this.$toast('多选题必须选择2个及2个以上的选项');
              //     return;
              //   }
              // }
            }
          }
        }

        if (
          checkCount !=
          this.activityInformationDTOList.length +
            this.activityQuestionBankDTOList.length
        ) {
          this.$toast("请给出答案");
          return;
        }

        this.questionnaireAnswer1();
      } else if (currenPageItem == "userMessage1") {
        //预约调查问卷中没有用户信息搜集
        let checkCount = 0;
        for (var i = 0; i < this.checkEndNow.length; i++) {
          for (var j = 0; j < this.activityQuestionBankDTOList.length; j++) {
            if (
              this.checkEndNow[i].questionId ==
              this.activityQuestionBankDTOList[j].questionId
            ) {
              checkCount = checkCount + 1;
            }
            if (this.activityQuestionBankDTOList[j].questionType == 2) {
              //多选 必须选择2个及2个以上的选项
              if (
                this.checkEndNow[i].questionId ==
                this.activityQuestionBankDTOList[j].questionId
              ) {
                if (this.checkEndNow[i].answerIdList.length < 2) {
                  this.$toast("多选题必须选择2个及2个以上的选项");
                  return;
                }
              }
            }
          }
        }
        if (checkCount != this.activityQuestionBankDTOList.length) {
          this.$toast("请给出答案");
          return;
        }

        this.questionnaireAnswer1();
      }
    },
    questionnaireAnswer1() {
      this.isDisable = true;
      this.activityQuestionBankDTOList.forEach(ele => {
        this.checkEndNow.forEach(item => {
          if (item.questionId == ele.questionId) {
            item.questionType = ele.questionType;
            item.answerType = 1;
          }
        });
      });
      if (
        this.activityInformationDTOList &&
        this.activityInformationDTOList.length > 0
      ) {
        this.activityInformationDTOList.forEach(ele => {
          this.checkEndNow.forEach(item => {
            if (item.questionId == ele.questionId) {
              item.questionType = ele.questionType;
              item.answerType = 2;
            }
          });
        });
      }
      console.log(this.checkEndNow,"this.checkEndNow")
      if (this.doublePoint) {
        this.doublePoint = false;
        questionnaireAnswer(this.checkEndNow, callBackData => {
          this.doublePoint = true;
          if (callBackData.data.result == true) {
            var obj = {
              datas: {},
              keyData: {
                prizeUrl: "showImg",
                prizeName: "prizeName",
                prizeType: "prizeType",
                priceInfo: "priceInfo",
                discountType: "discountType",
                couponType: "couponType"
              }
            };
            obj.datas = callBackData.data;
            sessionStorage.setItem("startQuestion", true); //缓存中奖弹框的页面，在关闭地址弹框的时候重新加载活动
            PrizeResultPopComService.create(
              obj,
              callBackData.data,
              this.styleData,
              submit => {
                PrizeResultPopComService.close();
                // sessionStorage.removeItem('startQuestion');
                if (!submit) {
                  sessionStorage.removeItem("startQuestion");
                  location.href = sessionStorage.getItem("activityUrl");
                }
                // this.$router.go(-1);
                // window.history.go(-1)
              }
            );
          } else {
            if (callBackData.data.status == 3) {
              this.isDisable = true;
              this.$toast("已提交答案了");
              sessionStorage.removeItem("startQuestion");
              location.href = sessionStorage.getItem("activityUrl");
            } else if (callBackData.data.status == 4) {
              this.isDisable = true;
              this.$toast("活动未开始");
              sessionStorage.removeItem("startQuestion");
              location.href = sessionStorage.getItem("activityUrl");
            } else if (callBackData.data.status == 5) {
              this.isDisable = true;
              this.$toast("活动已结束");
              sessionStorage.removeItem("startQuestion");
              location.href = sessionStorage.getItem("activityUrl");
            } else {
              this.isDisable = false;
              // NoPrizeResultPopComService.create(this.styleData, submit => {
              //   NoPrizeResultPopComService.close();
              //   this.publicData.$emit(
              //     "isNotyFiceWinnerReorrd",
              //     true,
              //     this.isTemplate
              //   );

              //   if (!submit) {
              //     sessionStorage.removeItem("startQuestion");
              //     location.href = sessionStorage.getItem("activityUrl");
              //   }
              // });
              AddBuyErrDialogService.create({}, callBackData.data, submit => {
                AddBuyErrDialogService.close();
                this.publicData.$emit(
                  "isNotyFiceWinnerReorrd",
                  true,
                  this.isTemplate
                );
                if (!submit) {
                  sessionStorage.removeItem("startQuestion");
                  location.href = sessionStorage.getItem("activityUrl");
                }
              });
            }
          }
        });
      }
    },
    //点击选择题
    SelectButtonClick(questionType, index, item) {
      let questionIdCount = 0;
      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == this.questionData.questionId) {
          questionIdCount = questionIdCount + 1;
        }
      }
      if (questionIdCount == 0) {
        let row = {
          questionId: this.questionData.questionId
        };
        this.checkEndNow = this.checkEndNow.concat(row);
      }
      // 判断单选还是多选
      if (this.questionData.questionType == 1) {
        //单选
        this.checkNowanswerItemIdEnd = [];
        if (this.checkNow && this.checkNow.length > 0) {
          if (this.checkNow[0] != item) {
            this.checkNow = [];
            this.checkNow[0] = item;
            this.questionData.qaAnswerList.forEach(ele => {
              if (ele.answerId === item.answerId) {
                ele.isChecked = true;
                let aaIndex = this.checkNowanswerItemIdEnd.indexOf(
                  item.answerId
                );
                if (aaIndex == -1) {
                  this.checkNowanswerItemIdEnd.push(item.answerId);
                }
              } else {
                ele.isChecked = false;
              }
            });
            let answerIndex = this.questionData.position - 1;
            this.checkEndNow[
              answerIndex
            ].answerIdList = this.checkNowanswerItemIdEnd;
          } else {
            this.minusList(index, item);
          }
        } else {
          this.addList(index, item);
        }
        this.$forceUpdate();
      } else if (this.questionData.questionType == 2) {
        //多选
        if (this.checkNow.includes(item)) {
          this.minusList(index, item);
        } else {
          this.addList(index, item);
        }
        this.$forceUpdate();
      } else if (this.questionData.questionType == 3) {
        //填空
        this.checkNowanswerItemIdEnd = [];
        this.checkNowanswerItemIdEnd[0] = this.questionData.inputQuestion;
        let answerIndex = this.questionData.position - 1;
        this.checkEndNow[
          answerIndex
        ].answerIdList = this.checkNowanswerItemIdEnd;
        if (!this.questionData.inputQuestion) {
          this.checkEndNow.splice(answerIndex, 1);
        }

        this.$forceUpdate();
      }
    },
    // 添加选中
    addList(index, list) {
      console.log(list.answerId, "list.answerId");

      this.checkNow = this.checkNow.concat(list);
      this.questionData.qaAnswerList.forEach(item => {
        if (item.answerId === list.answerId) {
          item.isChecked = true;
          let aaIndex = this.checkNowanswerItemIdEnd.indexOf(item.answerId);
          if (aaIndex == -1) {
            this.checkNowanswerItemIdEnd.push(item.answerId);
          }
        }
        if (list.questionType == 1) {
          if (item.answerId === list.answerId) {
            item.isChecked = true;
          } else {
            item.isChecked = false;
          }
        }
      });
      let answerIndex = this.questionData.position - 1;
      this.checkEndNow[answerIndex].answerIdList = this.checkNowanswerItemIdEnd;
      this.$forceUpdate();
    },

    // 减去选中
    minusList(index, list) {
      console.log(this.questionData.position, "减去选中");
      console.log(this.checkNowanswerItemIdEnd, "减去选中lyssss");

      this.checkNow = this.checkNow.filter(item => item != list);
      this.questionData.qaAnswerList.forEach(item => {
        if (item.answerId === list.answerId) {
          item.isChecked = false;
          let aaIndex = this.checkNowanswerItemIdEnd.indexOf(item.answerId);
          if (aaIndex != -1) {
            this.checkNowanswerItemIdEnd.splice(aaIndex, 1);
          }
        }
      });
      console.log(this.checkEndNow, "减去选中111");

      let answerIndex = this.questionData.position - 1;
      this.checkEndNow[answerIndex].answerIdList = this.checkNowanswerItemIdEnd;
      if (this.checkNowanswerItemIdEnd.length == 0) {
        this.checkEndNow.splice(answerIndex, 1);
      }
      this.$forceUpdate();
    },

    //用户信息搜集
    SelectButtonClick1(pageType, index, index1, item) {
      let questionIdCount = 0;
      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == item.questionId) {
          questionIdCount = questionIdCount + 1;
        }
      }
      if (questionIdCount == 0) {
        let row = {
          questionId: item.questionId,
          answerIdList: []
        };
        this.checkEndNow = this.checkEndNow.concat(row);
      }
      var listDataAll = "";
      if (pageType == "userMessage") {
        listDataAll = this.activityInformationDTOList;
      } else if (pageType == "userMessage1") {
        listDataAll = this.activityQuestionBankDTOList;
      }

      // 判断单选还是多选
      if (listDataAll[index].questionType == 1) {
        //单选
        this.checkNowanswerItemIdEnd = [];
        if (this.checkNowuser && this.checkNowuser.length > 0) {
          if (this.checkNowuser[0] != item) {
            this.checkNowuser = [];
            this.checkNowuser[0] = item;
            listDataAll[index].qaAnswerList.forEach(ele => {
              if (ele.answerId === item.answerId) {
                ele.isChecked = true;
                let aaIndex = this.checkNowanswerItemIdEnd.indexOf(
                  item.answerId
                );
                if (aaIndex == -1) {
                  this.checkNowanswerItemIdEnd.push(item.answerId);
                }
              } else {
                ele.isChecked = false;
              }
            });
            let vv = JSON.parse(JSON.stringify(this.checkEndNow));
            let answerIndex = vv.length - 1;
            this.checkEndNow[
              answerIndex
            ].answerIdList = this.checkNowanswerItemIdEnd;
          } else {
            this.minusList1(pageType, index, item);
          }
        } else {
          this.addList1(pageType, index, item);
        }
        this.$forceUpdate();
      } else if (listDataAll[index].questionType == 2) {
        //多选

        if (this.checkNowuser.includes(item)) {
          this.minusList1(pageType, index, item);
        } else {
          this.addList1(pageType, index, item);
        }
        this.$forceUpdate();
      } else if (listDataAll[index].questionType == 3) {
        //填空
        this.checkNowanswerItemIdEnd = [];
        this.checkNowanswerItemIdEnd[0] = item.inputQuestion;
        let vv = JSON.parse(JSON.stringify(this.checkEndNow));
        let answerIndex = vv.length - 1;
        this.checkEndNow[
          answerIndex
        ].answerIdList = this.checkNowanswerItemIdEnd;

        if (!item.inputQuestion) {
          this.checkEndNow.splice(answerIndex, 1);
        }

        this.$forceUpdate();
      }
    },

    // 用户信息搜集添加选中
    addList1(pageType, index, list) {
      var listDataAll = "";
      if (pageType == "userMessage") {
        listDataAll = this.activityInformationDTOList;
      } else if (pageType == "userMessage1") {
        listDataAll = this.activityQuestionBankDTOList;
      }
      this.checkNowuser = this.checkNowuser.concat(list);
      listDataAll[index].qaAnswerList.forEach(item => {
        if (item.answerId === list.answerId) {
          item.isChecked = true;
        }
        if (list.questionType == 1) {
          if (item.answerId === list.answerId) {
            item.isChecked = true;
          } else {
            item.isChecked = false;
          }
        }
      });
      this.checkNowanswerItemIdEnd = [];
      let ff = listDataAll[index].qaAnswerList;
      for (var a = 0; a < ff.length; a++) {
        if (ff[a].isChecked) {
          this.checkNowanswerItemIdEnd.push(ff[a].answerId);
        }
      }

      var vv = JSON.parse(JSON.stringify(this.checkEndNow));
      var answerIndex = vv.length - 1;

      //先判断checkEndNow是否有questionId,有的话修改，没有的话新增
      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == listDataAll[index].questionId) {
          answerIndex = i;
        }
      }

      this.checkEndNow[answerIndex].answerIdList = this.checkNowanswerItemIdEnd; //this.checkNowanswerItemIdEnd;

      this.$forceUpdate();
    },

    // 减去选中
    minusList1(pageType, index, list) {
      var listDataAll = "";
      if (pageType == "userMessage") {
        listDataAll = this.activityInformationDTOList;
      } else if (pageType == "userMessage1") {
        listDataAll = this.activityQuestionBankDTOList;
      }
      this.checkNowuser = this.checkNowuser.filter(item => item != list);
      listDataAll[index].qaAnswerList.forEach(item => {
        if (item.answerId === list.answerId) {
          item.isChecked = false;
          let aaIndex = this.checkNowanswerItemIdEnd.indexOf(item.answerId);
          if (aaIndex != -1) {
            this.checkNowanswerItemIdEnd.splice(aaIndex, 1);
          }
        }
      });
      // let answerIndex = index;
      var vv = JSON.parse(JSON.stringify(this.checkEndNow));
      var answerIndex = vv.length - 1;
      //先判断checkEndNow是否有questionId,有的话修改，没有的话新增
      for (var i = 0; i < this.checkEndNow.length; i++) {
        if (this.checkEndNow[i].questionId == listDataAll[index].questionId) {
          answerIndex = i;
        }
      }
      this.checkEndNow[answerIndex].answerIdList = this.checkNowanswerItemIdEnd;
      //判断checkNowanswerItemIdEnd是否为空，如果是空的话将checkEndNow对应的对应删除
      if (this.checkNowanswerItemIdEnd.length == 0) {
        this.checkEndNow.splice(answerIndex, 1);
      }

      this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss">
.startQuestionPageDiv {
  background: #b8d9ed;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  background-size: 100%;
  padding-bottom: 0.3rem;
  padding-top: 0.56rem;
  .xzDivAll {
    width: 6.44rem;
    // height: 1.43rem;
    background: linear-gradient(91deg, #0350fc 0%, #1a91ff 100%);
    border-radius: 0.24rem;
    margin-left: calc(50% - 6.44rem / 2);
    .titleDivAll {
      display: flex;
      justify-content: space-between;
      height: 1rem;
      align-items: center;
      padding: 0 0.31rem;
      .questionIndexDiv {
        font-size: 0.36rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f2f8fd;
      }
      .titlePromptDiv {
        font-size: 0.2rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f2f8fd;
      }
    }
    .titleDivAll4 {
      display: flex;
      align-items: center;
      height: 1rem;
      align-items: center;
      padding: 0 0.31rem;
      justify-content: center;
      .titlePromptDiv {
        font-size: 0.2rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f2f8fd;
      }
    }
    .userListDivAll {
      display: flex;
      flex-direction: column;
      text-align: left;
      .userItemDiv {
        .titleDiv {
          font-size: 0.24rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          .wjTypeDiv {
            color: #ff0101;
            font-size: 0.24rem;
          }
        }
        .questionDiv {
          .inputQuestionDiv {
            margin: 0.33rem 0;
            width: 5.2rem;
            height: 0.62rem;
            background: #f2f8fd;
            border: 1px solid #606060;
            border-radius: 0.05rem;
            color: #676767;
            font-size: 0.24rem;
            padding: 0rem 0.3rem;
          }
        }
      }
      .btnDivAll {
        margin-top: 0.47rem;
        width: 5.11rem;
        height: 0.9rem;
        background: #1a44ed;
        border-radius: 0.45rem;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: calc(50% - 5.11rem / 2);
      }
    }

    .questionDivAll {
      width: 6.44rem;
      background: #f2f8fd;
      border-radius: 0.24rem;
      padding: 0.4rem 0.25rem 0.59rem 0.31rem;
      .questionTitleDiv {
        color: #0452fc;
        font-size: 0.24rem;
        padding-bottom: 0.42rem;
        border-bottom: 0.02rem solid #0452fc;
        text-align: left;
        .wjTypeDiv {
          color: #ff0101;
        }
      }
      .questionItemDiv {
        .voteBox {
          margin: 0.05rem 0 0.2rem;
          min-height: 0.78rem;
          // padding: 0.26rem 0;
          position: relative;
          font-size: 0.22rem;
          color: #333333;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          // border-bottom: 0.01rem solid #999999;
        }
        .voteSelectButton {
          background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/74518/39/21435/906/63298ee7E4714df55/7e74f63aaffcc159.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 0.31rem;
          height: 0.31rem;
        }
        .voteSelectButtonChecked {
          background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/48222/1/20516/2105/63298f35Efd211ca9/872284476e61483c.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 0.31rem;
          height: 0.31rem;
        }
        .questionNameDiv {
          flex: 1;
          text-align: left;
          margin-left: 0.1rem;
          border-bottom: 0.01rem solid #999999;
          padding: 0.26rem 0;
          word-break: break-all;
        }
      }
      .textarea {
        width: 5.2rem;
        height: 2.95rem;
        border: 0.02rem solid #999999;
        border-radius: 0.05rem;
        margin-top: 0.38rem;

        color: #676767;
        font-size: 0.24rem;
        padding: 0.3rem 0.3rem;
      }
      textarea::-webkit-input-placeholder {
        -webkit-text-fill-color: #676767;
        font-size: 0.24rem;
      }
      textarea::-moz-input-placeholder {
        -webkit-text-fill-color: #676767;
        font-size: 0.24rem;
      }
      textarea::-ms-input-placeholder {
        -webkit-text-fill-color: #676767;
        font-size: 0.24rem;
      }
      .buttonDivAll1 {
        margin-top: 0.58rem !important;
      }
      .buttonDivAll {
        // display: flex;
        // justify-content: space-between;
        overflow: hidden;
        align-items: center;
        width: 100%;
        margin-top: 1.98rem;
        .backBtn {
          font-size: 0.3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1a44ed;
          text-align: left;
          // width: inherit;
          float: left;
        }
        .nextSubmitBtnAll {
          // display: flex;
          // justify-content: end;
          // text-align: right;
          // width: 100%;
          // height: 0.76rem;
          font-size: 0.3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1a44ed;
          // text-align: end;
          width: inherit;
          float: right;
          display: inline-block;

          width: 2.02rem;
          height: 0.76rem;
          background: #1a44ed;
          border-radius: 0.38rem;
          color: #ffffff;
          line-height: 0.76rem;
        }
        .nextSubmitBtn {
          width: 2.02rem;
          height: 0.76rem;
          background: #1a44ed;
          border-radius: 0.38rem;
          color: #ffffff;
          padding: 0.2rem 0.66rem;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          // text-align: end;
        }
        .nextBtn {
          font-size: 0.3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1a44ed;
          text-align: end;
          // width: inherit;
          float: right;
        }
      }
    }
  }
}
</style>
