<template>
    <view class="title-wrap">
        <view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
            <view class="go-back" v-if="taskId ==0" @click="goback"></view>
            <text v-if="testTitle != ''">{{testTitle}}</text>
        </view>
        <view class="progress-block">
            <view class="row">
                <view class="title-index">
                    第{{pageIndex+1}}题
                </view>
                <view class="all-title">
                    共{{allNum}}道题
                </view>
                <view class="time" v-if="doTime >0">
                    约{{doTime}}分钟
                </view>          
            </view>
            <view class="bar">
                <view class="bar-inner" :style="{width: rate + '%'}"></view>
            </view>
        </view>
        <view class="content">
            <view class="item" v-show="pageIndex == index" v-for="(item, index) in list" :key="index">
                <view class="title">{{ item.TitleName }}</view>
                <view class="sel-label-block">
                    <view class="label" v-if="item.OptionsA != null && item.OptionsA.trim() != ''"
                        :class="item.Value === 1 ? 'sel' : ''" @click="checkedTitle(1,index)">{{item.OptionsA}}</view>
                    <view class="label" v-if="item.OptionsB != null && item.OptionsB.trim() != ''"
                        :class="item.Value === 2 ? 'sel' : ''" @click="checkedTitle(2,index)">{{item.OptionsB}}</view>
                    <view class="label" v-if="item.OptionsC != null && item.OptionsC.trim() != ''"
                        :class="item.Value === 3 ? 'sel' : ''" @click="checkedTitle(3,index)">{{item.OptionsC}}</view>
                    <view class="label" v-if="item.OptionsD != null && item.OptionsD.trim() != ''"
                        :class="item.Value === 4 ? 'sel' : ''" @click="checkedTitle(4,index)">{{item.OptionsD}}</view>
                    <view class="label" v-if="item.OptionsE != null && item.OptionsE.trim() != ''"
                        :class="item.Value === 5 ? 'sel' : ''" @click="checkedTitle(5,index)">{{item.OptionsE}}</view>
                    <view class="label" v-if="item.OptionsF != null && item.OptionsF.trim() != ''"
                        :class="item.Value === 6 ? 'sel' : ''" @click="checkedTitle(6,index)">{{item.OptionsF}}</view>
                </view>
            </view>
            <view class="btn-wrap">
                <view class="pre-btn" @click="prePage">上一题</view>
                <view class="com-btn" v-show="commit" @click="submitTitle">提交</view>
            </view>
        </view>
<!--        <u-modal :show="showBakcTip" @confirm="showBakcTip=false" @cancel="goback" confirmText="继续测评" cancelText="放弃测评"
            :showCancelButton="true">
            <view class="slot-content">
                <view class="tip-layer">
                    <view class="title">提示</view>
                    <view class="desc">确认要放弃测评吗？</view>
                </view>
            </view>
        </u-modal> -->
    </view>
</template>

