<template>
	<view class="test-list-wrap" style="display:block;">
		<view class="content" style="overflow:hidden; padding-top: 40rpx;" >
			<view class="p-item" >
				<view class="item" v-for="(item,index) in dataList" :key="index">
				    <view class="h2">{{item.Name}}</view>
				    <view class="do-time">
				        约{{item.AvgTime == 0 ? '1' : item.AvgTime}}分钟
				    </view>
				    <view class="desc">
				        {{item.Brief}}
				    </view>
				    <view class="btn-wrap">
				    	<view class="btn"  @click="navTest(item,1)" v-text="item.RecordId>0?'重新测评':'开始测评'">
				    	    
				    	</view>
				        <view class="report-btn" v-if="item.RecordId>0" @click="navReport(item)">
				            查看报告
				        </view>
				    </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/testManage.js"
	export default {
		data() {
			return {
				refreshIfNeeded: false, //是否返回刷新
				dataList: [],
			}
		},
		onShow() {
			this.queryTaskListForWeChart();
		},
		methods: {
			// 返回
			goback(){
				uni.navigateBack(-1);
			},
			//获取列表
			queryTaskListForWeChart() {
				uni.showLoading({
					title: "加载中"
				})
				api.queryTaskListForWeChart().then((res)=>{
						uni.hideLoading();
					if (res && res.Result === 1) {
						this.dataList = res.Data.DataList.filter(item=>(item.Type !== 4 && item.Type != -29));
					}
				})
				
			},
			navTest(item,index) {
				switch (item.Type) {
					case 11: {
						// 高中兴趣测评
						uni.navigateTo({
							url: "/packageCa/pagesTest/interestTestTitle"
						})
						break;
					}
					case 15: {
						// 人格测评
						uni.navigateTo({
							url: "/packageCa/pagesTest/personalTestTitle"
						})
						break;
					}
					case 17: {
						// 工作价值观测评
						uni.navigateTo({
							url: "/packageCa/pagesTest/workValuesTestTitle"
						})
						break;
					}
					
					case -27: {
						// 多元能力
						uni.navigateTo({
							url: "/packageCa/pagesTest/customTestTitle?testType=-27"
						})
						break;
					}
					case -28: {
						// 通用职业
						uni.navigateTo({
							url: "/packageCa/pagesTest/customTestTitle?testType=-28"
						})
						break;
					}
				}
			},
			navReport(item) {
			    switch (item.Type) {
			        case 11: {
			            // 兴趣测评
			            uni.navigateTo({
			                url: `/packageCa/testReport/interestTestReport`
			            })
			            break;
			        }
			        case 15: {
			            // 人格测评
			            uni.navigateTo({
			                url: `/packageCa/testReport/personalTestReport`
			            })
			            break;
			        }
			        case 17: {
			            // 工作价值观测评
			            uni.navigateTo({
			                url: `/packageCa/testReport/workValuesTestReport`
			            })
			            break;
			        }
			        case -27: {
			            // 多元能力
			            uni.navigateTo({
			                url: `/packageCa/testReport/multipleAbilityTestReport?id=${item.RecordId}`
			            })
			            break;
			        }
			        case -28: {
			            // 通用职业
			            uni.navigateTo({
			                url: `/packageCa/testReport/generalCareerTestReport?id=${item.RecordId}`
			            })
			            break;
			        }
			    }
			},
		}
	}
</script>
<style lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	page {
		background: url('#{$image-oss-url}/18.png') no-repeat;
		background-size: contain;
		overflow-y:scroll;
		background-color:#f5f5f5;
	}
