<template>
    <view class="answer-box">
        <u-navbar
            title="考核认证"
            :background="background"
            :border-bottom="false"
        ></u-navbar>
        <view class="content">
            <view class="">
                <text class="dx">单选</text>
            </view>
            <view class="topicView">
                <text class="topictext">{{
                    ExaminationQuestions.question.content
                }}</text>
            </view>
            <view class="">
                <view class="list-box">
                    <view
                        v-for="(item, index) in list"
                        :key="index"
                        @click="choice(index)"
                        :class="[item.isRight ? 'selde' : 'noselde']"
                    >
                        {{ item.content }}
                    </view>
                </view>
            </view>
            <button class="btn" @click="getNextClick()">下一题</button>
            <text class="all">{{ ExaminationQuestions.progress }}</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    isRight: false,
                    content: "",
                },
                {
                    isRight: false,
                    content: "",
                },
                {
                    isRight: false,
                    content: "",
                },
                {
                    isRight: false,
                    content: "",
                },
            ],
            background: {
                backgroundColor: "#F4F5F7",
            },
            isSelect: false,
            selectId: [],
            userExamId: null,
            ExaminationQuestions: {
                progress: "",
                question: {
                    content: "",
                },
            },
            isQuestion: true,
        };
    },
    onLoad(num) {
        this.userExamId = num.userExamId;
        this.getExaminationQuestions();
    },
    onUnload() {
        wx.reLaunch({
            url: "./index",
        });
    },

    methods: {
        abc() {
            console.log("11111");
            var arr = document.querySelector(".btm");
            for (let i = 0; i < arr.length; i++) {
                arr[i].onclick = function () {
                    console.log(this.value);
                };
            }
        },
        //选择按钮
        choice(index) {
            if (this.list[index].isRight == true) {
                this.list[index].isRight = false;
                this.isSelect = false;
                console.log(this.isSelect);
                //取消选中时删除数组中的值
                for (var i = 0; i < this.selectId.length; i++) {
                    if (this.selectId[i] === this.list[index].id) {
                        this.selectId.splice(i, 1);
                    }
                }
                console.log("选中的值", this.selectId);
            } else {
                this.list[index].isRight = true;
                this.isSelect = true;
                console.log(this.isSelect);
                this.selectId.push(this.list[index].id);
                console.log("选中的值", this.selectId);
            }
        },
        //申请考试题目
        getExaminationQuestions() {
            this.$u.api.ExaminationQuestions(this.userExamId).then((res) => {
                let that = this;
                if (res.code == 200) {
                    console.log("这是个标识符kao", this.ExaminationQuestions);

                    if (res.data) {
                        that.ExaminationQuestions = res.data;
                        console.log(".......", this.ExaminationQuestions);
                        that.list = res.data.answerList;
                        console.log("1111111", that);
                        console.log(
                            "这是个标识符kao",
                            this.ExaminationQuestions
                        );
                    }
                } else {
                    //接口请求失败
                    uni.showToast({
                        title: res.message,
                        icon: "none",
                    });
                }
            });
        },
        //下一题
        getNextClick: function () {
            //判断
            if (this.isQuestion == "第20题/共20题") {
                this.isQuestion = "";
                console.log("标识符6666", this.userExamId.userExamId);
                wx.navigateTo({
                    url: "./result?userExamId=" + this.userExamId,
                });
            }
            //判断有没有选
            if (this.selectId.length == 0) {
                wx.showToast({
                    title: "请选择",
                    icon: "none", //当icon：'none'时，没有图标 只有文字
                    duration: 2000,
                });
                return;
            }

            uni.request({
                url:
                    "http://192.168.1.22" +
                    "/wxh-worker-rest/rest/exam" +
                    "/serviceRule/next/" +
                    this.vuex_token +
                    "?userExamId=" +
                    this.userExamId +
                    "&questionId=" +
                    this.ExaminationQuestions.question.id +
                    "&userAnswerIds=" +
                    this.selectId,
                method: "POST",
                header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                success: (res) => {
                    console.log("sssss", res);

                    if (res.data.code == 200) {
                        this.ExaminationQuestions = res.data.data;
                        this.list = res.data.data.answerList;
                        this.isQuestion = res.data.data.progress;
                        console.log("uuuuuuuu", this.ExaminationQuestions);
                    }
                    this.selectId = [];
                    console.log("zzy", this.selectId);
                },
            });
            this.$u.api
                .nextClick(
                    this.userExamId,
                    this.ExaminationQuestions.question.id,
                    this.selectId
                )
                .then((res) => {
                    console.log("sssss", res);

                    if (res.data.code == 200) {
                        this.ExaminationQuestions = res.data.data;
                        this.list = res.data.data.answerList;
                        this.isQuestion = res.data.data.progress;
                        console.log("uuuuuuuu", this.ExaminationQuestions);
                    }
                    this.selectId = [];
                    console.log("zzy", this.selectId);
                });
        },
    },
};
</script>

<style lang="scss">
.answer-box {
    width: 750rpx;
    height: 100vh;
    /* background: #8F8F94; */
    margin: 0 auto;
}
.content {
    margin: 30rpx 30rpx;
    overflow: hidden;
    border-radius: 12rpx;
    padding: 40rpx 30rpx 40rpx 30rpx;
    background-repeat: no-repeat;
    background-size: 66%;
    background-color: #fff;
    background-position: right bottom;
    min-height: 800rpx;
}
.dx {
    border-radius: 8rpx;
    background-color: #ff930d;
    font-size: 20rpx;
    color: #ffffff;
    width: 72rpx;
    height: 40rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.topicView {
    margin-top: 40rpx;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 40rpx;
}
.topictext {
    color: #333333;
    font-size: 32rpx;
    line-height: 48rpx;
    font-weight: bold;
}
.num {
    color: #2b85e4;
}

.all {
    color: #8f8f94;
}

.btn {
    margin-top: 98rpx;
    width: 476rpx;
    height: 60rpx;
    line-height: 30px;
    background: #007aff;
    color: #ffffff;
}

.btm {
    width: 476rpx;
    height: 60rpx;
    line-height: 30px;
    margin: 34rpx auto;
}

.list-box {
    // display: flex;
    // flex-wrap: wrap;
    padding: 16upx;
    border-radius: 10upx;

    view {
        width: 476rpx;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        margin: 26rpx auto 0;
    }
}

/*已选择*/
.selde {
    background: #007aff;
    color: #ffffff;
    border-radius: 20upx;
    font-size: 26rpx;
    padding: 0 10upx;
}

/*未选择*/
.noselde {
    margin-top: 30rpx;
    background-color: #f4f5f7;
    width: 100%;
    padding: 40rpx 30rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    border-radius: 12rpx;
    border: 2rpx solid transparent;
    font-size: 28rpx;
}
</style>