<template>
	<view>
		<web-view @message="onmessage" src="/hybrid/html/ddvideo.html"></web-view>
	</view>
</template>

<script>
	import { clzConfirm,saveBase64ToAliOss } from '@/libs/tools'
	import {getTaskDetail,savePointTask} from '@/api/task'
	import {getTaskTargetById} from '@/api/taskTarget'
	import { photoPaiZhao, getVideoUrl } from '@/api/store';
	export default {
		data() {
			return {
				wv: null,
				isClose: false, // 是否关闭当前窗口
				isEditImg: false, // 是否正在编辑图片
				showPz: false, // 是否正在拍照
				types: 'video', // 巡店类型，video，scene
				taskId: '', // 任务id
				storeId: '', // 门店id
				storeName: '',// 门店名称
			};
		},
		methods: {
			// 监听html页面事件
			onmessage(event) {
				let data = event.detail.data[0]
				// console.log(data)
				if(data.action == 'toast'){
					uni.showToast({
						icon:'none',
						title: data.msg
					})
				}
				// webview 窗口传过来的页面状态
				if(data.action == 'getWinStatus'){
					let d = JSON.parse(data.msg)
					this[d.key] = d.val
				}
				// 获取视频地址
				if(data.action == 'getVideoUrl'){
					this.getStoreVideoUrl(JSON.parse(data.msg))
				}
				// 抓拍图片
				if(data.action == 'takePhotos'){
					this.takePhotos(JSON.parse(data.msg))
				}
				// 保存编辑后的图片
				if(data.action == 'saveEditImg'){
					this.uploadImg(data.msg)
				}
				// 删除图片
				if(data.action == 'delImgs'){
					this.delImgs(data.msg)
				}
				// 提交巡店
				if(data.action == 'submitTask'){
					this.submitTask(JSON.parse(data.msg))
				}
			},
			// 删除图片
			delImgs(index){
				const _this = this;
				clzConfirm({
					title: '提示',
					content: '确定删除此图片，删除后无法恢复？',
					success: function(res) {
						if (res.confirm || res.index == 0) {
							_this.wv.evalJS("vm.delImgsSuccess("+index+")") 
						}
					}
				});
			},
			// 拍照截图，data.type 1 是列表按钮触发的，2 是弹框里触发的
			takePhotos(data){
				if(data.videoPlayerStatus == 'playing'){
					uni.showLoading({
						mask: true,
						title: '正在抓拍图片...'
					})
					photoPaiZhao({streamId:data.streamId}).then(res=>{
						console.log(res)
						if(res.data){
							this.wv.evalJS("vm.takePhotoSuccess('"+res.data.url+"')")
						}else{
							uni.showToast({
								icon:'none',
								title: res.message || '拍照截图失败，稍后重试'
							})
						}
						uni.hideLoading()
					})
				}else{
					uni.showToast({
						icon:'none',
						title: '开始播放视频后才可以拍照截图'
					})
				}
			},
			// 上传编辑后的图片到阿里云
			uploadImg(formData) {
				const _this = this;
				saveBase64ToAliOss(formData,function(res){
					// console.log(res);
					// 关闭编辑图片
					_this.wv.evalJS("vm.closeImgsEdit()")
					// 更新编辑后的图片
					_this.wv.evalJS("vm.updateItemImg('"+res.data+"')")
				})
			},
			// 查询任务明细
			getTaskDetail(){
				getTaskTargetById({taskId:this.taskId}).then(res => {
					console.log(res.data)
					this.wv.evalJS("vm.getTaskDetail('"+JSON.stringify(res.data)+"')")
				})
			},
			// 获取视频列表
			getVideoList(){
				let list = this.$store.state.vuex_storeVideoList
				this.wv.evalJS("vm.setVideoList('"+JSON.stringify(list)+"')")
			},
			// 获取视频地址
			getStoreVideoUrl(item){
				getVideoUrl({streamId:item.streamId,outProtocol:"hls"}).then(res=>{
					console.log(res)
					if(res.status == 200&&res.data){
						this.wv.evalJS("vm.getVideoUrlSuccess('"+res.data.url+"')")
					}else{
						uni.showToast({
							icon:'none',
							title: "获取视频地址失败，请返回重试"
						})
					}
				})
			},
			// 提交本次任务
			submitTask(data){
				const _this = this;
				const params = {
					id: this.taskId,
					taskTargetDTOList: data
				}
				console.log(params,'savePointTask')
				clzConfirm({
					title: '提示',
					content: '确定提交本次点检任务？',
					success: function(res) {
						if (res.confirm || res.index == 0) {
							savePointTask(params).then(ret=>{
								console.log(ret)
								if(ret.status == 200){
									_this.isClose = true
									// 打开完成页面
									uni.redirectTo({
										url: '/pages/spotCheckCenter/spotCheckResult?id=' + _this.taskId
									});
									// 刷新列表
									uni.$emit('updatePointTaskList')
								}else{
									_this.isClose = false
								}
								uni.showToast({
									icon:'none',
									title: ret.message
								})
							})
						}
					}
				});
			},
		},
		onLoad(options) {
			// 巡店类型，视频还时现场
			this.types = options.types
			this.taskId = options.taskId
			this.storeId = options.storeId
			this.storeName = options.storeName
			console.log(options,this.taskId)
		},
		onUnload() {
			uni.$off("closeTour")
		},
		onReady() {
			let _this = this
			// #ifdef APP-PLUS
			 //获取当前页面的webview对象
			 var currentWebview = this.$mp.page.$getAppWebview()
			 //如果是页面初始化调用时，需要延时一下
			 setTimeout(function() {
				_this.wv = currentWebview.children()[0]
				_this.wv.evalJS("vm.setTyps('"+_this.types+"','"+_this.storeName+"')")
				// 获取视频列表
				if(_this.types == 'video'){
					_this.getVideoList() 
				}
				//查询任务项明细
				_this.getTaskDetail()
			 }, 500);
			// #endif
			// 关闭当前页面
			uni.$on("closeTour",(flag)=>{
				if(flag==1){
					this.isClose = true
					uni.navigateBack()
				}
			})
		},
		// 监听返回键
		onBackPress() {
			let _this = this
			if(!_this.isClose){
				// 正在编辑图片
				if(this.isEditImg){
					// 关闭编辑图片
					_this.wv.evalJS("vm.closeImgsEdit()")
				}
				// 正在拍照
				else if(this.showPz){
					// 关闭拍照弹框
					_this.wv.evalJS("vm.onClosePz()")
				}else{
					clzConfirm({
						title: '提示',
						content: '点检还未完成，确定退出吗？',
						success: function(res) {
							if (res.confirm || res.index == 0) {
								_this.isClose = true
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
				}
				return true
			}
		},
	}
</script>

<style>

</style>
