<template>
	<view class="content">
		<u-navbar title="测评报告" @leftClick="leftClick" :autoBack="false">
		</u-navbar>
		<view class="header">
			<image src="../../static/images/baogao-bg.png"></image>
		</view>
		<view class="record-con">
			<view class="title">{{ table.tableInfo.tableName == null ? '' : table.tableInfo.tableName }}评定结果</view>
			<view class="tip">该报表测评仅供参考</view>

			<view class="text">
				<p style="text-indent: 0;">尊敬的家长：</p>
				<p>您好！</p>
				<!-- <p>以下是您孩子各项指标的具体得分：</p> -->
				<p>感谢您的测评参与，以下是您孩子各项的具体得分：</p>
			</view>
			<view class="assess-list">
				<!--        <view class="assess-list-title">-->
				<!--					<view class="one-assess">类型</view>-->
				<!--					<view class="one-assess">得分</view>-->
				<!--				</view>-->
				<!--				<view v-for="(item,index) in reportData" :key="index">-->
				<!--					<view class="one-assess-right">{{ item.optionIndex.replace('型','')+'型' }}</view>-->
				<!--				</view>-->
				
				<view class="assess-list-content" v-for="(item,index) in reportData" :key="index">
					<view class="one-assess-right">{{ item.optionIndex }}</view>
					<view class="one-assess-right score">{{ item.score }}</view>
				</view>
			</view>

			<view class="table">
				<radar ref="radar" :categories="categories" :series="series"></radar>
			</view>
			<view class="text parse">
				<u-parse :content="reportContext"></u-parse>
			</view>
			<view class="text">
				最后，我们对您的参与表示诚挚的谢意！祝您的孩子健康成长！
			</view>
			<u-divider text="分割线" lineColor="#2979ff" textColor="#2979ff" :dot="true"></u-divider>
			<view class="text">
				<p style="text-indent: 0;">参考资料：</p>
				<p>1、Zhai J, Li X, Zhou Y, et al. Correlation and predictive ability of sensory characteristics and
					social interaction in children with autism spectrum disorder. Frontiers in Psychiatry.
					2023;14:1056051.</p>
				<p>2、Turnbull A, Garfinkel SN, Ho NSP, Critchley HD, Bernhardt BC, Jefferies E, et al.  Word up –
					Experiential and neurocognitive evidence for associations between autistic symptomology and a
					preference for thinking in the form of words. Cortex. 2020;128:88–106. </p>
				<p>3、Relationship between sensory characteristics and cortical thickness/volume in autism spectrum
					disorders</p>
				<p>4、Kojovic N, Ben Hadid L, Franchini M, Schaer M. Sensory processing issues and their association with
					social difficulties in children with autism spectrum disorders. Journal of clinical medicine.
					2019;8(10):1508. </p>
				<p>5、Meng F-C, Xu X-J, Song T-J, et al. Development of an autism subtyping questionnaire based on social
					behaviors. Neuroscience bulletin. 2018;34:789-800.</p>
				<p>6、Defining the Behavioral Phenotype of Asperger Syndrome</p>
				</p>
			</view>
		</view>
		<view class="device-con">
			<view class="device-title">
				<view class="icon"></view>
				<view class="name">推荐设备</view>
			</view>
			<view class="list">
				<view class="one-device" @click="deviceClick(item.id)" v-for="item,index in locationList" :key="index">
					<view class="left">
						<image class="left-img" src="@/static/images/article.png"></image>
						<view class="distance">{{item.distance/1000}}km</view>
					</view>
					<view class="right">
						<view class="right-title">{{item.locationName}}</view>
						<view class="right-num">设备数量：{{item.equipmentNums}}</view>
						<view class="right-address">
							{{item.locationState + item.locationCity+item.locationDistrict + item.locationAddress }}
						</view>
					</view>
					<view class="tuijian">
						<image src="@/static/images/tuijian.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="localShow" @confirm="localModalConfirm" @cancel="localModalCancel" confirmText="前往"
			:showCancelButton="true">
			<view class="slot-content">您已拒绝位置授权，请在小程序我的-隐私权限中自行打开授权</view>
		</u-modal>
	</view>
</template>

