<template>
	<view class="bysContent" style="background-color: white;min-height: 100%;">
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
		<headers :showBack="true" :themeType="'white'">
			<view class="headerName">
				{{projectDetail.projectName}}
				<!-- <picker mode="selector" :range="devList" @change="changeDev" range-key="laboratoryName" :value="devIndex">
					<view class="selectBox" v-if="devList.length>0">
						<text>{{devList[devIndex].laboratoryName}}</text>
						<uni-icons2 class="arrow" type="arrowdown" size="15" color="white"></uni-icons2>
					</view>
				</picker> -->
			</view>
		</headers>
		<!-- <scroll-view scroll-y="true" class="pageContent"> -->
		<image src="/static/titleBg.png" class="titleBg"></image>
		<!-- <view class="" style="position: relative;
    color: white;
    text-align: center;
    font-size: 28rpx;">
			{{projectDetail.projectName}}
		</view> -->
		<view class="" style="color: white;text-align: center;position: relative;z-index: 2;">
			<picker style="border: 1px solid white; border-radius: 40rpx; display: inline-block;padding: 10rpx 30rpx;" mode="selector" :range="devList" @change="changeDev" range-key="laboratoryName" :value="devIndex">
				<view class="selectBox" v-if="devList.length>0">
					<text class="">{{devList[devIndex].laboratoryName}}</text>
					<uni-icons2 class="arrow" type="arrowdown" size="15" color="white"></uni-icons2>
				</view>
			</picker>
			<image src="/static/alarm_set.png" class="alarm_set" @click="showSetAlarmDialog"></image>
		</view>
		
		<view class="realTimeBox">
			<view class="item" @click="viewMore">
				<view class="txt">
					实时温度°C 
				</view>
				<view class="num dev-state" v-if="devState == 2">离线</view>
				<view class="num" v-else>
					{{currentData.temperature?currentData.temperature:'--'}}
				</view>
			</view>
			<!-- <image src="/static/markRoomImg/sssj.png" class="titles"></image> -->
			<view class="item" @click="viewMore">
				<view class="txt">
					实时湿度%RH
				</view>
				<view class="num dev-state" v-if="devState == 2">离线</view>
				<view class="num" v-else>
					{{currentData.humidity?currentData.humidity:'--'}}
				</view>
			</view>
			<view class="item" @click="viewMoreAlarm">
				<view class="txt">
					今日报警次数
				</view>
				<view class="num dev-state" v-if="devState == 2">离线</view>
				<view class="num" v-else>
					{{currentData.currentDayAlarmNum?currentData.currentDayAlarmNum:'--'}}
				</view>
			</view>
		</view>
		<view class="selectContent" v-if="devList.length>0&&devList[devIndex].videoList">
			<picker mode="selector" :range="devList[devIndex].videoList" @change="changeVideo" range-key="videoName" :value="videoIndex">
				<view class="selectVideoBox">
					<text class="videoName">{{devList[devIndex].videoList[videoIndex].videoName}}</text>
					<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
				</view>
			</picker>
		</view>
		<view class="moudleTitle2">
			实时视频
		</view>
		<video class="videoBox" id="myVideo" :src="videoUrl" controls autoplay v-show="hideVideo"></video>
		<view class="moudleTitle">
			<text class="moudleTitleItem moudleTitleItem1" :class="tabIndex==0?'active':''" @click="tabIndex=0">样品管理</text>
			<text class="moudleTitleItem moudleTitleItem2" :class="tabIndex==1?'active':''" @click="tabIndex=1">摄像头控制</text>
		</view>
		<view class="funcBox" v-show="tabIndex==0">
			<view class="funcItem" @click="viewData(1)">
				<view class="inner">
					<image src="/static/markRoomImg/yhz.png" class="img"></image>
					<view class="txt">
						养护中
					</view>
					<view class="num">
						{{currentData.sampleNum}}
					</view>
				</view>
			</view>
			<view class="funcItem" @click="viewData(2)">
				<view class="inner">
					<image src="/static/markRoomImg/dqyp.png" class="img"></image>
					<view class="txt">
						到期样品
					</view>
					<view class="num">
						{{currentData.expireSampleNum}}
					</view>
				</view>
			</view>
			<view class="funcItem" @click="viewData(6)">
				<view class="inner">
					<image src="/static/markRoomImg/cqtx.png" class="img"></image>
					<view class="txt">
						超期提醒
					</view>
					<view class="num">
						{{currentData.expireSampleNoticeNum}}
					</view>
				</view>

			</view>
			<view class="funcItem" @click="viewData(3)">
				<view class="inner">
					<image src="/static/markRoomImg/sjzyp.png" class="img"></image>
					<view class="txt">
						送检中样品
					</view>
					<view class="num">
						{{currentData.inspectionSampleNum}}
					</view>
				</view>
			</view>
			<view class="funcItem" @click="viewData(4)">
				<view class="inner">
					<image src="/static/markRoomImg/lsyhtz.png" class="img"></image>
					<view class="txt">
						历史养护<br />台账
					</view>
				</view>

			</view>
			<view class="funcItem" @click="viewData(5)">
				<view class="inner">
					<image src="/static/markRoomImg/lssjtz.png" class="img"></image>
					<view class="txt">
						历史送检<br />台账
					</view>
				</view>

			</view>
			<view class="funcItem" @click="goLocationFn">
				<view class="inner">
					<image src="/static/markRoomImg/cfwzsz.png" class="img"></image>
					<view class="txt">
						存放位置<br />设置
					</view>
				</view>

			</view>
			<view class="funcItem" @click="goSampleTypeFn">
				<view class="inner">
					<image src="/static/markRoomImg/yplxsz.png" class="img"></image>
					<view class="txt">
						样品类型<br />设置
					</view>
				</view>

			</view>
		</view>
		
		<view class="addBtn" @click="addFn" v-show="tabIndex==0">
			<image src="/static/icon-add-blue.png" class="img"></image>
			样品录入
		</view>
		<view class="videoOperateBox" v-show="tabIndex==1">
			<view class="box">
				<image src="/static/videoControlIcon/bg.png" class="bg"></image>
				<view class="pic top" :class="activeBtn=='top'?'active':''" @touchstart="activeBtn='top';controlVideoFn(0,1,0,'UP')" @touchend="clearTimer('UP')"></view>
				<view class="pic left" :class="activeBtn=='left'?'active':''" @touchstart="activeBtn='left';controlVideoFn(-1,0,0,'LEFT')" @touchend="clearTimer('LEFT')"></view>
				<view class="pic bottom" :class="activeBtn=='bottom'?'active':''" @touchstart="activeBtn='bottom';controlVideoFn(0,-1,0,'DOWN')" @touchend="clearTimer('DOWN')"></view>
				<view class="pic right" :class="activeBtn=='right'?'active':''" @touchstart="activeBtn='right';controlVideoFn(1,0,0,'RIGHT')" @touchend="clearTimer('RIGHT')"></view>
				<!-- <view class="pic center" @click="stop()"></view> -->
			</view>
			<view class="box2">
				<view class="zoom zoomin" :class="activeBtn=='zoomin'?'active':''" @touchstart="activeBtn='zoomin';controlVideoFn(0,0,1,'ZOOM_IN')" @touchend="clearTimer('ZOOM_IN')"></view>
				<view class="zoom zoomout" :class="activeBtn=='zoomout'?'active':''" @touchstart="activeBtn='zoomout';controlVideoFn(0,0,-1,'ZOOM_OUT')" @touchend="clearTimer('ZOOM_OUT')"></view>
			</view>
		</view>
		
		<br />
		<!-- </scroll-view> -->
		<dialogs ref="dialogs" :canClickMask="false">
			<!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
			 <template v-slot:content>
				 <view class="formBox2">
				 	<form @submit="formSubmit">
				 		<view class="uni-form-item">
				 			<view class="uni-form-label">
				 				<text class="star">*</text>是否接收报警通知
				 			</view>
				 			<view class="uni-form-input">
				 				<radio-group @change="radioChange">
									<label style="margin-right: 40rpx">
										<radio class="radios" name="isEnable" value="0" :checked="form.isEnable == 0" />是
									</label>
									<label>
										<radio class="radios" name="isEnable" value="1" :checked="form.isEnable == 1" />否
									</label>
								</radio-group>
				 			</view>
				 		</view>
						<view class="uni-form-item" v-show="form.isEnable == 1">
							<view class="uni-form-label">
								<text class="star">*</text>不接收通知原因
							</view>
							<view class="uni-form-input">
								<input class="uni-input" placeholder-class="cl" name="reason" :value="form.reason" placeholder="请输入" />
							</view>
						</view>
				 		<button form-type="submit" type="primary" class="btn submitBtn">保存</button>
						<view class="closeBtn" @click="closeDialogFn">
							关闭
						</view>
				 	</form>
				 </view>
			 </template>
			
		</dialogs>
	</view>