<script>
    import api from "@/packageCa/apiCa/testManage.js"
    export default {
        data() {
            return {
                barHeight: wx.getWindowInfo().statusBarHeight,
                list: [],
                allNum: 0, //总题目数
                pageIndex: 0, //显示页
                showBakcTip: false,
                lastTapTime: 0, // 记录上次点击的时间
                testType: -27,
                taskId: 0,
                testTitle: "自定义测评",
                doTime: 2,
				
				historyTitle: [],// 历史题目
            }
        },
        computed: {
            rate: function() {
                let num = 0;
                this.list.forEach(item => {
                    if (item.Value !== '') {
                        num++
                    }
                });
                return Math.round(num * 100 / this.allNum)
            },
            commit: function() {
                let num = 0;
                this.list.forEach(item => {
                    if (item.Value !== '') {
                        num++
                    }
                });
                if (num == this.list.length) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        onLoad(e) {
            this.testType = e.testType;
            if (e.taskId > 0) {
                this.taskId = e.taskId 
            }
             this.computeTitle(this.testType);
            this.getHistoryTitle();
        },
        methods: {
            // 返回
            goback() {
				uni.showModal({
					title: '提示',
					content: '确认要放弃测评吗？',
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#1677ff', 
					cancelColor: '#999999',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack(-1);
						} else if (res.cancel) {						
						}
					}
				});
				//uni.navigateBack(-1);
            },
            computeTitle(testType) {
                switch (parseInt(testType) ) {
                    case -27: {
                        // 多元能力
                        this.doTime = 25;
                        this.testTitle = "多元(职业)能力测评";
                        break;
                    }
                    case -28: {
                        // 通用职业
                        this.doTime  = 8;
                        this.testTitle = "通用(职业)能力测评";
                        break;
                    }
                }
            },
			//获取答题记录
			getHistoryTitle(){
				api.getTestRecordProcessList(this.testType).then(res => {
					if (res.Result === 1) {
						let data = res.Data;
						this.historyTitle = data;
						this.getTitle();
					}
				})
			},
            // 获取题目
            getTitle() {
                uni.showLoading({
                    title: "加载中..."
                })
                api.queryTestContent(this.testType).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        let list = res.Data.List.Item1;
                        list.forEach(item => {
                            item.Value = "";
							this.historyTitle.forEach(ritem=>{
								if(item.Id == ritem.TestTitleId){
									switch (ritem.TestResult) {
									    case "A": {
											item.Value = 1;
									        break;
									    }
									    case "B": {
									        item.Value = 2;
									        break;
									    }
									    case "C": {
									       item.Value = 3;
									        break;
									    }
									    case "D": {
									        item.Value = 4;
									        break;
									    }
									    case "E": {
									        item.Value = 5;
									        break;
									    }
									    case "F": {
									        item.Value = 6;
									        break;
									    }
									}
								}
							})
                        })
						if(this.historyTitle.length == 0){
							this.pageIndex = 0;
						}else if(this.historyTitle.length == list.length){
							this.pageIndex = list.length - 1;
						}else {
							this.pageIndex = this.historyTitle.length;
						}
						
                        this.allNum = list.length;
                        this.list = list;
						this.testTitle = res.Data.List.Item2;
                    }
                })
            },
            // 上一页
            prePage() {
                if (this.pageIndex == 0) {
                    return
                }
                this.pageIndex--
            },
            //选中题目
            checkedTitle(NUM, INDEX) {
                const now = Date.now();
                if (now - this.lastTapTime < 500) {
                    console.log('双击事件被阻止');
                    return;
                } else {
                    // 处理单击事件
                    console.log('单击事件被触发');
                    this.lastTapTime = now;
                    this.list[INDEX].Value = NUM;
					this.saveTestRecordProcess(this.list[INDEX].Id,NUM);
                    setTimeout(() => {
                        if (this.pageIndex != this.list.length - 1) {
                            this.pageIndex = INDEX + 1;
                        }
                    }, 300)
                }
            },
			//存储答题记录
			saveTestRecordProcess(ID,VALUE){
				let val = ""
				switch (VALUE) {
				    case 1: {
						val = "A";
				        break;
				    }
				    case 2: {
				        val = "B";
				        break;
				    }
				    case 3: {
				       val = "C";
				        break;
				    }
				    case 4: {
				        val = "D";
				        break;
				    }
				    case 5: {
				        val = "E";
				        break;
				    }
				    case 6: {
				        val = "F";
				        break;
				    }
				}
				let data = {
					testType: this.testType,
					testTitleId: ID,
					testResult: val
				}
				api.saveTestRecordProcess(data).then(res => {
					if (res.Result === 1) {
					}
				})
			},
            // 提交题目
            submitTitle() {
                let testStr = "";
                this.list.forEach(item => {
                    switch (item.Value) {
                        case 1: {
                            testStr += `${item.Id}|A,`
                            break;
                        }
                        case 2: {
                            testStr += `${item.Id}|B,`
                            break;
                        }
                        case 3: {
                            testStr += `${item.Id}|C,`
                            break;
                        }
                        case 4: {
                            testStr += `${item.Id}|D,`
                            break;
                        }
                        case 5: {
                            testStr += `${item.Id}|E,`
                            break;
                        }
                        case 6: {
                            testStr += `${item.Id}|F,`
                            break;
                        }
                    }
                });

                uni.showLoading({
                    title: "提交中"
                })
                let data = {
                    testType: this.testType,
                    taskId: this.taskId,
                    testStr
                }
				api.removeTestRecordProcess(this.testType).then((res) => {
					 return api.saveCustomTestResult(data);
				}).then((res) => {
                        uni.hideLoading();
                        if (res.Result === 1) {
                            uni.showToast({
                                title: "提交成功",
                                icon: "success"
                            })
                            let pages = getCurrentPages(); // 当前页面
                            let beforePage = pages[pages.length - 2]; // 上一页
                            if (beforePage != undefined) {
                                beforePage.data.refreshIfNeeded = true;
                            }
                            setTimeout(() => {
                                if (this.testType == -27) {
                                    uni.redirectTo({
                                        url: `/packageCa/testReport/multipleAbilityTestReport?id=${res.Data.TestId}`
                                    })
                                } else if (this.testType == -28) {
                                    uni.redirectTo({
                                        url: `/packageCa/testReport/generalCareerTestReport?id=${res.Data.TestId}`
                                    })
                                } 
                            }, 1000)
                        } else {
                            uni.showToast({
                                title: res.Message,
                                icon: "none"
                            })
                        }
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tip-layer {
        .title {
            font-size: 36rpx;
            color: #000000;
            text-align: center;
            font-weight: 600;
            margin-bottom: 30rpx;
        }

        .desc {
            font-size: 32rpx;
            color: #666666;
            margin-bottom: 20rpx;
            text-align: center;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .head-bar {
        position: relative;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        height: 60rpx;
        line-height: 60rpx;
        margin-bottom: 30rpx;

        .go-back {
            position: absolute;
            left: 10rpx;
            top: 0;
            width: 60rpx;
            height: 60rpx;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
            background-size: 38rpx 38rpx;
        }
    }

    .title-wrap {
        background: #fff;

        .progress-block {
            padding: 0 40rpx;

            .row {
                position: relative;
                display: flex;
                align-items: flex-end;
                height: 40rpx;
                margin-bottom: 20rpx;

                .title-index {
                    font-size: 32rpx;
                    color: #1677ff;
                    font-weight: 600;
                }

                .all-title {
                    font-size: 28rpx;
                    color: #999999;
                    margin-left: 10rpx;
                }

                .time {
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 28rpx;
                    color: #20B664;
                }
            }

            .bar {
                position: relative;
                width: 670rpx;
                height: 8rpx;
                background: #EBEBEB;
                border-radius: 8rpx 8rpx 8rpx 8rpx;

                .bar-inner {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 8rpx;
                    background: #1677ff;
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                }
            }
        }

        .content {
            padding: 0 40rpx;

            .item {
                padding-top: 40rpx;

                .title {
                    font-size: 32rpx;
                    color: #000000;
                    font-weight: 600;
                    margin-bottom: 40rpx;
                }

                .sel-label-block {
                    .label {
                        display: flex;
                        align-items: center;
                        width: 630rpx;
                        height: 96rpx;
                        padding-left: 40rpx;
                        background: #F5F5F5;
                        margin-bottom: 24rpx;
                        border-radius: 12rpx 12rpx 12rpx 12rpx;
                        font-size: 28rpx;
                        color: #000000;

                        &.sel {
                            background: #EDF6FF;
                            color: #1677ff;
                        }
                    }
                }
            }

            .btn-wrap {
                display: flex;
                justify-content: center;
                padding-top: 50rpx;

                .pre-btn {
                    width: 316rpx;
                    height: 76rpx;
                    line-height: 76rpx;
                    text-align: center;
                    background: #F8F8F8;
                    border-radius: 60rpx 60rpx 60rpx 60rpx;
                    border: 2rpx solid #EAEAEA;
                    font-size: 28rpx;
                    color: #666666;
                }

                .com-btn {
                    width: 320rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    text-align: center;
                    background: #1677ff;
                    margin-left: 20rpx;
                    border-radius: 60rpx 60rpx 60rpx 60rpx;
                    font-size: 28rpx;
                    color: #fff;
                }
            }
        }
    }
</style>