<script>
	// let music = uni.createInnerAudioContext(); //创建播放器对象
	import radar from '@/components/radar/radar.vue'
	import {
		openPay,
		prepayment,
		getAdInfo
	} from "@/common/api/api.js"
	export default {
		components: {
			radar
		},
		data() {
			return {
				showModal: false,
				recordId: null,
				table: {
					tableInfo: {
						tableName: null
					}
				},
				deptId: uni.getStorageSync('CodeDeptId') ? uni.getStorageSync('CodeDeptId') : "",
				tableType: '', // 量表类型 table1 2 3
				reportData: [],
				reportType: '', // 量表1的测量类型结果
				reportContext: null, // 报告内容
				deviceList: [{
					title: '设备名',
					content: '具体位置具体位置具体位置具体具体位置具体位置具体位置',
				}, {
					title: '设备名1',
					content: '具体位置具体位置具体位置具体具体位置具体位置具体位置',
				}],
				categories: [],
				series: [{
					name: '指标分布',
					data: []
				}],
				locationList: [],
				location: {},
				localShow: false, //定位未授权提示弹框
				user: {},
				TimerOut: null,
				isAdVisible: false,
				currentTime: 0, // 当前视频播放时间  
				videourl: '',
				videoLastTime: 0,
				adStatus: null
			}
		},
		onLoad(option) {
			if (uni.$u.test.isEmpty(option.recordId)) {
				return uni.switchTab({
					url: '/pages/tabbar/home/Home'
				})
			}
			this.recordId = option.recordId;

			this.adStatus = option.adStatus

		},
		onShow() {
			console.log(this.adStatus);
			//查询支付信息
				if (!this.adStatus) {
					let param = {
						lgt: uni.getStorageSync("lon"),
						lat: uni.getStorageSync("lat")
					}
					
					if(uni.getStorageSync("chooseVido")){
						uni.setStorageSync("chooseVido",false)
						//关闭支付
						getAdInfo(param).then(adInfo => {
							if (adInfo.data) {
								uni.navigateTo({
									url: '/tablePackage/pages/vdo?videourl=' +
										this.baseUrl +
										adInfo.data.video + "&type=back" +
										"&recordId=" + this
										.recordId
								})
							}
						})	
					}else{
						this.getRecordInfo();
						this.$nextTick(() => {
							this.$refs['radar'].showRadar("canvasRadar", this.categories, this
								.series)
						})
					}
		
				} else {
					this.getRecordInfo();
					this.$nextTick(() => {
						this.$refs['radar'].showRadar("canvasRadar", this.categories, this
							.series)
					})
				}

			},
			onUnload() {
					clearTimeout(this.TimerOut)
				},
				methods: {
					leftClick() {
						console.log('57');
						uni.switchTab({
							url: '/pages/tabbar/home/Home'
						})
					},
					ignore() {
						this.showModal = false;
					},
					sure() {
						if (this.user.longitude && this.user.latitude) {
							this.showModal = false;
							this.updateUserLocation();
							// #ifdef MP-WEIXIN
							this.getLocationList()
							// #endif
						} else {
							uni.showToast({
								icon: 'none',
								title: '地址不能为空'
							})
						}
					},
					async updateUserLocation() {
						const res = await this.$myRequest({
							method: 'PUT',
							url: '/system/user/profile/updateUserLocation',
							data: {
								longitude: this.user.longitude,
								latitude: this.user.latitude,
								state: this.user.state, //省
								city: this.user.city, // 市
								district: '', //县
								address: this.user.address
							}
						})
						uni.showToast({
							icon: "none",
							title: "可前往设备页查看设备地图"
						})
						console.log('97', res)
					},
					chooseAddress() {
						uni.chooseLocation({
							latitude: this.location.latitude,
							longitude: this.location.longitude,
							success: (data) => {
								console.log('98', data)
								this.user.address = data.address + data.name;
								this.user.latitude = data.latitude;
								this.user.longitude = data.longitude;
								this.user.state = data.address.split('省')[0] + '省';
								this.user.city = data.address.split('省')[1].split('市')[0] +
									'市';
							},
							fail: (data) => {
								console.log('104', data)
								this.localShow = true;
							}
						})
					},
					async getUserInfo() {
						const res = await this.$myRequest({
							url: '/getInfo'
						})
						this.user = res.data.user;
						if (this.user.longitude && this.user.latitude) {
							return;
						}
						//10秒钟后弹出弹窗
						this.TimerOut = setTimeout(() => {
							this.showModal = true;
						}, 10000)
					},
					//定位未授权提示弹框前往
					localModalConfirm() {
						this.localShow = false;
						uni.switchTab({
							url: '/pages/tabbar/mine/Mine'
						})
					},
					//定位未授权提示弹框关闭
					localModalCancel() {
						this.localShow = false;
					},
					async getRecordInfo() {
						uni.showLoading({
							title: '获取报告中'
						})
						// 获取问卷记录
						const res = await this.$myRequest({
							url: '/system/record/getRecordInfo/' + this.recordId,
						})
						console.log('126', res.data.data.reportResult)
						console.log('127', res.data.data.totalScore)
						console.log('128', res.data.data.answer);
						console.log('129', res.data.data.reportData);
						// 校验是否存在记录
						if (!res.data.hasOwnProperty('data')) {
							uni.showToast({
								title: '无此测量记录',
								icon: 'error',
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/tabbar/home/Home'
										})
									}, 1500)

								}
							})
							return
						}
						const userInfo = await this.$myRequest({
							url: '/getInfo'
						})
						this.user = userInfo.data.user;
						// 校验是否本人回答的记录
						if (res.data.data.userId != userInfo.data.user.userId) {
							uni.showToast({
								title: '非本人测量记录',
								icon: 'error',
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/tabbar/home/Home'
										})
									}, 1500)

								}
							})
							return
						}



						this.tableType = res.data.data.tableType;

						this.table = JSON.parse(uni.getStorageSync(res.data.data.tableType));

						let reportData = JSON.parse(res.data.data.reportData);

						/*  */

						this.reportData = reportData;
						console.log('这是个什么玩意', reportData);
						// 填充雷达图
						for (let i = 0; i < reportData.length; i++) {
							let text = '';
							if (reportData[i].optionIndex.length > 2) {
								text = reportData[i].optionIndex.slice(0, 9)
							} else {
								text = reportData[i].optionIndex;
							}

							// this.categories.push(reportData[i].optionIndex);
							this.categories.push(text.replace('', '') + '');
							console.log('174', this.categories);
							this.series[0].data.push(reportData[i].score)

						}
						console.log('174', this.categories)
						console.log('175', this.series)

						if (res.data.data.tableType == "table1") {
							console.log("res", res.data.data.reportResult);
							const report = await this.$myRequest({
								url: '/system/answer1/getReport/' + res.data.data
									.reportResult + "?recordId=" + this
									.recordId
							})
							console.log(report);


							this.reportContext =
								'根据您对孩子的日常行为评分，经综合统计评定，您的孩子在社交分型上属于<text class="underline">' + res.data
								.data
								.reportResult.replace('A', '').replace('B', '') + '</text>' + (report
									.data.data ? report.data
									.data.answerDesc : "")
						} else {
							this.reportContext = "本次测评总分为" + res.data.data.totalScore + "，";
							this.reportContext += res.data.data.reportResult + "。";
						}




						// this.getReport()
						uni.hideLoading()
						this.TimerOut = setTimeout(() => {
							this.showModal = true;
						}, 10000)
					},
					async getLocationList() {
						// #ifdef MP-WEIXIN
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						// #endif
						// uni.authorize({
						// 	scope: 'scope.userLocation',
						// 	success: () => {
						uni.getLocation({
							type: 'wgs84',
							success: (res) => {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								this.location = res
								this.locationList = [];
								this.locationListByLl()
								uni.hideLoading()
							},
							fail: (data) => {
								console.log('104', data)
								this.localShow = true;
							}
						});
						// 	}
						// })
					},
					// 查询医疗设备场所列表(距离由近至远)
					async locationListByLl() {
						const res = await this.$myRequest({
							url: '/system/location/locationListByLl/?longitude=' + this
								.location.longitude +
								'&latitude=' + this.location.latitude +
								'&pageNum=1&pageSize=8',
						})
						this.locationList = res.data.rows
					},
					deviceClick(id) {
						uni.navigateTo({
							url: "/devicePackage/pages/DeviceList?equipmentLocationId=" + id
						})
					}
				},
		}
