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

<script>
import { clzConfirm, saveBase64ToAliOss, saveImgToAliOss } from '@/libs/tools';
import { taskStart, submitTask, updateTaskItem, getTaskDetail } from '@/api/task';
import { getTaskItem, delTaskItem } from '@/api/taskItem';
import { taskTargetSave, taskCommentsSave } 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
			restart: '', // 是否重新巡店
			taskId: '', // 任务id
			storeId: '', // 门店id
			assessSchemeId: '' // 方案id
		};
	},
	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') {
				console.log('takePhotos');
				// 截图
				if (this.types == 'video') {
					this.takePhotos(JSON.parse(data.msg));
				}
				// 拍照
				if (this.types == 'scene') {
					console.log('camerPhotos');
					this.camerPhotos();
				}
			}
			// 保存编辑后的图片
			if (data.action == 'saveEditImg') {
				this.uploadImg(data.msg);
			}
			// 删除图片
			if (data.action == 'delImgs') {
				this.delImgs(data.msg);
			}
			// 删除考评项
			if (data.action == 'delKpItem') {
				this.delKpItem(data.msg);
			}
			// 评分,保存指标结果
			if (data.action == 'selZbResult') {
				this.saveZbResult(JSON.parse(data.msg));
			}
			// 指标评论，图片更新保存
			if (data.action == 'saveZbPlImgs') {
				this.saveZbPlImgs(JSON.parse(data.msg));
			}
			// 更新考评总计
			if (data.action == 'updateKpTj') {
				this.getTaskDetail();
			}
			// 提交巡店
			if (data.action == 'submitTask') {
				this.submitTask();
			}
			// 现场巡店下一步签字页面
			if (data.action == 'nextStep') {
				this.nextStep();
			}
		},
		//指标评论，图片更新保存
		saveZbPlImgs(data) {
			let params = {
				id: data.id,
				comments: data.comments,
				taskTargetPhotoList: []
			};
			data.taskTargetPhotoList.map(item => {
				params.taskTargetPhotoList.push({
					photoPath: item.photoPath
				});
			});
			console.log(params, 'saveZbPlImgs');
			taskCommentsSave(params).then(res => {
				console.log(res);
				if (res.status == 200) {
					this.wv.evalJS('vm.saveZbPlImgsSuccess()');
				}
				uni.showToast({
					icon: 'none',
					title: res.message
				});
			});
		},
		// 保存指标结果
		saveZbResult(data) {
			console.log(data, 'saveZbResult');
			taskTargetSave(data).then(res => {
				if (res.status == 200) {
					this.wv.evalJS("vm.saveZbResultSuccess('" + JSON.stringify(data) + "')");
				}
				uni.showToast({
					icon: 'none',
					title: res.message
				});
			});
		},
		// 拍照截图，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: '开始播放视频后才可以拍照截图'
				});
			}
		},
		// 摄像机拍照
		camerPhotos() {
			const _this = this;
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //album 从相册选图，camera 使用相机，默认二者都有
				success: function(res) {
					// tempFilePaths 图片的本地文件路径列表,tempFiles 图片的本地文件列表，每一项是一个 File 对象
					uni.showLoading({
						title:'正在保存图片...',
						mask: true
					})
					saveImgToAliOss(res.tempFilePaths[0], function(ret) {
						_this.wv.evalJS("vm.takePhotoSuccess('" + ret.data + "')");
						uni.hideLoading()
					});
				}
			});
		},
		// 删除图片
		delImgs(index) {
			const _this = this;
			clzConfirm({
				title: '提示',
				content: '确定删除此图片，删除后无法恢复？',
				success: function(res) {
					if (res.confirm || res.index == 0) {
						_this.wv.evalJS('vm.delImgsSuccess(' + index + ')');
					}
				}
			});
		},
		// 删除考评项
		delKpItem(id) {
			const _this = this;
			clzConfirm({
				title: '提示',
				content: '确定删除此考评项，删除后无法恢复？',
				success: function(res) {
					if (res.confirm || res.index == 0) {
						delTaskItem({ id: id }).then(ret => {
							if (ret.status == 200) {
								_this.wv.evalJS('vm.delKpItemSuccess(' + id + ')');
							}
							uni.showToast({
								icon: 'none',
								title: ret.message
							});
						});
					}
				}
			});
		},
		// 上传编辑后的图片到阿里云
		uploadImg(formData) {
			const _this = this;
			saveBase64ToAliOss(formData, function(res) {
				// console.log(res);
				// 关闭编辑图片
				_this.wv.evalJS('vm.closeImgsEdit()');
				// 更新编辑后的图片
				_this.wv.evalJS("vm.updateItemImg('" + res.data + "')");
			});
		},
		// 开始巡店（重新开始）,isNew 0 新建，1 重新开始
		creatTask(isNew) {
			// 新建任务，只传门店id
			let parms = {
				storeId: this.storeId,
				type: this.types == 'video' ? 'VIDEO_INSPECTION' : 'SPOT_INSPECTION'
			};
			// 重新开始,要传任务id
			if (isNew) {
				parms.id = this.taskId;
			}
			// 现场巡店，需要保存签到信息
			if (this.types == 'scene') {
				let signin = this.$store.state.vuex_sceneTaskSignIn;
				parms.inspectorPositionAddr = signin.inspectorPositionAddr;
				parms.inspectorPositionPhotoPath = signin.inspectorPositionPhotoPath;
			}
			console.log(parms,'taskStart')
			taskStart(parms).then(res => {
				if (res.status == 200) {
					this.taskId = res.data.id;
					// 创建成功，查询任务明细
					this.getTaskDetail();
					this.getTaskItem();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			});
		},
		// 查询任务明细
		getTaskDetail() {
			getTaskDetail({ id: this.taskId }).then(res => {
				this.assessSchemeId = res.data.assessSchemeId; // 方案id
				this.wv.evalJS("vm.getTaskDetail('" + JSON.stringify(res.data) + "')");
			});
		},
		// 任务考评项目明细
		getTaskItem() {
			getTaskItem({ id: this.taskId }).then(res => {
				console.log(res, 'getTaskItem');
				this.wv.evalJS("vm.getTaskItem('" + JSON.stringify(res.data) + "')");
			});
		},
		// 更新方案项目
		updateTaskItem(row) {
			console.log(row);
			// 相同方案无需重置更新
			if(row.id == this.assessSchemeId){
				return
			}
			updateTaskItem({
				id: this.taskId,
				assessSchemeId: row.id,
				assessSchemeName: row.name
			}).then(res => {
				console.log(res, 'updateTaskItem');
				if (res.status == 200) {
					// 重置页面
					this.wv.evalJS('vm.resetPage()');
					this.getTaskDetail();
					this.getTaskItem();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			});
		},
		// 获取视频列表
		getVideoList() {
			let list = this.$store.state.vuex_storeVideoList;
			this.wv.evalJS("vm.setVideoList('" + JSON.stringify(list) + "')");
		},
		// 获取视频地址
		getStoreVideoUrl(item) {
			let _this = this
			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 {
					clzConfirm({
						title: '提示',
						content: '获取视频地址失败，点击确定重试？',
						showCancel: false,
						buttons:['确定'],
						success: function(res){
							_this.getStoreVideoUrl(item)
						}
					})
				}
			});
		},
		// 提交本次任务
		submitTask() {
			const _this = this;
			clzConfirm({
				title: '提示',
				content: '确定提交本次巡店？',
				success: function(res) {
					console.log(res, '--------');
					if (res.confirm || res.index == 0) {
						submitTask({
							id: _this.taskId
						}).then(ret => {
							console.log(ret);
							if (ret.status == 200) {
								_this.isClose = true;
								// 打开完成页面
								uni.redirectTo({
									url: '/pages/shopTourCompleted/shopTourCompleted?taskId=' + _this.taskId
								});
							} else {
								_this.isClose = false;
							}
							uni.showToast({
								icon: 'none',
								title: ret.message
							});
						});
					}
				}
			});
		},
		// 现场巡店下一步签字
		nextStep() {
			uni.navigateTo({
				url: '/pages/shopTourOver/shopTourOver?taskId=' + this.taskId
			});
		}
	},
	onLoad(options) {
		console.log(options, 'options');
		// 巡店类型，视频还时现场
		this.types = options.types;
		this.taskId = options.taskId;
		this.storeId = options.storeId;
		this.restart = options.restart;
	},
	onUnload() {
		uni.$off('resetTaskKpItem');
		uni.$off('closeTour');
	},
	onReady() {
		let _this = this;
		_this.isClose = false;
		// #ifdef APP-PLUS
		//获取当前页面的webview对象
		var currentWebview = this.$mp.page.$getAppWebview();
		//如果是页面初始化调用时，需要延时一下
		setTimeout(function() {
			_this.wv = currentWebview.children()[0];
			_this.wv.evalJS("vm.setTyps('" + _this.types + "')");
			// 获取视频列表
			if (_this.types == 'video') {
				_this.getVideoList();
			}
			if (_this.restart == 1) {
				// 重新开始
				_this.creatTask(1);
			} else if (_this.restart == 0) {
				// 继续上次巡店
				//查询任务明细
				_this.getTaskDetail();
				_this.getTaskItem();
			} else {
				// 首次新建
				_this.creatTask(0);
			}
		}, 500);
		// #endif

		// 监听选择方案后事件,schemeId 方案id
		uni.$on('resetTaskKpItem', row => {
			_this.updateTaskItem(row);
		});

		// 关闭当前页面
		uni.$on('closeTour', flag => {
			if (flag == 1) {
				this.isClose = true;
				uni.navigateBack();
			}
		});
	},
	// 监听返回键
	onBackPress() {
		console.log(this.isEditImg, '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;
		}
	},
	// 添加考评模板
	onNavigationBarButtonTap(e) {
		// 且当前没编辑图片或抓拍图片
		if (e.index == 0 && !this.isEditImg) {
			uni.navigateTo({
				url: '/pages/evaluatePlan/evaluatePlan?id=' + this.assessSchemeId
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: '正在编辑图片，不能选择考评方案'
			});
		}
	}
};
</script>

<style></style>