</style>
<style lang="scss" scoped>
    .head-bar {
        position: relative;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        height: 60rpx;
        line-height: 60rpx;
		margin-bottom: 40rpx;
        .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;
        }
    }
	.test-list-wrap {
        padding: 0 20rpx 130rpx;

        .content {
			.p-item {
				.h1 {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					&:before {
						content: "";
						display: block;
						width: 8rpx;
						height: 28rpx;
						margin-right: 6rpx;
						background: #1677ff;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}
			}
            .item {
                position: relative;
                padding: 40rpx 20rpx;
                background: #fff;
                height: 224rpx;
                border-radius: 12rpx;
                margin-bottom: 25rpx;
                /*background: #F2F9FF;*/
				background:#fff;
                // border: 2rpx solid #E7F4FD;
				border: 2rpx solid #fff;
                overflow: hidden;

                &:nth-child(2n-1) {
                    &::after {
                        content: "";
                        position: absolute;
                        right: -110rpx;
                        bottom: -60rpx;
                        display: block;
                        width: 118rpx;
                        height: 118rpx;
                        border-radius: 50%;
                        border: 34rpx solid rgba(189, 226, 255, 0.5);
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        right: 55rpx;
                        bottom: 106rpx;
                        display: block;
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        background: rgba(189, 226, 255, 0.5);
                    }
                }

                &:nth-child(2n) {
                    /*background: #F7F7FF;*/
					background: #fff;
                    border: 2rpx solid #FFF;

                    &::before {
                        content: "";
                        position: absolute;
                        right: -65rpx;
                        bottom: 75rpx;
                        display: block;
                        width: 102rpx;
                        height: 102rpx;
                        border-radius: 24rpx;
                        transform: rotateZ(45deg) skew(-20deg, -20deg);
                        background: rgba(205, 217, 255, 0.4);
                        z-index: 9;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        right: -72rpx;
                        bottom: 10rpx;
                        display: block;
                        width: 128rpx;
                        height: 128rpx;
                        border-radius: 33rpx;
                        transform: rotateZ(45deg) skew(-20deg, -20deg);
                        background: rgba(205, 217, 255, 0.2);
                        // background: #3F51B5;
                    }
                }

                .h2 {
                    font-size: 36rpx;
                    color: #333;
                    margin-bottom: 20rpx;
                }

                .do-time {
                    position: absolute;
                    right: 20rpx;
                    top: 40rpx;
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    color: #20B664;

                    &:before {
                        content: "";
                        display: block;
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 10rpx;
                        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIASURBVEiJ3ZaxctNAEIa/tQ5oU1Ieb5A3wJlUNsPEGR4gChE18Qy9cc+MQ6+AeIAMYZjYFRPzBrwBV6Z0yRDZS3GykayTYTyh4a+ku93/313d3koowU5iC4Cah2wDyW8AXCdzq6UV+Tg5BUZbEdfRd930DKB1R4SNkPKLncRWMfuipACodhCZbWRQ3UFkAqDwSiS/CJaoLIKa74X3oeueX27it5+TNhHXni1/VCaHQIkKg2+F/MHG6AGilc10nRzANLhNgV2UNixPVzSomsyH/GCGEiOAMA0RhQUkf4uaUxBrr57HII9Rias2EdzXrwg7fiH/EKRqyAA7fvERtAfqkPleMAONrkEsMHXddO/vMwCQ2z5qep7AHLlOelwNIBkB1msxbKRpFADsJBmgvPaWmi0WrYuWiEHmB6WSnblu2t9KAMBenbxH1uq/hGrmnpwfB/cK/PNO3ihgx8loFb1oBnq4UHnqnwGR2E6SQSMBm05RuUMDda5+n3oH/zmDiCIydaGP6DrpENST6r3GWzgoUMyFtnfWxiP4e097q1myhoY+MEfejxk/F5dNzq7zLrPjkwGIRc1LoJZpWKC4gxAyHpgYDQ8iO076iE5RYpYZr6FWokp55nwKBlANZmmzG8q0PnDUPBN4452LgSNac/T74ioDR0iE/Mt/PpOBO/1t+QUcj9NlQhj6vwAAAABJRU5ErkJggg==") no-repeat;
                        background-size: 100%;
                    }
                }

                .desc {
                    font-size: 26rpx;
                    color: #666666;
                }

                .btn-wrap {
                    position: absolute;
                    bottom: 40rpx;
                    left: 20rpx;
                    display: flex;
                    align-items: center;

                    .btn {
                        width: 200rpx;
                        height: 64rpx;
                        line-height: 64rpx;
                        background: #1677ff;
                        margin-right: 20rpx;
                        color: #fff;
                        font-size: 28rpx;
                        text-align: center;
                        border-radius: 60rpx;
                    }

                    .report-btn {
                        width: 200rpx;
                        height: 64rpx;
                        line-height: 64rpx;
                        text-align: center;
                        border-radius: 60rpx;
                        border: 2rpx solid #1677ff;
                        font-size: 28rpx;
                        color: #1677ff;
                    }
                }

            }
        }
    }
</style>