<template>
	<view class="test-list-wrap" style="display:block;">
		<view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
			<view class="go-back" @click="goback"></view>
			<text>生涯测评</text>
		</view>
		<view class="contrast-box" >
		    <view class="desc">
		        <text class="icon"></text>
		        <view class="txt-item">
					<text v-for="(item,index) in selectTypeStr" :key="index">{{item}}</text>
		        </view>
		    </view>
		    <view class="btn" @click="showContrastLayer">
		        筛选
		    </view>
		</view>
		<view class="content" style="overflow:hidden;">
			<view class="p-item" v-for="(pitem,pindex) in filteredData" :key="pindex">
				<view class="h1">{{pitem.title}}</view>
				<view class="item" v-for="(item,index) in pitem.list" :key="index">
				    <view class="h2">{{item.TestName}}</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" v-if="item.HasTest" @click="navTest(item,1)">
				    	    重新测评
				    	</view>
				    	<view class="btn" v-else @click="navTest(item,1)">
				    	    开始测评
				    	</view>
				    	<view class="btn" v-if="item.HasTestRecordProcess && item.Type != 25" @click="navTest(item,2)">
				    	    继续测评
				    	</view>
				        <view class="report-btn" v-if="item.HasTest" @click="navReport(item)">
				            查看报告
				        </view>
				    </view>
				</view>
			</view>
		</view>
		
		<!-- 筛选 -->
		<uni-popup ref="pop_card" type="bottom">
		    <view class="search-content">
		        <view class="head-title">
					<text>筛选</text>
					<view @click="closeDialog()" class="s_close"></view>
				</view>
		        <view class="item-content">
		            <view class="title">测评等级</view>
		            <view class="options">
						<view class="item"  v-for="(item,index) in levelOption" :class="checkedTestLevel==item.value?'on':''"  @click="checkedTestLevel = item.value" :key="index">{{item.name}}</view>
		            </view>
		            <view class="title">测评类型</view>
		            <view class="options">
						<view class="item"  v-for="(item,index) in typeOption" :class="checkedTestType==item.value?'on':''"  @click="checkedTestType = item.value" :key="index">{{item.name}}</view>
		            </view>
		            <view class="title">测评功能</view>
		            <view class="options">
						<view class="item"  v-for="(item,index) in fnOption" :class="checkedTestFun==item.value?'on':''"  @click="checkedTestFun = item.value" :key="index">{{item.name}}</view>
		            </view>
		        </view>
		        <view class="btn-wrap">
		            <view class="btn" v-on:click="confirmCompute">
		                确认筛选
		            </view>
		        </view>
		    </view>
		</uni-popup>	
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/testManage.js"
	export default {
		data() {
			return {
				barHeight: wx.getWindowInfo().statusBarHeight,
				refreshIfNeeded: false, //是否返回刷新
				dataList: [],
				selectTypeStr: ["全部"],
				showContrast: false,//显示筛选
				levelOption: [
					{
						name: "全部",
						value: 0
					},
					{
						name: "基础型",
						value: 1
					},
					{
						name: "进阶型",
						value: 2
					},
					{
						name: "专项型",
						value: 3
					},
				],
				typeOption: [
					{
						name: "全部",
						value: 0
					},
					{
						name: "生涯类",
						value: 1
					},
					{
						name: "学习力类",
						value: 2
					},
					{
						name: "心理健康类",
						value: 3
					},
					{
						name: "其他",
						value: 4
					},
				],
				fnOption: [
					{
						name: "全部",
						value: 0
					},
					{
						name: "情感态度",
						value: 1
					},
					{
						name: "智力能力",
						value: 2
					},
					{
						name: "认知学习",
						value: 3
					},
					{
						name: "人格特质",
						value: 4
					},
					{
						name: "心理健康",
						value: 5
					}
				],
				testLevel:0 ,// 测评等级
				testType: 0,// 测评类型
				testFun: 0,// 测评功能
				checkedTestLevel: 0,// 测评等级
				checkedTestType: 0,// 测评类型
				checkedTestFun: 0,// 测评功能
				testList1: [], //情感
				testList2: [], //智力
				testList3: [], //认知学习
				testList4: [], //人格特质
				testList5: [], //心理健康
				testList6: [], //其他测评
				filteredData: [],//筛选后数据
			}
		},
		onShow() {
			this.queryTaskListForWeChart();
		},
		methods: {
			closeDialog(){
				this.$refs.pop_card.close();
			},
			//确认筛选
			confirmCompute(){
				this.testLevel = this.checkedTestLevel;
				this.testType = this.checkedTestType;
				this.testFun = this.checkedTestFun;
				if(this.checkedTestLevel == 0 && this.checkedTestType == 0 && this.checkedTestFun == 0){
					this.selectTypeStr = ["全部"];
				}else {
					let arr = [];
					if(this.checkedTestLevel != 0){
						arr.push(this.levelOption[this.checkedTestLevel].name);
					}
					if(this.checkedTestType != 0){
						arr.push(this.typeOption[this.checkedTestType].name);
					}
					if(this.checkedTestFun != 0){
						arr.push(this.fnOption[this.checkedTestFun].name);
					}
					this.selectTypeStr = arr;
				}
				
				this.filteredData = this.dataList.map(category => {
					const filteredList = category.list.filter(item => {
						// 处理TestLevel筛选
						const levelMatch = this.testLevel === 0 || item.TestLevel === this.testLevel;
						
						// 处理TestType特殊映射（其他类对应TestType=0）
						const typeMatch = this.testType === 0 ? true : 
						this.testType === 4 ? item.TestType === 0 : 
						item.TestType === this.testType;
						
						// 处理TestFun筛选
						const funMatch = this.testFun === 0 || item.TestFun === this.testFun;
						
						return levelMatch && typeMatch && funMatch;
					});
					return { ...category, list: filteredList };
				}).filter(category => category.list.length > 0); // 过滤空分组
				//this.showContrast = false;
				this.$refs.pop_card.close();
			},
			// 显示筛选列表
			showContrastLayer(){
				 //this.showContrast = true;
				 this.$refs.pop_card.open('bottom') //底部弹出
				 this.checkedTestLevel = this.testLevel;
				 this.checkedTestType = this.testType;
				 this.checkedTestFun = this.testFun;
			},
			// 返回
			goback(){
				uni.navigateBack(-1);
			},
			//获取列表
			queryTaskListForWeChart() {
				uni.showLoading({
					title: "加载中"
				})
				let eduLevel = uni.getStorageSync("CAuserInfo").user.GradeLevel;
				new Promise((resolve,reject)=>{
					return api.getTestTypeTagLIst().then((res)=>{
						resolve(res)
					})
				}).then((res)=>{
					let arr = [];
					res.Data.forEach(item=>{
						return arr.push(item.Type);
					})
					return api.getUserTestTypeProcessList(JSON.stringify(arr)).then((res1)=>{
						 return [res, res1];
					})	
				}).then(([res1, res2]) => {
				    if (res1.Result === 1 && res2.Result === 1) {
						return api.queryTaskListForWeChart(eduLevel).then((res) => {
							return [res, res1, res2];
						});
				    }
				}).then(([res, res1, res2]) => {
					 uni.hideLoading();
				    if (res && res.Result === 1) {
				        this.testList1 = [];
				        this.testList2 = [];
				        this.testList3 = [];
				        this.testList4 = [];
				        this.testList5 = [];
				        this.testList6 = [];
				        let list = res.Data.TestList;
						list.forEach(item=>{
							// 处理答题记录匹配
							 item.HasTestRecordProcess = false;
							 res2.Data.forEach(ritem=>{
								 if(item.TestType == ritem.TestType){
									 item.HasTestRecordProcess = ritem.HasTestRecordProcess;
								 }
							 })
						})
				        let num = 0;
				        let arr = []; 
				        let arr1 = []; 
				        list.forEach(item=>{
				        	if(item.HasTest){
				        		num++
				        	}
				        	let isMatch = false;
							// 处理测评分类匹配
				        	res1.Data.forEach((yitem, yindex) => {
				        		if (item.TestType == yitem.Type) {
				        			item.Type = item.TestType;
				        			item.TestType = yitem.TestType;
				        			item.TestLevel = yitem.TestLevel;
				        			item.TestFun = yitem.TestFun;
				        			arr.push(item); 
				        			isMatch = true;
				        		}
				        	})
				        	if (!isMatch) {
				        		item.Type = item.TestType;
				        		item.TestType = 0;
				        		item.TestLevel = 0;
				        		item.TestFun = 0;
				        		arr1.push(item);
				        	}
				        })
				        this.testList6 = arr1;
				        this.testList = list;
				        arr.forEach((item, index) => {
				        	switch (item.Type) {
				        			// 1 情感态度
				        			// 高中，大学职业兴趣11
				        			// 工作价值观17
				        			// 学习动机测评-33
				        			// 自我效能感测评-34
				        			// 小学兴趣测评-31
				        			//初中兴趣测评18
				        		case 11: 
				        		case 17:
				        		// case 18:
				        		// case -31:
				        		// case -33:
				        		// case -34: 
								{
				        			this.testList1.push(item);
				        			// this.interestList.push(item);
				        			break;
				        		}
				        			// 2 智力能力
				        			// 注意力22
				        			// 记忆力23
				        			// 多元智能16
				        			// 小学多元智能 -32
				        			// 多元性向潜能发展6
				        			// 推理能力测评-45
				        			// 批判性思维倾向测评-38
				        			// 创造力倾向测评-37
				        			// 多元(职业)能力测评-27
				        			// 通用(职业)能力测评-28
				        		// case 22:
				        		// case 23:
				        		// case 16:
				        		// case 6:
				        		// case -32:
				        		// case -45:
				        		// case -38:
				        		// case -37:
				        		case -27:
				        		case -28: {
				        			this.testList2.push(item);
				        			break;
				        		}
				        		// 3认知学习
				        		// 学科信心-2
				        		// 学科能力测评20
				        		// 学科自评-9999
				        		// 学习习惯-36
				        		// 领导力测评-29
				        		// 生涯建构测评-42
				        		// 生涯适应力测评-43
				        		// 意志力测评 -35
				        		// 场独立-场依存认知风格测评 25
				        		// 沉思型-冲动型认知风格测评 26
				        		// 儿童元认知测评 -39
				        		// 元认知测评 -40
				        		// 学习资源管理能力测评 -41
				        		// 问题解决能力测评-44
				        		// case -2:
				        		// case 20:
				        		// case -9999:
				        		// case -36:
				        		// case -29:
				        		// case -42:
				        		// case -43:
				        		// case -35:
				        		// case 25:
				        		// case 26: 
				        		// case -39:
				        		// case -40:
				        		// case -41:
				        		// case -44:
				        		// {
				        		// 	this.testList3.push(item);
				        		// 	// this.workValueList.push(item);
				        		// 	break;
				        		// }
				        		// 4.人格特质
				        		// MBTI 4
				        		// 人格测评15
				        		// case 4:
				        		case 15: {
				        			this.testList4.push(item);
				        			break;
				        		}
				        		// 5.心理健康
				        		// SCL-90
				        		// case -10: {
				        		// 	this.testList5.push(item);
				        		// 	break;
				        		// }
				        	}
				        })
				        let allList = [];
				        if(this.testList1.length>0){
				        	allList.push({title: '情感态度', list: this.testList1});
				        }
				        if(this.testList2.length>0){
				        	allList.push({title: '智力能力', list: this.testList2}); 
				        }
				        if(this.testList3.length>0){
				        	allList.push({title: '认知学习', list: this.testList3}); 
				        }
				        if(this.testList4.length>0){
				        	allList.push({title: '人格特质', list: this.testList4}); 
				        }
				        // if(this.testList5.length>0){
				        // 	allList.push({title: '心理健康', list: this.testList5}); 
				        // }
				        // if(this.testList6.length>0){
				        // 	allList.push({title: '其他测评', list: this.testList6}); 
				        // }
				        this.dataList = allList;
				        this.confirmCompute();
				    }
				}).catch((error) => {
				    console.error('请求出错:', error);
				});
			},
			routerUrl(TYPE){
				switch (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;
					}
				}
			},
			navTest(item,index) {
				if(index == 1){
					uni.showLoading({
					    title: "加载中..."
					})
					api.removeTestRecordProcess(item.Type).then((res) => {
						if (res.Result == 1) {
							uni.hideLoading();
							this.routerUrl(item.Type)
						}
					})
				}else {
					this.routerUrl(item.Type)
				}
			},
			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;
        }
    }
	.progress-box {
		display: flex;
		align-items: center;
		margin-bottom: 36rpx;
		.progress-txt {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			width: 175rpx;
			color: #333333;
			margin-right: 20rpx;
			.strong {
				font-size: 32rpx;
				color: #20B664;
				font-weight: 600;
				margin-left: 6rpx;
			}
		}
		.progress-bar {
			width: 500rpx;
			height: 24rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.progress {
				position: relative;
				background-image: repeating-linear-gradient(-45deg, #20B664, #20B664 20rpx, #47C580  20rpx, #47C580 30rpx);
				height: 24rpx;
				border-radius: 20rpx;
				transition: width 1s ease-in-out;
				&::after {
					display: block;
					content: "";
					  position: absolute;
					  right: -20rpx;
					  top: -8rpx;
					  width: 40rpx;
					  height: 40rpx;
					  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAA2FBMVEUAAAA60X84z4A60YE50X850n860H860IA6z4A4z4A60X850IA50X84z4Awz4D///860X8iv2khu2ciwmskyW8guWUlzHEky3Ajx20hvWglznEl0HMm0nQjxWwm1HUgt2Q3z3zk+O112KK67dGR47Yu03kyznktzXYuyHQz0nsvxXIqwm/I8NoqyHInv2ys6Mc9yHwr0Xbx+/Wt7Mpa15NZ0ZBO1os/0IEyynfI8tyD3Ktn1Jjx/PbW8+Of5b6E4q9LzYZA1oVLyYTW9eSf6cGf5r+C2qpp35/QM//cAAAAD3RSTlMA70B/37+vn2Agz7+PYBCLRPBlAAACh0lEQVQ4y6XV2XqqMBAAYKKI1i2DgNZWK6AHEHetS7X72d7/jc4kGBJFvTlzARf833yTySRo55HLV8oEgOhGNVdXP2RlEZ0MUsxdpSUdgRuEi8fHx05nMRwCQOEyvzNQhs1m8wGD887TD8bvLqQlSFutVhNDasZJ7dzmAYKmbaPmWOonLCafseG9jZHJjcmFlnZyf6/oh+u6hraL+EbuUtoHAlG3i/pGbiJ6UoDAsjIa+dfz36/hcZVGYnMAlpXVmxVl8ZLkFoUUILIyetunSXii37pMfKY3HhVxrBsgh7gIkWmmejsbD2zbp2l46c4XNa1OwDRTPeDf+XP18cJe/WNPFkBYFYEp9HwsMw5areAV379EB4dYRxWi9lH7HpXxjKv8ie+N6PcQt9GAUTvRPlVjZdtb1rl0LxdQ0XQw24nu05MYsz6/btK9XEBZI9BuNLieUbr0lvQkPuScdHCFAA3ETMf+Ghd5kn+gzgkAw1yLVc5Uq84gwwSxqt8VvLW5FphoZZg6nDM9f5vPFdxXZhCxrlUQOyL3mI7NwUmzZe4QDDxRsSP0H/zum/ulLFqZ7wCquN07R+j4e0aXezNeH2bHzMp8u7jdbIVcc+6h8D4ta83tb/U0AKmzER31hPZpf8wqsT6Z9aKu1CEU+fC7PaG//fbBm2MH9wyv1bPDhh9Dx9RpbmVO3tWzE0IhueXAbUiNPMFvJyeNJeZhQNQ7yx0ffKRSB1CQl8zoXGMoOpSXDBYC01t6AlBTL0ZXaoxTPclco9criaSVeudc0t2dsErUCLgjJ6MnLpDShR9QAcCNHbVuCykYd5f/gshhF0/bjE5HUQAAeun/fpoy6rmqoRN05Uo+I/8B7R+IPTrIPJ8AAAAASUVORK5CYII=');
					  background-size: 100%;
				}
			}
		}
	}
    .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;
                    }
                }

            }
        }
    }
	.contrast-box {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 666rpx;
	    height: 76rpx;
	    margin-bottom: 20rpx;
	    padding: 0 20rpx;
	    background: #E7F1FF;
	    border-radius: 12rpx 12rpx 12rpx 12rpx;
	    border: 2rpx solid #FFFFFF;
		
	    .desc {
	        display: flex;
	        align-items: center;
	
	        .icon {
	            width: 28rpx;
	            height: 28rpx;
	            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHfSURBVEiJ1Va9btswEP5OlBNr01JAMgpUeYNm7FDAeoP2Ddq1UzK5Roc6Q6AoS7auzps4QDt0i4fu1lYVWThFP7Z4HSIpspC4cCMmyLeQR+nu4/GOvAOeAwYn+dQ9zWf/o0vtBSdIvE0KBpkvmfg7AKyY3i5T85eckLzRZS/NICvZnrBdze8kdMN8AWAj4V1gVfgkxFcwhqX8EcAFGeISYPl7tLtXb7jl2dZkJTww7FoyzFelLRsgzwm4tmu0NbcBMz6tVtiPx9Z5kvR8VoXPqvDjUe+oUKI+yjRDPa+P1AkSjwyx2IZQAW/+jHZ+3vd9EGbvlFIyHlsX1dqDPPznhpSSTU+1EjpBMiRDzEwTM3vCdXy1eljC7u/eJpSpiyXN+nPLyiMAiMcUaSeUE5IS2Guvaz1SN1yeuWF+9iiETpAMAT4AcNDZxd+E+y6+NsKrLztzYpwD6rD5gGtLGgC4TnuH7WqhM4aeZS0XbpitPZc6s9RD19ViE54macDvWRV+M47Pq1oQY7/qgZwg8ZwgGb44zl+XcvfVggjfSIgpAJAQ05Lg0gmSD43f1qpFTRiPrQhAtDWputGpxgpp1p8DHAEcNavFg9vEq8+9H7e6621iZ3BP89ngJJ92alQX/gLMKt2XTOFMygAAAABJRU5ErkJggg==") no-repeat;
	            background-size: 100%;
	        }
	
	        .txt-item {
	            width: 400rpx;
	            line-height: 21px;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
				margin-left: 20rpx;
	            text {
	
	                display: inline-block;
	                line-height: 50rpx;
	                font-size: 24rpx;
	                color: #1677ff;
	                margin-left: 16rpx;
	
	                &::after {
	                    content: "";
	                    display: inline-block;
	                    width: 2rpx;
	                    height: 12rpx;
	                    margin-left: 16rpx;
	                    background: #1677ff;
	                }
	            }
	        }
	    }
	
	    .btn {
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 120rpx;
	        height: 48rpx;
	        background: #FFFFFF;
	        border-radius: 8rpx 8rpx 8rpx 8rpx;
	        font-size: 24rpx;
	        color: #333333;
	
	        &::after {
	            content: "";
	            display: block;
	            width: 0;
	            height: 0;
	            margin-left: 6rpx;
	            border-top: 12rpx solid #333;
	            border-left: 12rpx solid #fff;
	            border-right: 12rpx solid #fff;
	        }
	    }
	}
	.search-content {
	    width: 100%;
	    background: #fff;
	    border-top-left-radius: 28rpx;
	    border-top-right-radius: 28rpx;
	    overflow: hidden;
	
	    .head-title {
	        width: 100%;
	        height: 96rpx;
	        line-height: 96rpx;
	        text-align: center;
	        font-size: 36rpx;
	        color: #333;
			font-weight:550;
			margin-top:10rpx;
			position:relative;
	    }
	
	    .item-content {
	        padding: 0 0 0 30rpx;
	
	        .s-line {
	            position: relative;
	            width: 630rpx;
	            margin: 15rpx auto 45rpx;
	            height: 2rpx;
	            background: #FAFAFA;
	
	            &:before {
	                content: "";
	                display: block;
	                position: absolute;
	                left: -85rpx;
	                top: -16rpx;
	                width: 32rpx;
	                height: 32rpx;
	                border-radius: 50%;
	                background: #EEF1F8;
	            }
	
	            &::after {
	                content: "";
	                display: block;
	                position: absolute;
	                right: -58rpx;
	                top: -16rpx;
	                width: 32rpx;
	                height: 32rpx;
	                border-radius: 50%;
	                background: #EEF1F8;
	            }
	        }
	
	        .title {
	            font-size: 28rpx;
	            color: #333333;
	            padding: 30rpx 0 20rpx;
	        }
	
	        .options {
	            display: flex;
	            flex-wrap: wrap;
	
	            .v-line {
	                border-bottom: 1px dotted #f1ececb8;
	                margin: 26rpx 0;
	            }
	
	            .item {
	                position: relative;
	                min-width: 170rpx;
	                margin-right: 30rpx;
	                height: 76rpx;
	                text-align: center;
	                line-height: 76rpx;
	                background: #F5F5F5;
	                margin-bottom: 30rpx;
	                padding: 0 20rpx;
	                border-radius: 12rpx;
	                font-size: 28rpx;
	                color: #333333;
	
	                &.disable {
	                    color: #C6C6C6;
	                    background: #F8F8F8;
	                }
	
	                &.on {
	                    background: #E7F1FF;
	                    color: #1677ff;
	
	                }
	            }
	        }
	    }
	
	    .btn-wrap {
	        display: flex;
	        justify-content: center;
	        padding-top: 10rpx;
	        padding-bottom: 40rpx;
	
	        .btn {
	            width: 688rpx;
	            height: 88rpx;
	            line-height: 88rpx;
	            text-align: center;
	            background: #1677ff;
	            font-size: 32rpx;
	            color: #fff;
	            border-radius: 60rpx;
	        }
	    }
	}