</template>

<script>
	import headers from "../../../components/headers/headers.vue"
	import dialogs from "@/components/dialog/dialog.vue"
	export default {
		components: {
			headers,dialogs
		},
		data() {
			return {
				projectDetail: {
					projectName: '',
					projectSn:''
				},
				devList: [],
				devIndex: 0,
				videoIndex: 0,
				currentData: {
					currentDayAlarmNum: 0,
					humidity: 0,
					sampleNum: 0,
					temperature: 0,
					expireSampleNoticeNum: 0,
					expireSampleNum: 0,
					inspectionSampleNum: 0
				},
				videoUrl: '',
				videoInfo: {},
				tabIndex:1,
				activeBtn:'',
				timer:null,
				form:{
					isEnable:'1',
					reason:''
				},
				hideVideo:true,
				devState: 1
				
			};
		},
		onLoad(options) {
			if(options.sn){
				this.projectDetail.projectSn=options.sn
				this.projectDetail.projectName=options.projectName
			}else{
				this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			}
			
			this.loadDevList()
		},
		methods: {
			radioChange(e){
				this.form.isEnable=e.detail.value
			},
			showSetAlarmDialog(){
				this.hideVideo=false
				this.$refs.dialogs.showFn()
			},
			closeDialogFn(){
				this.hideVideo=true
				this.$refs.dialogs.hideFn2()
			},
			viewMoreAlarm(){
				if(this.devList.length>0){
					uni.navigateTo({
						url:'alarmList?devSn='+this.devList[this.devIndex].devSn
					})
				}
			},
			viewMore(){
				if(this.devList.length>0){
					uni.navigateTo({
						url:'historyData?devSn='+this.devList[this.devIndex].devSn
					})
				}
			},
			clearTimer(opType){
				console.log('clearTimer')
				this.activeBtn=''
				// clearInterval(this.timer)
				if(this.videoInfo.deviceType!=2){
					uni.showToast({
						title:'该设备不是球机，不支持此操作',
						icon:'none'
					})
					return false
				}
				this.controlVideoFn_isc2(opType,1)
			},
			controlVideoFn(pan, tilt, zoom,opType){
				console.log('controlVideoFn')
				if(this.videoInfo.deviceType!=2){
					uni.showToast({
						title:'该设备不是球机，不支持此操作',
						icon:'none'
					})
					return false
				}
				switch (this.videoInfo.videoType){
					case 3:
						this.controlVideoFn_isc2(opType,0)
						break;
					case 4:
						this.controlVideoFn_dh(pan, tilt, zoom)
						break;
					default:
						uni.showToast({
							title:'暂不支持',
							icon:'none'
						})
						break;
				}
			},
			controlVideoFn_isc2(opType,action){
				let json = {
					itemId:this.videoInfo.itemId,
					opType: opType,
					opSize: 100,
					// opCode: 1,
					action:action
				};
				var that = this
				this.sendRequest({
					url: "xmgl/videoItem/setHikPtzControl",
					data: json,
					hideLoading:true,
					method: "post",
					success(res){
						// console.log('控制成功')
						uni.showToast({
							title:'控制成功',
							icon:'none'
						})
					}
				})
			},
			controlVideoFn_isc(opType){
				let json = {
					itemId:this.videoInfo.itemId,
					opType: opType,
					opSize: 100,
					opCode: 1
				};
				var that = this
				this.sendRequest({
					url: "xmgl/videoItem/getHikPtzControl",
					data: json,
					hideLoading:true,
					method: "post",
					success(res){
						// console.log('控制成功')
						uni.showToast({
							title:'控制成功',
							icon:'none'
						})
					}
				})
			},
			controlVideoFn_dh(pan, tilt, zoom){
				var code = '';
				var jsonStr = {
					pan: pan,
					tilt: tilt,
					zoom: zoom,
					duration: 100
				};
				let json = {
					ip: this.videoInfo.ip,
					port: this.videoInfo.port,
					username: this.videoInfo.username,
					password: this.videoInfo.password,
					chnnelcode: this.videoInfo.chnnelcode,
					jsonStr: JSON.stringify(jsonStr),
					data: new Date()
				};
				var that = this
				this.sendRequest({
					url: "xmgl/video/putPTZ",
					data: json,
					hideLoading:true,
					method: "get",
					success(res){
						// console.log('控制成功')
						uni.showToast({
							title:'控制成功',
							icon:'none'
						})
					}
				})
			},
			viewData(opType) {
				uni.navigateTo({
					url: 'sampleManage/sampleList?opType=' + opType+'&devSn='+this.devList[this.devIndex].devSn
				})
			},
			goLocationFn() {
				uni.navigateTo({
					url: './locationManage/locationManage?devSn='+this.devList[this.devIndex].devSn
				})
			},
			goSampleTypeFn() {
				uni.navigateTo({
					url: 'sampleTypeManage/sampleTypeManage'
				})
			},
			addFn() {
				uni.navigateTo({
					url: 'sampleManage/add'
				})
			},
			changeDev(e) {
				this.devIndex = e.target.value
				this.videoIndex = 0
				this.form={
					isEnable:this.devList[this.devIndex].isEnable,
					reason:this.devList[this.devIndex].reason
				}
				this.getRealTimeData()
				this.isHasVideo()
			},
			changeVideo(e) {
				this.videoIndex = e.target.value
				this.isHasVideo()
			},
			//获取设备列表
			loadDevList() {
				var that = this
				this.sendRequest({
					url: "xmgl/standardDev/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.devList = res.result
						if (that.devList.length > 0) {
							that.form={
								isEnable:that.devList[this.devIndex?this.devIndex:0].isEnable,
								reason:that.devList[this.devIndex?this.devIndex:0].reason
							}
							that.getRealTimeData()
							that.isHasVideo()
						}
					}
				})
			},
			//判断设备有没有绑定视频
			isHasVideo() {
				var that = this
				if (that.devList[this.devIndex].videoList && that.devList[this.devIndex].videoList.length > 0) {
					if (that.devList[this.devIndex].videoList[this.videoIndex].videoType == 2) {
						that.videoUrl = that.devList[this.devIndex].videoList[this.videoIndex].liveRadioUrl
					} else {
						that.getPlayUrl()
					}
				}
			},
			getPlayUrl() {
				var that = this
				var videoInfo = that.devList[this.devIndex].videoList[this.videoIndex]
				this.videoInfo=videoInfo
				var json = {
					itemId: that.devList[this.devIndex].videoList[this.videoIndex].itemId
				}
				if (videoInfo.videoType == 3) {
					json.streamType = 1
					json.type = 'rtsp' //rtsp或者hls
				}
				this.sendRequest({
					url: "xmgl/videoItem/getVideoItemInfo",
					data: json,
					method: "post",
					success(res) {
						switch (videoInfo.videoType) {
							case 1:
								that.videoUrl = res.result.videoInfo.hdFlvAddress
								break;
							default:
								that.videoUrl = res.result.videoInfo.url
								break;
						}
					}
				})
			},
			getRealTimeData() {
				var that = this
				this.sendRequest({
					url: "xmgl/standardDev/selectStandardDevStatisticsBySn",
					data: {
						projectSn: this.projectDetail.projectSn,
						devSn: this.devList[this.devIndex].devSn
					},
					method: "POST",
					success(res) {
						console.log(res.result.devState)
						that.devState = res.result.devState
						console.log('that.devState=========',that.devState)
						that.currentData = res.result.currentData
					}
				})
			},
			formSubmit(e){
				var that = this
				// console.log(e)
				var params = e.detail.value
				if(this.form.isEnable=='1'&&params.reason==''){
					uni.showToast({
						title:'请输入不接收通知原因',
						icon:'none'
					})
					return false;
				}
				
				var url = 'xmgl/standardDev/edit'
				this.form.id=this.devList[this.devIndex].id
				this.form.reason=params.reason
				this.form.projectSn=this.projectDetail.projectSn
				// if(this.isAdd){
				// 	url = 'xmgl/standardDev/add'
				// }else{
				// 	params.id = this.form.id
				// }
				this.sendRequest({
					url: url,
					data: this.form,
					method: "POST",
					success(res){
						uni.showToast({
							title:'保存成功！'
						})
						that.$refs.dialogs.hideFn()
						that.loadDevList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bysContent {
		:deep(.headerBox){
			background-color: transparent;
			border-bottom: none;
		}
	}
	.realTimeBox {
		color: white;
		overflow: hidden;
		margin-top: 40rpx;
		position: relative;
		z-index: 2;

		.titles {
			width: 20rpx;
			height: 51px;
			float: left;
			margin-top: 20rpx
		}

		.item {
			float: left;
			// width: calc(50% - 10rpx);
			text-align: center;
			width: 33.33%;
			.txt {
				font-size: 26rpx;
			}

			.num {
				font-size: 28px;
			}
			.dev-state{
				font-size: 40rpx;
			}
		}
	}

	.arrow {
		margin-left: 20rpx;
	}

	.moudleTitle {
		font-size: 28rpx;
		// padding: 20rpx 30rpx 20rpx;
		position: relative;
		text-align: center;
		margin: 60rpx 0 30rpx;
		
		
		// overflow: hidden;
	}

	.moudleTitle2 {
		font-size: 20rpx;
		opacity: 0.69;
		font-weight: 400;
		margin: 30rpx 0;
		text-align: center;
	}
.moudleTitleItem{
	background-color: #e6e6e6;
	padding: 10rpx 24rpx;
	width: 100px;
	&.active{
		background-color: #58a7f9;
		color: white;
	}
}
.moudleTitleItem1{
	border-top-left-radius: 20rpx;
}
.moudleTitleItem2{
	border-top-right-radius: 20rpx;
}
	.videoBox {
		width: calc(100% - 60rpx);
		height: 225px;
		margin: 0px 30rpx;
		border-radius: 20rpx;
	}

	.funcBox {
		overflow: hidden;
		margin: 0 11px;

		.funcItem {
			float: left;
			width: 25%;
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 16rpx;

			.inner {
				border: 1px dashed rgba(220, 220, 220, 1);
				padding: 10rpx 0;
				margin: 0 4px;
			}

			.txt {
				color: rgba(42, 43, 91, 0.88);
				// margin: 7px 0 6rpx;
			}

			.img {
				width: 31px;
				height: 31px;
			}

			.num {
				font-size: 20rpx;
				color: rgba(233, 0, 0, 1);
			}
		}
	}

	.selectContent {
		text-align: center;
		margin-top: 120rpx;
		position: relative;
		z-index: 2;
	}

	.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 36rpx;
		height: 70rpx;
		font-size: 30rpx;

		display: inline-block;

		.videoName {
			padding: 0 24rpx 0 30rpx;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 70rpx;
			height: 70rpx;
		}

		.arrow {
			padding: 0 24rpx 0 4rpx;
		}
	}

	.titleBg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 250px;
	}

	.addBtn {
		border: 4rpx solid rgba(43, 141, 243, 1);
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: rgba(43, 141, 243, 1);
		width: 65%;
		margin: 14px auto 0px;
		text-align: center;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.img {
			margin-right: 26rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}
	.videoOperateBox {
	  text-align: center;
	  padding-top: 20rpx;
	  .bg{
		  width: 220px;
		  height: 220px;
	  }
	}
	
	.videoOperateBox .box {
	  position: relative;
	  display: inline-block;
	  margin: auto;
	  height: 220px;
	}
	
	.videoOperateBox .pic {
	  position: absolute;
	  cursor: pointer;
	}
	
	.videoOperateBox .zoom {
	  width: 106px;
	  height: 69px;
	  display: inline-block;
	  cursor: pointer;
	}
	
	.videoOperateBox .zoomin.active {
	  background: url("/static/videoControlIcon/4.png");
	}
	
	.videoOperateBox .zoomout.active {
	  background: url("/static/videoControlIcon/2.png");
	}
	
	.videoOperateBox .zoomin {
	  background: url("/static/videoControlIcon/3.png");
	}
	
	.videoOperateBox .zoomout {
	  background: url("/static/videoControlIcon/1.png");
	}
	
	.videoOperateBox .left {
	  width: 28px;
	  height: 33px;
	  background: url("/static/videoControlIcon/left.png");
	  left: 50rpx;
	  top: 50%;
	  margin-top: -30rpx;
	}
	
	.videoOperateBox .left.active {
	  background: url("/static/videoControlIcon/left-active.png");
	}
	
	.videoOperateBox .right.active {
	  background: url("/static/videoControlIcon/right-active.png");
	}
	
	.videoOperateBox .top.active {
	  background: url("/static/videoControlIcon/top-active.png");
	}
	
	.videoOperateBox .bottom.active {
	  background: url("/static/videoControlIcon/bottom-active.png");
	}
	
	// .videoOperateBox .center:hover {
	//   background: url("/static/videoControlIcon/center-active.png");
	// }
	
	.videoOperateBox .right {
	  width: 28px;
	  height: 33px;
	  background: url("/static/videoControlIcon/right.png");
	  right: 50rpx;
	  top: 50%;
	  margin-top: -30rpx;
	}
	
	.videoOperateBox .top {
	  width: 33px;
	  height: 28px;
	  background: url("/static/videoControlIcon/top.png");
	  top: 50rpx;
	  left: 50%;
	  margin-left: -30rpx;
	}
	
	.videoOperateBox .bottom {
	  width: 33px;
	  height: 28px;
	  background: url("/static/videoControlIcon/bottom.png");
	  bottom: 50rpx;
	  left: 50%;
	  margin-left: -30rpx;
	}
	.alarm_set{
		position: absolute;
		margin: 10rpx 20rpx 0 ;
		width: 24rpx;
		height: 24rpx;
		right: 0;
	}
	.radios{
		transform: scale(0.7);
	}
	.closeBtn{
		font-size: 30rpx;
		color: rgba(42, 43, 91, 0.5);
		padding: 20rpx 0;
		text-align: center;
	}
</style>