</script>

<style lang="scss">
	.content {
		.header {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.record-con {
			line-height: 40rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			// text-align: center;
			box-shadow: 0px 2px 6px 0px rgba(228, 228, 228, 100);
			padding: 30rpx 40rpx;
			margin: 0 40rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 40rpx;
				text-align: center;
				font-weight: 600;
			}

			.tip {
				margin-top: 10rpx;
				color: rgba(82, 81, 81, 1);
				font-size: 24rpx;
				text-align: center;
			}

			.text {
				color: rgba(82, 81, 81, 1);
				font-size: 28rpx;
				margin-top: 30rpx;
				text-indent: 2em;

				&.parse {
					margin-top: 0px;
				}
			}
		}

		.device-con {
			padding-bottom: 40rpx;
		}

		.device-title {
			display: flex;
			align-items: center;
			margin: 30rpx 40rpx;

			.icon {
				width: 6px;
				height: 20px;
				line-height: 20px;
				border-radius: 50px;
				background-color: rgba(40, 124, 206, 1);
				text-align: center;
				margin: 0rpx 10rpx 0rpx 0rpx;
			}

			.name {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				text-align: left;
				font-weight: 600;
			}
		}

		.device-one {
			line-height: 20px;
			border-radius: 15px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 15px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 5px 0px rgba(230, 230, 230, 100);
			margin: 0px 30rpx 16rpx;

			.img {
				width: 112px;
				height: 90px;
				border-radius: 6px;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				width: 65%;

				.title {
					color: rgba(16, 16, 16, 1);
					font-size: 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: left;
				}

				.info {
					color: rgba(140, 139, 139, 1);
					font-size: 13px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: left;
				}
			}
		}
	}

	.assess-list {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 20rpx;
		font-size: 14rpx;

		.assess-list-title {}

		.assess-list-content {}

		.one-assess,
		.one-assess-right {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			// width: 110rpx;
			height: 100rpx;
			font-size: 24rpx;
			// padding: 6rpx 25rpx;
			border: 1px solid #000000;
			font-weight: bold;
			padding: 0 3px;
			width: 120rpx;

			&.score {
				font-weight: 100;
			}
		}

		.one-assess-right:nth-child(1n) {
			// border-left: none;
		}

		.one-assess:nth-child(2n) {
			border-top: none;
		}

		.one-assess-right:nth-child(2n) {
			border-top: none;
		}
	}

	.list {
		margin: 0px 40rpx;

		.one-device {
			padding: 20rpx;
			margin-bottom: 24rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			box-shadow: 0px 2px 8px 1px rgba(228, 228, 228, 100);
			display: flex;
			justify-content: space-between;
			position: relative;

			.left {
				position: relative;
				width: 268rpx;
				height: 182rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;

				.left-img {
					width: 100%;
					height: 100%;
				}

				.distance {
					position: absolute;
					bottom: 0rpx;
					width: 250rpx;
					height: 24px;
					line-height: 20px;
					border-radius: 0rpx 0rpx 10rpx 10rpx;
					background-color: rgba(16, 16, 16, 0.51);
					color: rgba(16, 16, 16, 1);
					font-size: 14px;
					text-align: center;
					color: #fff;
				}
			}

			.right {
				width: 61%;

				// margin-left:20rpx;
				.right-title {
					color: rgba(16, 16, 16, 1);
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: left;
					font-weight: bold;
				}

				.right-num {
					color: rgba(16, 16, 16, 1);
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: left;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}

				.right-address {
					color: rgba(113, 113, 113, 1);
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: left;

				}
			}

			.tuijian {
				position: absolute;
				top: 0;
				right: 0;
				width: 96rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.underline {
		font-weight: bold;
		padding-bottom: 3rpx;
		border-bottom: 1px solid #000
	}

	.tip-area {
		width: 90%;
		height: 700rpx;
		// height: 620rpx;
		position: fixed;
		top: 200rpx;
		left: 5%;
		// background-color: #fff;
		// padding-bottom: 20px;

		&.one {
			border-radius: 20px;
			box-shadow: 0px 2px 0px #E1E2FF, inset 0px -4px 2px #D1D3FF;
		}

		.one-tip {
			// position: relative;
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 46rpx;

			.tip-img {
				width: 100%;
				height: 300px;
				// height: 250px;

				// background: #FFFFFF;
				// mix-blend-mode: normal;
				// box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
				image {
					width: 100%;
				}
			}
		}
	}

	.tip-content {
		width: 100%;
		color: #333;
		font-size: 14px;
		position: absolute;
		top: 27%;
		background: #fff;
		padding: 0px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.one-row {
			width: 89%;

		}

		.row {
			width: 89%;

			text-indent: 2em;
		}

		.four-row {
			width: 89%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				margin-right: 30rpx;
			}

			input {
				// width: 70%;
			}

			.right-img {
				width: 30rpx;
				height: 30rpx;
				float: right;
			}
		}
	}

	.btn-area {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.tip-button {
		font-size: 28rpx;
		background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
		mix-blend-mode: normal;
		box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
		border-radius: 22px;
		text-align: center;
		color: #FFFFFF;
		width: 28%;
		padding: 5px 0px;
		margin: 0 auto;
		margin-top: 10rpx;
	}
</style>