.s_close{position:absolute;top:30rpx;right:6%;width:30rpx;height:30rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjkzQkY4QkFCMjY0MTFGMDlGOThGMzcyM0VCRTJGMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjkzQkY4QkJCMjY0MTFGMDlGOThGMzcyM0VCRTJGMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTNCRjhCOEIyNjQxMUYwOUY5OEYzNzIzRUJFMkYyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTNCRjhCOUIyNjQxMUYwOUY5OEYzNzIzRUJFMkYyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvssjGYAAAO/SURBVHjatJf7a5V1HMef5bN2tduObjp1hMlOTbCpaKTifpI0b1EKXgo0U4Lw/0j8ZSoohkpFKjLvUYrWREX8Qa0oQaw5O7Yzt45jbW7u4nZ8f+R14MvDOdtz9PSB13jOs+37/n6u3+/Ji0aj2zzPaxenxF9i2Mu9lYo66BG/+foxT3SLAXFUtORY9AUxWywTM0WvKDHhWlEkqsSgaBD/5kj0Rdb/VKzms0U34bMjs6jYIvLFd+JBDoTfYc1FiJr9IS6PiUQiteTgZVEhyghHC/l41vDOFRvEKtbuE1fEAXHehBOEOErIJxL2TnFH9GcpmifeFl8gWsJ7E90lfhRtJhzXQ5xqnuR4Pk4kRbN4lIXwfLFZvC9e5d1ZPD2DQ0kTHtLDfUJbgrcW+smiXHSJfwj/SJZPIW0U68QrTni/EqdZ66mZcOrZiumuvRNviUIxXkwl17dpuUw2S2wVK4ia2UWxQ5yjZb10whbWBK2U74S9nJANsrG+NKJzaJkPxGuO6H7xfVA0KJyyNhEjVNWiQEwRlfRgM5tIVe+btMzH4iVhqftV7BQnMnVGOmEPgTjP1YS9HPFOejH1O6velY6nl8Qe8YOb06D5I+TsBq1hLbaENnuXdHSQ7/lMpAieXhffiOPpwhtW2CNk9fSyDYNixMsI9wREk4jWZ8pp2FC7BdcO3bRZFUyh1xOIfU2f/hem2f2QQ+EavV5BXoucGR/nYGnIdqaGtQHyGLRhp8pD22ihTtkMsUYsZKLlBTafz6ZaRxkyoUNti74h1lNcZeSwiYKz0L/O7ycz9c6FOdVG83i6+Fx8SAWn+nQ7g7+HaBTSbjbtHoo/M6QllMc1TKPVDA+zX8QhcZLPCTa0lApfyEk2gOdd2Xo8jTG4gQXNbjLwjzvz2oTvkYIaUlOF5/c5z4fCCtsCm8RH5NBjOOxDNBHo81YmWQH1UIhwhN5Pe3MNCk+lUDaSsyS7tlPmIIMknf2NeITQF7NWKf/TFqx2PxDez2ib8by7JXaHvHleZaN2YVhLy9WhUciVZ8D1eAzh/YRCqnIK6VtxmHCOZkN43uWEeyztVsKGYqlh43MbXMpBnvK0idl7aITwZrKfKT5bezHjdTmbsd6/YJVvHn/JH1Q69969hLfVy96SVHQ7ua4h7BVgvd/lc0cqdnJ6BJ7nq4zlspFRauFewDXqPSo84n6TiHEFfV5R9/BoJPePcTCPm2ivz2Fv0+YncYwLXa6snxFbRE9Pp8jiPvfeDg7x2P/wFbWPVitAx3L8+xMBBgBa0QNtbOSplwAAAABJRU5ErkJggg==") center no-repeat;
background-size:30rpx;
}
</style>