<template>
	<view class="shopTourOver-wrap">
		<!-- 店长签名 -->
		<view class="autograph-con">
			<text class="autograph-tit">店长签名：</text>
			<view class="autograph-main">
				<autograph-to-pic ref="dz" canvasId="handWriting-dz" @generatePictures="autographDz"/>
			</view>
		</view>
		<!-- 巡店人签名 -->
		<view class="autograph-con">
			<text class="autograph-tit">巡店人签名：</text>
			<view class="autograph-main">
				<autograph-to-pic ref="xdr" canvasId="handWriting-xd" @generatePictures="autographXdr" />
			</view>
		</view>
		<u-button type="primary" shape="circle" class="submit-btn" @click="submitFun">提交</u-button>
	</view>
</template>

<script>
	import AutographToPic from '@/components/autograph-to-pic/autograph-to-pic.vue'
	import {submitTask} from '@/api/task'
	import { clzConfirm,saveBase64ToAliOss } from '@/libs/tools'
	export default{
		components: {
			AutographToPic
		},
		data(){
			return{
				taskId: '',
				storeManagerSign:'', // 店长签名
				inspectorSign:'', // 巡店人签名
				sign: 0  //  标记  是否两张签名都已生成
			}
		},
		onLoad(opts) {
			this.taskId = opts.taskId
		},
		methods: {
			//  店长签名 生成图片
			autographDz(res){
				console.log(res,'店长签名+++')
				if(res.status == 200){
					this.storeManagerSign = res.data
					this.sign++
					this.$refs.xdr.subCanvas()
				}else{
					this.storeManagerSign = ''
					uni.hideLoading()
					uni.showToast({ icon: 'none', title: '店长签名生成失败，请重新提交' })
				}
			},
			//  巡店人签名 生成图片
			autographXdr(res){
				console.log(res,'巡店人签名+++')
				if(res.status == 200){
					this.inspectorSign = res.data
					this.sign++
					this.isSubmit()
				}else{
					this.inspectorSign = ''
					uni.hideLoading()
					uni.showToast({ icon: 'none', title: '巡店人签名生成失败，请重新提交' })
				}
			},
			//  是否提交
			isSubmit(){
				let _this = this
				if(this.storeManagerSign && this.inspectorSign){
					console.log('正常提交')
					clzConfirm({
						title: '提示',
						content: '确定提交本次巡店？',
						success: function(res) {
							if (res.confirm || res.index == 0) {
								// 上传图片后提交代码
								_this.submitTask()
							}
						}
					})
				}else{
					uni.showToast({ icon: 'none', title: '签名生成失败，请重新提交' })
				}
			},
			// 提交本次任务
			submitFun(){
				const dzIsEmpty = this.$refs.dz.isEmpty
				const xdrIsEmpty = this.$refs.xdr.isEmpty
				if(dzIsEmpty){
					uni.showToast({
						icon:'none',
						title:'店长未签名'
					})
					return
				}
				if(xdrIsEmpty){
					uni.showToast({
						icon:'none',
						title:'巡店人未签名'
					})
					return
				}
				uni.showLoading({
					title: '保存中，请稍后...', 
					mask: true
				})
				this.$refs.dz.subCanvas()
			},
			//  提交
			submitTask(){
				const _this = this
				const data = {
					id: _this.taskId,
					storeManagerSignPath: _this.storeManagerSign,
					inspectorSignPath:_this.inspectorSign
				}
				console.log(data,'submit data')
				submitTask(data).then(ret=>{
					console.log(ret)
					if(ret.status == 200){
						// 关闭上页
						uni.$emit("closeTour",1)
						// 打开完成页面
						uni.redirectTo({
							url:"/pages/shopTourCompleted/shopTourCompleted?taskId="+_this.taskId
						})
					}
					uni.showToast({
						icon:'none',
						title: ret.message
					})
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.shopTourOver-wrap{
		height: 100%;
		.autograph-con{
			margin: 30upx 30upx 0;
			border-radius: 12upx;
			background-color: #fff;
			.autograph-tit{
				display: block;
				padding:  20upx 30upx;
			}
		}
		.submit-btn{
			width: 80%;
			margin: 60upx auto 40upx;
		}
	}
</style>
