<template>
	<view class="pages">

		<view class="top">

			<view class="top-item">
				<view class="top-item-drop"></view>
				<view class="top-item-text">
					<text class="top-item-text1">仓库名称：</text>
					<text class="top-item-text2">{{info.warehouseName}}</text>
				</view>
			</view>

			<view class="top-item" style="margin-top: 20px;">
				<view class="top-item-drop"></view>
				<view class="top-item-text">
					<text class="top-item-text1">异常时间：</text>
					<text class="top-item-text2">{{info.exceptionTime}}</text>
				</view>

			</view>

			<view class="top-item" style="margin-top: 20px;">

				<view class="top-item-bom">
					<text class="top-item-bom-text1" @click="textClick('1')">联系库房</text>
					<text class="top-item-bom-text2" @click="textClick('2')">工作派单</text>
				</view>


			</view>

		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">

			<view style="padding-bottom: 50px;">

				<view v-for="(item,index) in info.dataList" class="newslist">

					<view class="list-item">
						<view class="list-item-top">
							<text class="list-item-top-text1">摄像头：</text>
							<text class="list-item-top-text2">{{item.name}}</text>
							<text class="list-item-top-text3" @click="openApplet(item.name)">查看设备</text>
						</view>

						<view class="list-item-bom">

							<view class="list-item-image">
								<image class="img" :src="item.startImage" mode="aspectFill"
									@click="amplifyImage(item.startImage)"></image>
								<text class="time">{{item.startTime}}</text>
							</view>

							<view class="content">
								<text class="content-text1">{{item.similarity}}</text>
								<text class="content-text2"> 相似度 </text>
							</view>

							<view class="list-item-image">
								<image class="img" :src="item.endImage" mode="aspectFill"
									@click="amplifyImage(item.endImage)"></image>
								<text class="time">{{item.endTime}}</text>
							</view>


						</view>


					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tokenValue: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				params: {
					sid: "",
					// sid: "",
					wxCode: "",
				},

				info: {
					warehouseSid: "",
					warehouseName: "",
					exceptionTime: "",
					linkers:[],
					dataList: [
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头1",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头2",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头3",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头4",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头5",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头6",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头7",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },
						// {
						// 	url1: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time1: "2023-04-06  16:00",
						// 	ratio: "80%",
						// 	name: "摄像头8",
						// 	url2: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
						// 	time2: "2023-04-06  16:00",
						// },


					]
				}
			}
		},
		onLoad(option) {

			this.params = {
				sid: option.sid
			}
			console.log("sid", this.params.sid)

			wx.hideHomeButton()
			this.init()

			uni.request({
				// 组装请求地址
				url: "https://supervise.yxtsoft.com/monitorapi/device/getToken",
				// 请求方式 GET POST
				method: "GET",
				header: {
					// 传参方式
					'content-type': "application/x-www-form-urlencoded"
				},
				// 具体参数
				data: {},
				success: res => {
				
					this.tokenValue = res.data.data
						console.log("tokenValueres", this.tokenValue)
				},
				fail: (err) => {},
				complete: () => {}
			});
		},
		methods: {
			// 禁止滑动
			preventHandler() {
				return
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

			init() {
				let that = this
				wx.login({
					success: function(res) {
						if (res.code) {
							console.log('Http网络请求信息', {
								"wxCode": res.code
							})

							that.params.wxCode = res.code
							that.getData(that.params)
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络错误，请退出后重新进入。",
							icon: 'none'
						})
					}
				});
			},
			getData(data) {
				console.log("data", data)
				this.$api.getGoodsExceptionInfo(data).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)

					this.info.warehouseSid = resp.shSid
					this.info.warehouseName = resp.shName
					this.info.exceptionTime = resp.messageTime
					this.info.linkers = resp.linkers

					var str = resp.text.substring(1, (resp.text.length - 1))

					console.log('1111', str)

					var str2 = str.split("DeviceImages")
					console.log('222', str2)

					for (var i = 0; i < str2.length; i++) {

						var item = str2[i]

						if (item) {

							var str3 = item.split(", ")
							console.log('3333', str3)


							var endImage = str3[0].substring(10)
							console.log('endImage', endImage)

							var endTime = str3[1].substring(8)
							console.log('endTime', endTime)

							var name = str3[2].substring(5)
							console.log('name', name)

							var similarity = str3[3].substring(11)
							console.log('similarity', similarity)

							var startImage = str3[4].substring(11)
							console.log('startImage', startImage)

							var startTime = str3[5].substring(10, str3[5].length - 1)
							console.log('startTime', startTime)

							this.info.dataList.push({
								endImage: endImage,
								endTime: endTime,
								name: name,
								similarity: similarity,
								startImage: startImage,
								startTime: startTime,
							})

						}
					}



				}).catch(e => {
					console.log('eeeee', e)
				})
			},
			textClick(index) {
				switch (index) {
					case "1":
						// 联系库房
						// uni.showToast({
						// 	icon: "none",
						// 	title: '联系库房',
						// 	duration: 2000,
						// });
						uni.navigateTo({
							url: '../index/ContactWarehouse?info='+JSON.stringify( this.info),
						});
						break;
					case "2":
						// 工作派单
						uni.showToast({
							icon: "none",
							title: '工作派单',
							duration: 2000,
						});
						// uni.navigateTo({
						// 	url: '../index/ReadWork'
						// });
						break;
					default:
						break;
				}
			},
			amplifyImage(imgUrl) {
				wx.previewImage({
					current: '',
					urls: [imgUrl]

				})
			},
			openApplet(name) {

				var _this = this

				// var deviceValue = "" //  设备序列号
				// var channelNoValue = "" //  通道号，若为直连IPC通道号填写1
				var modelTypeValue = "" //  直播模板，全量full,极简simple,语音voiceType,安防security，默认全量
				var backModelTypeValue = "" // 回放模板，全量full,极简simple，默认全量
				var startTimeValue = Date.parse(new Date()) - 24 * 60 * 60 *
					1000 //   回放开始时间，开始时间必须<结束时间<当前时间，否则报错时间参数错误并且关闭半屏小程序或者回到上一级页面 时间为13位时间戳：2022-09-14 20:52:05 == 1663159925000
				var endTimeValue = Date.parse(new Date()) //   回放结束时间 时间为13位时间戳：2022-09-14 20:52:05 == 1663159925000
				var playbackSourceValue = "" //   指定回放源，cloud云存储，local本地，默认使用者可自由切换回放源
				// var envVersion = "release" //  要打开的小程序版本，默认release即正式版

				uni.request({
					// 组装请求地址
					url: "https://supervise.yxtsoft.com/monitorapi/device/getDeviceListBySid",
					// 请求方式 GET POST
					method: "GET",
					header: {
						// 传参方式
						'content-type': "application/x-www-form-urlencoded"
					},
					// 具体参数
					data: {
						"sid": _this.info.warehouseSid,
						"deviceName": name
					},
					success: res => {
						console.log("请求res", res)

						// deviceValue = res.data.nvrSerial
						// channelNoValue = res.data.channelNo

						console.log("tokenValue", _this.tokenValue)
						console.log("deviceValue", res.data.data.nvrSerial)
						console.log("channelNoValue", res.data.data.channelNo)
						console.log("startTimeValue", startTimeValue)
						console.log("endTimeValue", endTimeValue)

						wx.openEmbeddedMiniProgram({

							appId: 'wxf2b3a0262975d8c2',

							path: '/pages/live/live?accessToken=' + _this.tokenValue + '&deviceSerial=' +
								res.data.data.nvrSerial + '&channelNo=' + res.data.data.channelNo + '&modelType=' +
								modelTypeValue + '&backModelType=' + backModelTypeValue +
								'&startTime=' +
								startTimeValue + '&endTime=' + endTimeValue + '&playbackSource=' +
								playbackSourceValue,

							envVersion: 'release'

						})

					},
					fail: (err) => {},
					complete: () => {}
				});


			}
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		overflow: auto;

		.top {
			display: flex;
			flex-direction: column;
			padding: 15px 20px;

			.top-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.top-item-drop {
					background: #1684FC;
					border-radius: 50%;
					width: 8px;
					height: 8px;
				}

				.top-item-text {
					margin-left: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;

					.top-item-text1 {
						font-size: 15px;
						color: #666;
					}

					.top-item-text2 {
						font-size: 18px;
						color: #000;
						font-weight: 600;
						font-family: sans-serif;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.top-item-bom {
					display: flex;
					flex-direction: row;
					width: 100%;
					margin-left: 30px;
					margin-right: 30px;
					justify-content: space-between;

					.top-item-bom-text1 {
						padding: 5px 20px;
						color: #2F96E1;
						font-size: 14px;
						border: 1px solid #2F96E1;
						border-radius: 5px;

					}

					.top-item-bom-text2 {
						padding: 5px 20px;
						color: #fff;
						font-size: 14px;
						background: #2F96E1;
						border-radius: 5px;
					}
				}

			}
		}

		.scroll-Y {
			overflow-y: hidden;
			height: 90vh;

			.newslist {
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				padding-left: 10px;
				padding-right: 10px;

				.list-item {
					margin-top: 10px;
					display: flex;
					flex-direction: column;
					background: #fff;
					border-radius: 5px;

					.list-item-top {
						display: flex;
						flex-direction: row;
						align-items: center;
						border-bottom: 1px solid #ECECEC;
						padding-bottom: 10px;
						margin-top: 10px;
						padding-left: 10px;

						.list-item-top-text1 {
							font-size: 15px;
							color: #666;
						}

						.list-item-top-text2 {
							font-size: 18px;
							flex: 1;
							margin-right: 10px;
							color: #000;
							font-weight: 600;
							font-family: sans-serif;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.list-item-top-text3 {
							margin-right: 10px;
							font-size: 12px;
							color: #2F96E1;
							border: 1px solid #2F96E1;
							border-radius: 5px;
							padding: 5px 10px;
						}
					}

					.list-item-bom {
						display: flex;
						flex-direction: row;
						margin-bottom: 15px;
						margin-top: 10px;
						margin-left: 15px;
						margin-right: 15px;

						.list-item-image {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.img {
								border-radius: 8px;
								width: 100%;
								height: 70px;
							}

							.time {
								margin-top: 8px;
								color: #1684FC;
								font-size: 10px;
							}
						}

						.content {
							margin-top: 5px;
							height: 65px;
							margin-left: 10px;
							margin-right: 10px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border: 1px solid #FC8C05;
							border-radius: 50%;
							padding-left: 13px;
							padding-right: 13px;

							.content-text1 {
								font-size: 18px;
								font-weight: 600;
								font-family: sans-serif;
								color: #ff5500;
							}

							.content-text2 {
								font-size: 12px;
								color: #000;
							}
						}
					}


				}

			}
		}

	}
</style>