<template>
    <div class="count">
        {{ countTime }}
    </div>
    <div class="main" v-show="showIntro && step==-1">
        <img src="../assets/bg.png" alt="" class="bg">
        <div class="content">
            <img src="../assets/wave.png" alt="" class="top">
            <img src="../assets/wave.png" alt="" class="xia">
            <div class="title">
                {{ caseObj.case_name }}
            </div>
            <div class="con" v-html="(casePage[0].case_item_model)[0].content" v-if="casePage.length > 0 && casePage[0].case_item_model">

            </div>
        </div>
        <div class="bottom">
            <div class="button" @click="handleStart" >马上开始</div>
        </div>
    </div>
    <caseDetail v-for="(item, index) in pageList" :pageIndex="index" :step="step" @switchPage="switchPage" :pageItem="item" :pageNum="pageList.length" @getAllAnswer="getAllAnswer"  :start_time="start_time" :case_id="case_id"></caseDetail>
    <comment v-show="!showIntro && step==pageList.length" ref="commentRef" :countTime="countTime" @initPage="initPage" :start_time="entry_time" :allAnswer="allAnswer" :is_welfare="is_welfare"></comment>
    <totop></totop>
    <back :project_id="caseObj.project_id"></back>
</template>

<script setup>
import { ref ,reactive,getCurrentInstance} from "vue";
const step = ref(-1);
const key = ref(0);
const showIntro = ref(true);
const countTime = ref('00:00');
const start_time = ref('');
const time = ref(0);
const timer = ref(null);
const casePage = ref([]);
const pageList = ref([]);
const entry_time=ref('');
const commentRef = ref(null);
import dayjs from 'dayjs'
import api from '../api/user.js';
import { useRouter, useRoute } from 'vue-router';
import { WXSHARE } from "../utils/wxshare-1.6.0";
import host from "../utils/host"
const router = useRouter();
const route = useRoute();
const caseObj = reactive({});
const allAnswer = reactive({});
const { proxy } = getCurrentInstance();
const is_welfare = ref(0);
let origin=route.query.source?route.query.source:''
const source = ref(origin);
const case_id = ref(route.query.case_id);
const getProjectDetail=async(name,project_id)=>{
  const {code,data}=await api.getProjectDetail(project_id);
  if(code==200){
    let link=host+'/web/caseIntro?case_id='+case_id.value;
        WXSHARE(name,data.project_name,link,''); 
  }
 }
