<template>
    <div class="main" :id="'resultmain'+pageIndex" >
        <!-- <img src="../assets/bg.png" alt="" class="bg">
        <div class="dealbox">
            <div class="prev" @click="switchPage(pageIndex-1)">上一步</div>
        </div> -->
        <div class="content">

            <div class="pagebox">
                <div class="page">
                    <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>
                    </div> 
                    <!-- <div class="card" v-html="pageItem.content"></div> -->
                    <!-- <div class="card">
                        <div class="titlebox">
                            <img src="../assets/titlebg.png" alt="">
                            <div class="title">基础信息 </div>
                        </div>
                        <div class="descbox">
                            <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>
                <questionend 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"></questionend>
            </div>

        </div>
        <!-- <div class="dealbox">
            <div class="next" @click="switchPage(pageIndex-1)">上一步</div>
            <div class="prev" @click="goNext(pageIndex+1)"  >下一步</div>
        </div> -->
        <!-- <back></back> -->
    </div>
    <van-image-preview ref="ImagePreview"  v-model:show="showImg" closeable :images="imgList" @change="onChange">
 
   </van-image-preview>
</template>

<script setup>
import { ref } from "vue";
//import { showImagePreview } from 'vant';
//const isResult=ref(route.path.includes('result')?true:false);
const props=defineProps({
      pageIndex: {
        type: Number,
        default:0
    },
    imgList:{
        type: Array,
        default: () => []
    },
    step:{
        type: Number,
        default:0
    },
    pageNum: {
        type: Number,
        default: 0
    },
    pageItem: {
        type: Object,
        default: () => ({})
    }
});


const unitAnswer=reactive({
    pageIndex:null,
    answer:[],
});
const showImg = ref(false);
const position = ref(0);
const ImagePreview = ref(null);
watch(()=>props.pageItem,(newVal)=>{
    if(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','changeImg']);
const switchPage=(index)=>{
    emit('switchPage',index)
}

const checkAnswer=(data)=>{
    console.log(data);
    unitAnswer.pageIndex=data.questionIndex;
    unitAnswer.answer[data.questionIndex]={answer:data.answer,questin_type:data.question_type,question_id:data.question_id};
}
const passNext=()=>{
   let answer=unitAnswer.answer;
   console.log(answer);
    if(answer.length==0) {
        showToast('请回答本页所有问题后再提交')
        return
    };
    for(let i=0;i<answer.length;i++){
        if(!answer[i].answer){
            showToast('请回答本页第'+(i+1)+'个问题后再提交')
            return
        }
        if(answer[i].questin_type==2){
            if(answer[i].answer.length<2){
                showToast('本页第'+(i+1)+'个问题是多选')
                return;
            }
        }
    }
   

}
const goNext=(index)=>{
    if(index<props.pageNum){
        emit('switchPage',index)
    }else{
        emit('switchPage',index)
        passNext()
    }
}
const showPreview=(index)=> {
     showImg.value=true;
     position.value=index;
    setTimeout(()=>{
        ImagePreview.value.swipeTo(index)
     })
    };
const handleClick = (e) => {
  
    let src=e.target.currentSrc;
    console.log(src);
    console.log(props.imgList);
    let index =props.imgList.findIndex((item)=>{
        if(item==src) return true;
    });
    showPreview(index)
  
};
const onChange=(newIndex)=>{
  position.value = newIndex || 0
}
onMounted(async()=>{
    let imgArr=[];
   nextTick(() => {
    const nodeList = document.querySelectorAll("#resultmain"+props.pageIndex+" .namebox img");
    //console.log(nodeList)
    nodeList.forEach(function (node) {
        imgArr.push(node.src);
        node.removeEventListener("click",()=>{
            handleClick()
        });
        node.addEventListener("click", (e)=>{
            handleClick(e)
        });
    });
    let temp= [...new Set(imgArr)]; 
    emit('changeImg',temp)
  });
})
</script>

<style lang='scss' scoped>
.main {
    width: 100%;
    position: relative;

    overflow: hidden;
    .dealbox{
        margin:12px 15px 10px;
        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: -1;
    }

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

        .page {
            background: #fff;


            min-height: 180px;
            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>
