<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title>远程巡店</title>
		<script src="js/vue@2.6.11"></script>
		<script src="js/uni.webview.1.5.2.js"></script>
		<!-- antd ui -->
		<script type="text/javascript" charset="utf-8" src="js/moment.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/moment-with-locales.min.js"></script>
		<link rel="stylesheet" href="antd/antd.min.css" />
		<script type="text/javascript" charset="utf-8" src="antd/antd.min.js"></script>
		<!-- 编辑图片 -->
		<script type="text/javascript" charset="utf-8" src="imgEdit/ped.min.js"></script>
		<!-- 播放器 -->
		<link rel="stylesheet" href="aliplayer/aliplayer-min.css" />
		<script type="text/javascript" charset="utf-8" src="aliplayer/aliplayer-h5-min.js"></script>
		<!-- 页面样式 -->
		<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
		<div class="storeCheck" id="app">
			<!-- 播放器 -->
			<div class="videoPlay" v-if="xdType=='video'">
				<!-- 云台控制 -->
				<div class="control-yt" v-show="showYt&&!showYtbtns" @click="openYt"></div>
				<div class="control-yt-close" v-show="showYtbtns" @click="openYt"></div>
				<div v-show="showYtbtns" @click="kzYt(1)" class="ytBtns yt-left"></div>
				<div v-show="showYtbtns" @click="kzYt(2)" class="ytBtns yt-right"></div>
				<div v-show="showYtbtns" @click="kzYt(3)" class="ytBtns yt-top"></div>
				<div v-show="showYtbtns" @click="kzYt(4)" class="ytBtns yt-bottom"></div>
				<!-- 播放器 -->
				<div class="prism-player" id="player-con"></div>
			</div>
			<!-- 工作区 -->
			<div class="checkWork">
				<!-- 统计及摄像头切换 -->
				<div class="checkWork-head">
					<div class="checkWork-head-row" v-if="xdType=='video'">
						<!-- 机位 -->
						<div>
							<div>机位：</div>
							<div></div>
							<div>
								<a-dropdown>
									<a-menu selectable slot="overlay" @click="onVideoListClick">
										<a-menu-item v-for="item in videoList" :key="item.gbId"> {{item.name}} </a-menu-item>
									</a-menu>
									<a class="ant-dropdown-link" @click="e => e.preventDefault()">
										{{curVideo&&curVideo.name}}
										<a-icon type="down" />
									</a>
								</a-dropdown>
							</div>
						</div>
						<!-- 预置位 -->
						<!-- <div>
            <div>预置位：</div>
            <div>
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item key="1"> 预置位1 </a-menu-item>
                  <a-menu-item key="2"> 预置位2 </a-menu-item>
                  <a-menu-item key="3"> 预置位3 </a-menu-item>
                </a-menu>
                <a-button block> 请选择 <a-icon type="down" /> </a-button>
              </a-dropdown>
            </div>
          </div> -->
					</div>
					<div class="checkWork-head-row">
						<div>
							<div>进度：{{kptj.finishedTargetCount}}/{{kptj.totalTargetCount}}</div>
							<div>耗时：{{kptj.haoshi}}</div>
							<!-- <div>得分：{{kptj.getScore}}/{{kptj.totalScore}}</div> -->
						</div>
						<div>
							<div>不适用：{{kptj.notWorkTargetCount}}</div>
							<div>不合格：{{kptj.notPassTargetCount}}</div>
							<div>合格：{{kptj.passTargetCount}}</div>
						</div>
					</div>
				</div>
				<!-- 打分 -->
				<div class="checkWork-body">
					<div class="checkWork-body-tabs">
						<div class="tabs-items" :class="activeIndex==index?'active':''" v-for="(item,index) in kpItem" @click="getKpItemZb(index)"
						 :key="item.id">
							<div v-if="isDelItem">
								<a-icon @click.stop="confirmDelKpx(item.id)" class="aicon" type="close" />
							</div>
							<div>{{item.assessItemName}}</div>
							<div>{{item.finishedTargetCount}}/{{item.totalTargetCount}}</div>
						</div>
						<div class="tabs-items" v-if="kpItem.length>1">
							<div class="edit" v-if="!isDelItem" @click="isDelItem=true">编辑</div>
							<div class="edit" @click="isDelItem=false" v-else>取消编辑</div>
						</div>
						<div style="text-align: center;padding-top: 50px;" v-if='kpItem.length==0'>
							<div>暂无指标项目</div>
						</div>
					</div>
					<div class="checkWork-body-tabCons">
						<div class="tabCons-items" v-for="(zb,zbIndex) in zbItem" :key="zb.id">
							<div>
								<div><b>{{zb.assessTargetName}}</b></div>
								<!-- 点击打开拍照 -->
								<div @click="openCamera(zbIndex)">
									<a-icon type="camera" style="font-size: 30px;" />
								</div>
							</div>
							<!-- 拍照图片 -->
							<div class="photos">
								<div v-for="(photo,pindex) in zb.taskTargetPhotoList" :key="photo.id">
									<a-avatar :size="40" shape="square" :src="photo.photoPath+'?x-oss-process=image/resize,m_pad,h_40,w_40,color_000000'" />
								</div>
							</div>
							<!-- 评论 -->
							<div class="remarks" v-if="zb.comments">
								评论：{{zb.comments}}
							</div>
							<!-- 评分 -->
							<div>
								<div>
									<!-- 分值：{{zb.getScore}} <a-icon @click="openEditFs" type="edit" style="font-size: 20px;margin-left: 10px;"/> -->
								</div>
								<div>
									<!-- 不适用 -->
									<a-icon @click="selZbResult(0,zb)" type="minus-circle" :class="zb.result=='NOT_WORK'?'choose-bsy':''" />
								</div>
								<div>
									<!-- 不合格 -->
									<a-icon @click="selZbResult(1,zb)" type="close-circle" :class="zb.result=='NOT_PASS'?'choose-bhg':''" />
								</div>
								<div>
									<!-- 合格 -->
									<a-icon @click="selZbResult(2,zb)" type="check-circle" :class="zb.result=='PASS'?'choose-hg':''" />
								</div>
							</div>
						</div>
						<div v-if="!zbItem||zbItem.length==0" style="text-align: center;padding-top: 50px;">
							暂无指标
						</div>
					</div>
				</div>
				<!-- 提交按钮-->
				<div class="checkWork-button" v-if="kptj&&kptj.finishedTargetCount==kptj.totalTargetCount&&kptj.totalTargetCount!=0">
					<div v-if="xdType=='video'" @click="submitTask">提交本次巡店</div>
					<div v-if="xdType=='scene'" @click="nextStep">下一步</div>
				</div>
			</div>
			<!-- 拍照弹框 -->
			<a-drawer title="快拍" placement="bottom" :closable="true" :visible="showPz" @close="onClosePz" :height="360">
				<div class="pzPopus">
					<!-- 评论 -->
					<div class="pz-pinglun">
						<div class="remarks">
							<a-textarea :maxLength="300" placeholder="请填写备注内容(最多300个字符)" v-model="curZbItem.comments" :rows="4" />
						</div>
						<div class="icons" @click="takePhotos(2)">
							<a-icon class="aicon" type="camera" />
						</div>
					</div>
					<!-- 图片列表 -->
					<div class="imglist">
						<div v-for="(photo,pindex) in curZbItem.taskTargetPhotoList" :key="pindex">
							<img @click="editImgs(photo.photoPath,activeZbIndex,pindex)" :src="photo.photoPath+'?x-oss-process=image/resize,m_pad,h_50,w_50,color_000000'">
							<a-icon @click.stop="delImgs(pindex)" class="aicon" type="close" />
						</div>
					</div>
					<!-- 提交 -->
					<div class="f-btns">
						<a-button size="large" @click="saveZbPlImgs" type="primary" block> 提交 </a-button>
					</div>
				</div>
			</a-drawer>

			<!-- 加载条 -->
			<div v-if="showLoading" class="loading">
				<a-spin />
			</div>
		</div>
		<script>
			// 初始化vm 实例
			var vm = new Vue({
				el: '#app',
				data: {
					xdType: 'video', // 巡店类型
					player: null, // 播放器对象
					videoPlayerStatus:'',// 视频播放状态
					videoList: [], // 播放通道
					curVideo: null, // 当前播放的视频
					showYt: false, // 显示云台控制
					showYtbtns: false,
					showPz: false, // 显示拍照弹框
					isDelItem: false, // 是否显示考评项删除按钮
					showLoading: true, // 页面加载条
					isEditImg: false, // 是否编辑图片
					PED: null, // 图片编辑对象
					hsID: null, // 耗时计时器id
					activeIndex: 0, // 当前选择的考评项
					activeZbIndex: 0, //当前编辑的指标index
					activeZbPhoto: 0, //当前编辑的指标图片index
					curZbItem: {
						comments: '',
						taskTargetPhotoList: []
					}, // 当前编辑的指标评论图片对象
					// 考评统计
					kptj: {
						haoshi: '0时0分'
					},
					// 考评项
					kpItem: [],
					zbItem: []
				},
				mounted() {
					let _this = this
					moment.locale('zh-cn');
					// 耗时计算
					this.hsID = setInterval(function() {
						_this.haoshi()
					}, 60000)
				},
				destroyed() {
					clearInterval(this.hsID)
				},
				methods: {
					// 重置页面
					resetPage() {
						this.activeIndex = 0
						this.activeZbIndex = 0
						this.activeZbPhoto = 0
						this.curZbItem = {
							comments: '',
							taskTargetPhotoList: []
						}
						this.isDelItem = false
						this.showPz = false
					},
					// 设置巡店类型
					setTyps(type) {
						console.log(type)
						this.xdType = type
						// 设置标题
						document.title = type == 'video' ? '远程巡店' : '现场巡店'
					},
					// 设置视频列表
					setVideoList(data) {
						this.videoList = JSON.parse(data)
						this.curVideo = this.videoList[0]
						this.getVideoUrl()
					},
					// 获取任务详情
					getTaskDetail(data) {
						this.kptj = JSON.parse(data)
						this.haoshi()
					},
					// 获取任务考评项
					getTaskItem(data) {
						this.kpItem = JSON.parse(data)
						this.zbItem = this.kpItem.length ? this.kpItem[this.activeIndex].taskTargetVOList : []
						this.showLoading = false
					},
					// 选择机位
					onVideoListClick({key}) {
						this.videoPlayerStatus = ''
						let v = this.videoList.find(item => item.gbId == key)
						if (v) {
							this.curVideo = v
							this.getVideoUrl()
						}
					},
					// 获取当前设备流地址
					getVideoUrl(){
						this.sendMsg('getVideoUrl', JSON.stringify(this.curVideo))
					},
					// 获取视频地址成功
					getVideoUrlSuccess(url){
						// 重置播放器
						this.showYt = false
						this.showYtbtns = false
						if(this.player){
							this.player.dispose()
						}
						this.videoInit(url)
					},
					// 初始化播放器
					videoInit(videoSrc) {
						const _this = this
						// 初始化播放器
						_this.player = new Aliplayer({
							'id': 'player-con',
							'source': videoSrc,
							'width': '100%',
							'height': '240px',
							'autoplay': false,
							'isLive': true,
							'rePlay': true,
							'playsinline': true,
							'preload': true,
							'language': 'zh-cn',
							'useH5Prism': true,
							'extraInfo': {
								'crossOrigin': 'anonymous'
							},
							'skinLayout': [{
									'name': 'bigPlayButton',
									'align': 'cc'
								},
								{
									'name': 'errorDisplay',
									'align': 'tlabs',
									'x': 0,
									'y': 0
								},
								{
									'name': 'infoDisplay'
								},
								{
									'name': 'controlBar',
									'align': 'blabs',
									'x': 0,
									'y': 0,
									'children': [{
											'name': 'fullScreenButton',
											'align': 'tr',
											'x': 15,
											'y': 10
										},
										{
											'name': 'volume',
											'align': 'tr',
											'x': 15,
											'y': 8
										},
										{
											'name': 'liveDisplay',
											'align': 'tl',
											'x': 15,
											'y': 2
										}
									]
								}
							]
						}, function(player) {
							_this.sendMsg('message', 'The player is created')
						})
						// 控制栏
						_this.player.on('playing', function() {
							// _this.showYt = true
							_this.videoPlayerStatus = 'playing'
						})
						_this.player.on('error', function(e) {
							console.log(JSON.stringify(e), 'error')
						})
					},
					// 耗时计算
					haoshi() {
						let s = this.kptj.startTime
						let times = moment().diff(s, 'hours') + '时' + moment().diff(s, 'minutes') % 60 + '分'
						this.$set(this.kptj,'haoshi',times)
					},
					// 发送消息给app 页面
					sendMsg(action, msg) {
						uni.postMessage({
							data: {
								action: action,
								msg: msg
							}
						})
					},
					// 显示云台控制按钮
					openYt() {
						this.showYtbtns = !this.showYtbtns
					},
					// 控制云台
					kzYt(index) {
						const cmd = ['left', 'right', 'up', 'down']
						this.sendMsg('kzyt', '控制云台' + cmd[index - 1])
					},
					// 打开抓拍照片弹框
					openCamera(index) {
						// 显示弹框
						this.showPz = true
						this.activeZbIndex = index
						this.sendMsg('getWinStatus', JSON.stringify({
							key: 'showPz',
							val: true
						}))
						// 当前查看的指标对象
						let obj = this.zbItem[this.activeZbIndex]
						this.curZbItem = Object.assign({
							comments: '',
							taskTargetPhotoList: []
						},JSON.parse(JSON.stringify(obj)))
						// 抓拍
						this.takePhotos(1)
					},
					// 抓拍
					takePhotos(type){
						if(!this.curZbItem.taskTargetPhotoList||this.curZbItem.taskTargetPhotoList.length<6){
							this.sendMsg('takePhotos',JSON.stringify({
								streamId: this.curVideo&&this.curVideo.streamId,
								videoPlayerStatus: this.videoPlayerStatus,
								type: type
							}))
						}else{
							this.sendMsg('toast','最多抓拍6张图片')
						}
					},
					// 拍照成功后，返回图片地址
					takePhotoSuccess(url){
						let obj = {
							photoPath: url
						}
						if(!this.curZbItem.hasOwnProperty('taskTargetPhotoList')){
							this.curZbItem.taskTargetPhotoList = [obj]
						}else{
							this.curZbItem.taskTargetPhotoList.push(obj)
							this.curZbItem.taskTargetPhotoList.splice()
						}
					},
					// 关闭抓拍弹框
					onClosePz() {
						this.showPz = false
						this.sendMsg('getWinStatus', JSON.stringify({
							key: 'showPz',
							val: false
						}))
					},
					// 删除图片
					delImgs(index) {
						this.sendMsg('delImgs', index)
					},
					delImgsSuccess(index) {
						console.log(index,'delImgsSuccess')
						this.curZbItem.taskTargetPhotoList.splice(index, 1)
					},
					// 预览编辑图片
					editImgs(url, index, pindex) {
						let _this = this
						_this.activeZbIndex = index
						_this.activeZbPhoto = pindex
						_this.sendMsg('getWinStatus', JSON.stringify({
							key: 'isEditImg',
							val: true
						}))
						this.PED = new window.PED.imageInfo(
							url,
							function(data) {
								// 保存图片编辑
								_this.sendMsg('saveEditImg', data)
							},
							function() {
								_this.sendMsg('getWinStatus', JSON.stringify({
									key: 'isEditImg',
									val: false
								}))
							})
					},
					// 关闭图片编辑
					closeImgsEdit() {
						this.PED.hidePED()
						this.sendMsg('getWinStatus', JSON.stringify({
							key: 'isEditImg',
							val: false
						}))
					},
					// 更新编辑后的图片
					updateItemImg(path) {
						let photoList = this.curZbItem.taskTargetPhotoList
						photoList[this.activeZbPhoto].photoPath = path
					},
					// 更新已完成考评数
					updateKpFinish() {
						let kpItem = this.kpItem[this.activeIndex]
						let a = 0
						this.zbItem.map(item => {
							if (item.result) {
								a++
							}
						})
						kpItem.finishedTargetCount = a
						// 更新总进度
						this.sendMsg('updateKpTj', '')
					},
					// 删除考评项
					confirmDelKpx(id) {
						this.sendMsg('delKpItem', id)
					},
					// 删除考评项成功
					delKpItemSuccess(id) {
						let index = this.kpItem.findIndex(item => item.id == id)
						if (index >= 0) {
							this.kpItem.splice(index, 1)
							this.getKpItemZb(0)
							// 更新总进度
							this.sendMsg('updateKpTj', '')
						}
					},
					// 切换考评项对应的指标
					getKpItemZb(index) {
						this.activeIndex = index
						this.zbItem = this.kpItem[index].taskTargetVOList
					},
					// 评分,0 不适用，1 不合格，2 合格
					selZbResult(type, zb) {
						let {
							id,
							taskItemId,
							taskId
						} = zb
						let result = ['NOT_WORK', 'NOT_PASS', 'PASS']
						this.sendMsg('selZbResult', JSON.stringify({
							result: result[type],
							id: id,
							taskItemId: taskItemId,
							taskId: taskId
						}))
					},
					// 保存指标结果成功
					saveZbResultSuccess(data) {
						let {
							id,
							result
						} = JSON.parse(data)
						console.log(id, result)
						let zb = this.zbItem.find(item => item.id == id)
						if (zb) {
							zb.result = result
							// 更新考评项已完成指标数
							this.updateKpFinish()
						}
					},
					// 保存指标评论及图片
					saveZbPlImgs() {
						this.sendMsg('saveZbPlImgs', JSON.stringify(this.curZbItem))
					},
					// 更新指标评论及图片成功
					saveZbPlImgsSuccess() {
						this.zbItem.splice(this.activeZbIndex, 1, this.curZbItem)
						this.onClosePz()
					},
					// 提交此次任务
					submitTask() {
						this.sendMsg('submitTask', '')
					},
					// 现场巡店下一步签字
					nextStep() {
						this.sendMsg('nextStep', '')
					}
				}
			})
		</script>
	</body>
</html>