const getDetail = async () => {
    const { code, data } = await api.getCaseDetail(case_id.value);
    proxy.$loading.hide();
    if (code == 200) {
        document.title = data.case_name;
        if(data.is_join==1){
            if(source.value){
                router.push({
                path:'/result',
                query:{
                    case_id:data.case_id,
                    project_id:data.project_id,
                    source:source.value

                }
               })
            }else{
                router.push({
                path:'/result',
                query:{
                    case_id:data.case_id,
                    project_id:data.project_id
                }
               })
            }
            

        }
        is_welfare.value=data.is_welfare;
        console.log('is_welfare:'+data.is_welfare)
        Object.assign(caseObj, data)
        casePage.value = data.case_item;
        pageList.value = [];
        for (let i = 1; i < data.case_item.length; i++) {
            pageList.value.push(data.case_item[i]);
        }
        getProjectDetail(data.case_name,data.project_id)

    }

}
const behaviorRecord=(step='',start_time='',end_time='')=>{
    api.behaviorRecord({
        case_id:case_id.value,
        step:step,
        start_time:start_time,
        end_time:end_time
    }).then(res=>{

    })
}
const addZero = (num) => {
    return num < 10 ? '0' + num : '' + num;
}
const getAllAnswer=(data)=>{
    //Object.assign(allAnswer,data)
    allAnswer[data.pageIndex]=data.answer;
    commentRef.value.formatAnswer(allAnswer)
}
const switchPage = (index) => {
    if(index<0){
        showIntro.value=true;
        step.value=-1;
        document.documentElement.scrollTop = 0;
       document.body.scrollTop = 0;
    }else{
        step.value=index;
        document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    }
    if(index==pageList.value.length){
        //alert(caseObj.project_id);
        commentRef.value.init(caseObj.case_id,caseObj.project_id)
    }
    
}
const handleCount = () => {
    let minute = 0;
    let second = 0;
    if (timer.value) {
        clearInterval(timer.value)
    }
    timer.value = setInterval(() => {
        time.value = time.value + 1;
        if (time.value >= 60) {
            minute = Math.floor(time.value / 60);
            second = time.value % 60;
            if (minute >= 99 && second >= 59) {
                clearInterval(timer.value)
            }
            countTime.value = `${addZero(minute)}:${addZero(second)}`;
        } else {
            countTime.value = `00:${addZero(time.value)}`;
        }
    }, 1000);
};
const initPage=()=>{
    // step.value =-1;
    // showIntro.value=true;
    step.value = 0;
    showIntro.value = false;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
   if(caseObj.case_item.length<=1) {
       commentRef.value.init(caseObj.case_id,caseObj.project_id)
   }
}
const handleStart = () => {
    step.value = 0;
    showIntro.value = false;
    start_time.value =dayjs().format('YYYY-MM-DD HH:mm:ss');
    behaviorRecord('点击开始',entry_time.value,dayjs(start_time.value).format('YYYY-MM-DD HH:mm:ss'));
    behaviorRecord('第1页',entry_time.value,dayjs(start_time.value).format('YYYY-MM-DD HH:mm:ss'));
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
   if(caseObj.case_item.length<=1) {
    commentRef.value.init(caseObj.case_id,caseObj.project_id)
   }
}
onMounted(async() => {
    proxy.$loading.show();
    entry_time.value=dayjs().format('YYYY-MM-DD HH:mm:ss')
    getDetail();
    behaviorRecord('进入问卷',entry_time.value,entry_time.value);
    handleCount();
//     await setTimeout(() => {
//     const nodeList = document.querySelectorAll(".pagemain .namebox img");
//     console.log(nodeList);
//     nodeList.forEach(function (node) {
//         imgList.value.push(node.src);
//         node.onClick=null;
//         // node.removeEventListener("click",(e)=>{
//         //     handleClick(e)
//         // });
//         node.addEventListener("click", (e)=>{
//             handleClick(e)
//         });
//     });
//   });
})
onBeforeMount(() => {
    clearInterval(timer.value)
})
</script>

<style lang='scss' scoped>
.count {
    color:#fff;
    right: 15px;
    top: 12px;
    z-index: 9;
    display: flex;
    align-items: center;
    position: fixed;
    height: 31px;
    padding: 0 8px;
    background: #43C9C3;
    border-radius: 8px;
}

.main {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #fff;
    .bg {
        width: 100%;
        position: absolute;
        z-index: 0;
    }

    .content {
        background: #fff;
        position: relative;
        margin: 20px 15px;
        min-height: 300px;
        margin-bottom: 80px;
        border-left: 1px solid #43C9C3;
        border-right: 1px solid #43C9C3;

        .con {
            margin: 0 10px;
            :deep() img {
                width:100%;
            }
        }

        .title {
            padding: 20px 0;
            font-weight: 500;
            margin: 0 30px;
            text-align: center;
            font-size: 20px;
            color: #000000;
        }

        .top {
            width: 100%;
            position: absolute;
            top: -9px;
        }

        .xia {
            width: 100%;
            position: absolute;
            transform: rotate(180deg);
            bottom: -9px;
        }
    }

    .bottom {
        position: fixed;
        height: 49px;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .button {
            width: 250px;
            height: 40px;
            background: #43C9C3;
            border-radius: 20px;
            font-weight: 500;
            font-size: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
        }
    }

}
</style>
