<template>
  <div class="main casemain" :class="{on: step == pageIndex }" :id="'pagemain'+pageIndex" v-show="step == pageIndex" :style="{height:step == pageIndex?'auto':'0px'}" >
    <img src="../assets/bg.png" alt="" class="bg" />
    {{'当前：'+step}}{{'页码：'+pageIndex}}
    <div class="dealbox" style="position: relative;z-index:1;background:transparent;">
      <div class="prev" @click="switchPage(pageIndex - 1)">上一步</div>
    </div>
    <div class="content" >
      <div class="pagebox" v-show="step == pageIndex">
        <div class="page">
          <!-- <div class="card" v-html="pageItem.content"></div> -->
          <div
            class="card"
            v-for="(item, index) in pageItem.case_item_model"
            :key="index"
          >
            <div class="titlebox">
              <img src="../assets/titlebg.png" alt="" />
              <div class="title">{{ item.model_name }}</div>
            </div>
            <div class="descbox">
              <div class="namebox" v-html="item.content"></div>
              <!-- <div class="namebox" >
                               <div class="row">
                                    <div class="left"> ·姓别：</div>
                                    <div class="right">
                                        杨**</div>
                                </div>
                                <div class="row">
                                    <div class="left"> ·姓别：</div>
                                    <div class="right">
                                        症状:自诉1月前因长期熬夜出现软困、乏力，无腹痛，无恶心、呕吐、纳差、胸闷、胸痛、无尿频、尿痛、尿黄，无发热，无胸闷、气紧，无胸痛、心悸，无呼吸困难，无皮肤黄染及皮下出血等。病后饮食稍差，睡眠尚可，精神尚可，大小便正常。，

                                    </div>
                                </div> 
                            </div>-->
            </div>
          </div>
        </div>
        <question
          v-for="(item, index) in pageItem.case_item_question"
          :key="'case' + pageIndex + 'qestion' + item.question_id"
          :question="item"
          @checkAnswer="checkAnswer"
          :pageIndex="pageIndex"
          :questionIndex="index"
          v-if="pageItem.case_item_question"
        ></question>
      </div>
    </div>
    <div class="dealbox" >
      <div class="next" @click="switchPage(pageIndex - 1)">上一步</div>
      <div class="prev" @click="goNext(pageIndex + 1)">下一步</div>
    </div>
    <back></back>
    <c-dialog
      :message="dialog_message"
      ref="cdialog"
      :showCancel="false"
    ></c-dialog>
    <van-image-preview teleport="body"  :overlay-style="{zIndex:10}" ref="ImagePreview"  v-model:show="showImg" closeable :images="imgList" @change="onChange">
 
     </van-image-preview>
  </div>
 

</template>
<script setup>
import { ref, reactive } from "vue";
import api from "../api/user.js";
import dayjs from "dayjs";
//import { showImagePreview } from 'vant';
const case_id = ref(null);
const imgList = ref([]);
const position = ref(0);
const showImg = ref(false);
const ImagePreview = ref(null);
const props = defineProps({
  pageIndex: {
    type: Number,
    default: 0,
  },
  case_id: {
    type: String,
    default: "",
  },
  step: {
    type: Number,
    default: 0,
  },
  pageNum: {
    type: Number,
    default: 0,
  },
  start_time: {
    type: String,
    default:'',
  },
  pageItem: {
    type: Object,
    default: () => ({}),
  },
});
const unitAnswer = {
  pageIndex: null,
  answer: [],
};
const cdialog = ref(null);
const dialog_message = ref("");

