<template>
    <div class="bck">
        <div class="title">
            <div>单向选择</div>
            <div>
                {{ dataObj.curNum }}<span>/{{ dataObj.totalNum }}</span>
            </div>
        </div>
        <div class="ans">
            {{ dataObj.title }}
        </div>

        <div class="ans_card" v-for="(v, i) in contentJsonArray" :key="i">
            <div
                class="ans_item grey"
                :class="checkIndex === i ? 'yellow' : 'grey'"
                @click="subAns(v.k, i)"
            >
                {{ v.k + " . " + v.v }}
            </div>
            <!-- <div class="ans_item grey">B.水性</div>
            <div class="ans_item yellow">C.绍兴</div> -->
        </div>

        <div class="whiteLine"></div>

        <div class="reply" v-if="rightData.isShow">
            <div class="reply_title">正确答案:{{ rightData.rightAnswer }}</div>
            <div class="reply_text">解析:{{ rightData.remark }}</div>
        </div>

        <div
            class="btn blue"
            v-if="dataObj.curNum != 0 && dataObj.curNum == dataObj.totalNum"
            @click="toEnd"
        >
            完成
        </div>
        <div class="btn" v-else @click="toNext">下一题</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoryId: 0,
            dataObj: {
                answer: null,
                contentJsonArray: null,
                curNum: 0,
                id: 0,
                itemCategoryId: 0,
                remark: null,
                score: 0,
                sort: 0,
                status: 0,
                title: "",
                totalNum: 0,
                version: 0,
            },
            contentJsonArray: [], //选项
            checkIndex: "",
            //答案-解析
            rightData: {
                rightAnswer: "",
                remark: "",
                isShow: false,
            },
            //答题时间
            answerUseTime: 0,
            timer: null, //计时器
        };
    },
    methods: {
        //获取题目-开始答题
        toBank() {
            if (!this.categoryId) return this.$toast.fail("题库Id为空");
            this.yxAxios
                .get(
                    `${
                        this.kqUrl
                    }/item/getItemBank?travelerNum=${localStorage.getItem(
                        "travelerNum"
                    )}&categoryId=${this.categoryId}`
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.dataObj = res.data.data;
                        this.contentJsonArray = JSON.parse(
                            this.dataObj.contentJsonArray
                        );
                        this.hanleTime();
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                });
        },
        //提交答案
        subAns(val, index) {
            this.checkIndex = index;
            this.yxAxios
                .get(
                    `${
                        this.kqUrl
                    }/item/submit?travelerNum=${localStorage.getItem(
                        "travelerNum"
                    )}&itemBankId=${
                        this.dataObj.id
                    }&answer=${val}&answerUseTime=${this.answerUseTime}`
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        const data = res.data.data;
                        this.rightData = {
                            rightAnswer: data.rightAnswer,
                            remark: data.remark,
                            isShow: true,
                        };
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                    clearInterval(this.timer);
                });
        },
        //下一题
        toNext() {
            this.yxAxios
                .get(
                    `${
                        this.kqUrl
                    }/item/nextOne?travelerNum=${localStorage.getItem(
                        "travelerNum"
                    )}&curItemBankId=${this.dataObj.id}&categoryId=${
                        this.categoryId
                    }`
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.remakeData();

                        this.dataObj = res.data.data;
                        this.contentJsonArray = JSON.parse(
                            this.dataObj.contentJsonArray
                        );
                        //计时器
                        this.hanleTime();
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                });
        },
        //完成
        toEnd() {
            this.yxAxios
                .get(
                    `${
                        this.kqUrl
                    }/item/finish?travelerNum=${localStorage.getItem(
                        "travelerNum"
                    )}&categoryId=${this.categoryId}`
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$dialog
                            .alert({
                                title: "完成答题",
                                message: "您的分数是：" + res.data.data,
                                theme: "round-button",
                            })
                            .then(() => {
                                let index = this.$route.query.index;
                                this.$router.push({
                                    name: "stars",
                                    query: {
                                        index: index,
                                    },
                                });
                            });
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                });
        },
        //重置数据
        remakeData() {
            this.rightData = {
                rightAnswer: "",
                remark: "",
                isShow: false,
            };
            (this.contentJsonArray = []), //选项
                (this.checkIndex = "");
            this.dataObj = this.$options.data().dataObj;
            console.log("重置");
        },
        //单独计时器
        hanleTime() {
            this.answerUseTime = 0;
            console.log('开始计时...'+this.answerUseTime)
            this.timer = null
            this.timer = setInterval(() => {
                this.answerUseTime++;
            }, 1000);

            this.$once("hook:beforeDestroy", () => {
                clearInterval(this.timer); //清理
            });
        },
        //重置计时器
        reserveTime() {
            this.answerUseTime = 0
            clearInterval(this.timer); //清理
        }
    },
    mounted() {
        this.categoryId = this.$route.query.categoryId;
        this.toBank();
    },
};
</script>

<style lang="scss" scoped>
.bck {
    width: 100vw;
    height: 100vh;
    background-color: #f0f2f5;
    padding: 5vw;
    box-sizing: border-box;

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 4.5vw;
        color: #ff7f24;
        letter-spacing: 2px;
        font-weight: 500;

        span {
            color: #999999;
        }
    }
    .ans {
        color: #333;
        font-size: 4.4vw;
        line-height: 50px;
        font-weight: 600;
        margin: 60px 0 50px;
    }
    .ans_card {
        .ans_item {
            margin: 60px 0;
            font-size: 4.2vw;
            letter-spacing: 3px;
        }
        .grey {
            color: #999999;
        }
        .yellow {
            color: #ff7f24;
        }
    }

    .whiteLine {
        margin: 150px 0 10px;
        height: 2px;
        width: 100%;
        background-color: #fff;
    }
    .reply {
        .reply_title {
            color: #333333;
            font-size: 4.3vw;
            margin: 30px 0;
        }
        .reply_text {
            font-size: 4.3vw;
            color: #999999;
            letter-spacing: 2px;
            line-height: 50px;
        }
    }
    .btn {
        position: fixed;
        left: 15vw;
        bottom: 5vw;
        width: 70vw;
        height: 100px;
        background-color: #ff3636;
        font-size: 4.4vw;
        margin: 30vw 0 10vw;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10vw;
        letter-spacing: 10px;
    }
    .blue {
        background-color: #409eff;
    }
}
</style>