watch(
  () => props.pageItem,
  (newVal) => {
    if (newVal.case_item_question && newVal.case_item_question.length > 0) {
      for (let i = 0; i < newVal.case_item_question.length; i++) {
          unitAnswer.answer[i] = "";
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
const emit = defineEmits(["switchPage", "getAllAnswer"]);
const switchPage = (index) => {
  emit("switchPage", index);
};
const behaviorRecord = (step = "", start_time = "", end_time = "") => {
  api
    .behaviorRecord({
      case_id: props.case_id,
      step: step,
      start_time: start_time,
      end_time: end_time,
    })
    .then((res) => {});
};

const checkAnswer = (data) => {
  //
  unitAnswer.pageIndex = data.pageIndex;
  unitAnswer.answer[data.questionIndex] = {
    answer: data.answer,
    question_type: data.question_type,
    question_id: data.questionId,
    question_name: data.question_name,
    question_answer: data.question_answer,
    option_id: data.option_id,
    error_tips: data.error_tips,
    is_right_next: data.is_right_next,
  };
  // console.log(unitAnswer);
  // allAnswer[data.pageIndex]=unitAnswer.answer;
  // console.log(allAnswer);
};
const fomatObj = (obj) => {
  let str = "";
  for (let key in obj) {
    if (str) {
      str += `${obj[key]}`;
    } else {
      str = `${obj[key]}`;
    }
  }
  return str;
};
const passNext = () => {
  let answer = unitAnswer.answer;
  console.log(answer);
  let answerForamt = answer.map((item) => {
    if (item.question_type == 2) {
      return {
        answer: fomatObj(item.answer),
        question_type: item.question_type,
        question_id: item.question_id,
        question_name: item.question_name,
        question_answer: item.question_answer,
        option_id: item.option_id,
        error_tips: item.error_tips,
        is_right_next: item.is_right_next,
      };
    } else {
      return { ...item };
    }
  });
  console.log(answerForamt);
  if (answerForamt.length == 0 && props.pageItem.case_item_question) {
    dialog_message.value = "请回答本页所有问题后再提交";
    cdialog.value.openDialog();
    //showToast('请回答本页所有问题后再提交')
    return false;
  }
  for (let i = 0; i < answerForamt.length; i++) {
    if (!answerForamt[i].answer) {
      dialog_message.value = "请回答本页第" + (i + 1) + "个问题后再提交";
      cdialog.value.openDialog();
      //showToast('请回答本页第'+(i+1)+'个问题后再提交')
      return false;
    }

    if (answerForamt[i].question_type == 2) {
      if (answerForamt[i].answer.length < 2) {
        dialog_message.value = answerForamt[i].question_name + "至少选择两项";
        cdialog.value.openDialog();
        //showToast('本页第'+(i+1)+'个问题是多选')
        return false;
      }
    }
    if (
      answerForamt[i].answer !== answerForamt[i].question_answer &&
      answerForamt[i].is_right_next == 1 &&
      answerForamt[i].question_type != 3
    ) {
      //dialog_message.value=props.pageItem.error_tips;
      dialog_message.value = answerForamt[i].error_tips;
      cdialog.value.openDialog();
      return false;
    }
  }
  // alert(unitAnswer.pageIndex);
  // allAnswer[unitAnswer.pageIndex]=answerForamt;
  // console.log('allAnswer');
  // console.log(allAnswer);
  emit("getAllAnswer", {
    pageIndex: unitAnswer.pageIndex,
    answer: answerForamt,
  });
  return true;
};
const reportQuestion = (start, end) => {
  let answer = unitAnswer.answer;
  for (let i = 0; i < answer.length; i++) {
    behaviorRecord(answer[i].question_name, start, end);
  }
};
const goNext = (index) => {
  if (passNext()) {
    if (index < props.pageNum) {
      let nextPageTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
      localStorage.setItem("entryPage" + index, nextPageTime);
      if (index == 1) {
        let start = dayjs(props.start_time).format("YYYY-MM-DD HH:mm:ss");
        behaviorRecord("第2页", start, nextPageTime);
        reportQuestion(start, nextPageTime);
      } else {
        let prevPageTime = localStorage.getItem("entryPage" + (index - 1));
        behaviorRecord(`第${index + 2}页`, prevPageTime, nextPageTime);
        reportQuestion(prevPageTime, nextPageTime);
      }

      emit("switchPage", index);
    } else {
      let nextPageTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
      localStorage.setItem("entryPage" + index, nextPageTime);
      localStorage.setItem("lastPage", nextPageTime);
      if (index == 1 && props.pageNum == 1) {
        let start = dayjs(props.start_time).format("YYYY-MM-DD HH:mm:ss");
        behaviorRecord("第2页", start, nextPageTime);
        reportQuestion(start, nextPageTime);
      } else {
        let prevPageTime = localStorage.getItem("entryPage" + (index - 1));
        behaviorRecord(`第${index + 2}页`, prevPageTime, nextPageTime);
        reportQuestion(prevPageTime, nextPageTime);
      }
      emit("switchPage", index);
    }
  }
};
const showPreview=(index)=> {
     //if(showImg.value)return;
     showImg.value=true;
     position.value=index;
    setTimeout(()=>{
        ImagePreview.value.swipeTo(index)
     })
    };
const handleClick = (e) => {
    let src=e.target.currentSrc;
    let index =imgList.value.findIndex((item)=>{
        if(item==src) return true;
    });
   
    showPreview(index)
  
};
onMounted(async () => {
   let imgArr = [];
  await nextTick(() => {
    const nodeList = document.querySelectorAll("#pagemain"+props.pageIndex+" .namebox img");
    console.log(nodeList);
    nodeList.forEach(function (node) {
      imgArr.push(node.src);
        node.removeEventListener("click",(e)=>{
            handleClick(e)
        });
        node.addEventListener("click", (e)=>{
            handleClick(e)
        });
    });
    imgList.value = [...new Set(imgArr)]; 
  });
});
const onChange=(newIndex)=>{
  position.value = newIndex || 0
}
</script>

<style lang='scss' scoped>
.casemain.on{
  opacity: 1;
  display: block;
  position: relative;
  z-index:1;
  height:auto;
  min-height: 100vh;
}
.casemain{
  position: relative;
  z-index:-1000;
  height:0px;
  display: none;
  opacity: 0;
}
.main {

  margin-bottom: 15px;
  width: 100%;
  position: relative;
  background: #fff;
  overflow: hidden;
  .dealbox {
    background: #fff;
    margin: 12px 15px 10px;
  
     position: relative;
     z-index:1;
    display: flex;
    justify-content: space-between;
  }
  .prev,
  .next {
    width: 73px;
    font-size: 14px;
    color: #43c9c3;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #43c9c3;
  }

  .count {
    :deep() .van-count-down {
      color: #fff;
    }

    right: 15px;
    top: 18px;
    z-index: 9;
    display: flex;
    align-items: center;
    position: absolute;
    height: 31px;
    padding: 0 8px;
    background: #43c9c3;
    border-radius: 8px;
  }

  .bg {
    width: 100%;
    position: absolute;
    z-index: 0;
  }

  .content {
    margin: 20px 15px;
    position: relative;

    .page {
      background: #fff;

      min-height: 100px;
      margin-bottom: 20px;
      border-radius: 10px;
      border: 1px solid #43c9c3;
    }
  }
}

.card {
  padding: 15px;
  :deep() img {
    width: 100%;
  }

  .descbox {
    margin-top: 13px;
    background: #f6feff;
    border-radius: 8px;
    padding: 12px 10px;
  }

  .titlebox {
    display: flex;
    width: 100%;
    align-items: center;

    .title {
      font-size: 18px;
      color: #000000;
      font-weight: bold;
    }

    img {
      width: 16px;
      height: 14px;
    }
  }
}

.namebox {
  .row {
    display: flex;
    align-items: first baseline;
    margin-bottom: 5px;

    .left {
      font-weight: 500;
      font-size: 16px;
      color: #43c9c3;
      flex-shrink: 0;
    }

    .right {
      font-size: 16px;
      color: #333333;
      line-height: 23px;
    }
  }
}
</style>
