<template>
   <view class="container" style="min-height:100vh">
	   <view class="header" @click="handleBack">
			<image class="header-back-img" src="../../imgs/back.png"></image>	
			{{registerType == 1 ? '失能老年人医养结合和健康服务登记' : '高龄老人医养结合服务登记'}}
			<view></view>
	   </view>
	   <view class="view-step">
	   	<view>
	   		<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
	   		<p style="color:#3D3D3D">信息</p>
	   	</view>
	   	<h1></h1>
	   	<view>
	   		<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
	   		<p style="color:#3D3D3D">评估</p>
	   	</view>
	   	<h1></h1>
	   	<view>
	   		<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
	   		<p style="color:#3D3D3D">筛查</p>
	   	</view>
	   	<h1></h1>
	   	<view>
	   		<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
	   		<p style="color:#3D3D3D">登记</p>
	   	</view>
	   	<h1></h1>
	   	<view>
	   		<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
	   		<p style="color:#3D3D3D">确认</p>
	   	</view>
	   </view>
	   <view class="view-sign">
			<view class="view-sign-title"> 
				<h1>{{registerType == 1 ? '失能老人' : '高龄老人'}}或监护人签名</h1> 
				<view style="display: flex;">
					<view @click="clear" class="view-sign-clear" style="margin-right: 10px;">重签</view> 
					<view @click="verify" class="view-sign-clear">确认</view> 
				</view>
			</view>
			<v-sign cid='54894564984789' bgColor="#fcfcfc" width="100%" height="300px" @init="onSignInit"></v-sign>
			<view style="display: flex; align-items: center;font-size: 16px;margin-top: 10px;">
				<span>签名图片: </span><image v-if="form.djrSign" style="width:100px" :src="imgurl + form.djrSign"  mode="widthFix"></image>
			</view>
	   </view>
	  <view class="view-sign">
			<view class="view-sign-title">
				<h1>服务人员签名</h1> 
				<view style="display: flex;">
					<view @click="clear1" class="view-sign-clear" style="margin-right: 10px;">重签</view> 
					<view @click="verify1" class="view-sign-clear">确认</view> 
				</view>
			</view>
			<v-sign cid='8732165498613' bgColor="#fcfcfc" width="100%" height="300px" @init="onSignInit1"></v-sign>
			<view style="display: flex; align-items: center;font-size: 16px;margin-top: 10px;">
				<span>签名图片: </span><image v-if="form.quiltSign" style="width:100px" :src="imgurl + form.quiltSign"  mode="widthFix"></image>
			</view>
	   </view>
	   <view class="view-tips">
		   本次提供健康服务的家庭医生团队符合《2024年河南省失能老年人“健康服务行动”实施方案（试行）》规定，具有承担失能老年人上门健康服务及指导工作能力，请失能老年人或监护人如实提供失能老年人身体状况等信息，如有虚假伪造，将取消接受健康服务资格。我们将严格遵守保密相关规定，不向与该行动工作无关的任何组织和个人泄露，同时按标准为失能老年人开展免费上门健康服务工作。
	   </view>
	   <view class="view-sign-submit" @click="handleSubmit"> 完成 </view>
	   <u-toast ref="uToast"></u-toast>
   </view>
</template>
<script>
import config from '@/common/config'
import {upload, complete,completeById} from '@/common/api.js';
  export default {
    data() {
      return {
		imgurl:config.baseUrl,
        winWidth: 300,
		form:{
			"djrSign":"",
			"quiltSign":""
		},
		evaId:'',
		registerType: 1,
		token: uni.getStorageSync('userToken'),
		action: config.baseUrl + '/upload',
      }
    },
    created() {
      // 宽度设为可使用窗口宽度，如果不设宽度，则宽度为 canvas 默认值
      // const { windowWidth } = uni.getSystemInfoSync()
      // this.winWidth = windowWidth
    },
    methods: {
		onSignInit(signCtx) {
			this.signCtx = signCtx
		},
		onSignInit1(signCtx) {
			this.signCtx1 = signCtx
		},
		// 清空
		clear() {
			this.signCtx.clear()
		},
		clear1() {
			this.signCtx1.clear()
		},
		async verify(){
			const res = await this.signCtx.canvasToTempFilePath()
			await this.uploadFilePromise(res,'djrSign','signCtx')
		},
		async verify1(){
			const res = await this.signCtx1.canvasToTempFilePath()
			await this.uploadFilePromise(res,'quiltSign','signCtx1')
		},
		// 提交接口
		async handleSubmit(){
			this.form.evaId = this.evaId
			const res = await complete(this.form)
			if(res.code == 200){
				this.$refs.uToast.show({
					type: 'success',
					icon: false,
					message: "操作成功",
				})
				setTimeout(()=>{
					uni.reLaunch({
						url: '/pages/index/index',
					});
				}, 500)
				
			}
		},
		async getQuery(){
			const res = await completeById({
				evaId :this.evaId
			})
			if(res.code == 200){
				let { id, djrSign, quiltSign } = res.data
				this.form = res.data ? { evaId: id, djrSign, quiltSign} : {evaId: this.evaId}
			}
		},
		// 上传图片
		uploadFilePromise(url,_name,_type) {
			let a = uni.uploadFile({
				url: config.baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
				header : { Authorization: `Bearer ${this.token}` },
				filePath: url,
				name: 'file',
				success: (res) => {
					res = JSON.parse(res.data)
					if(res.code == 200){
						this.form[_name] = res.fileName
						// this[_type].clear()
						this.$refs.uToast.show({
							type: 'success',
							icon: false,
							message: "上传成功",
						})
					}else{
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: "上传失败",
						})
					}
				}
			});
		},
		
		
		// 返回上一步
		handleBack(){
	  	uni.navigateBack({
	  		delta: 1, 
	  	});
	  },
    },
	onLoad(data) {
		this.evaId = data.evaId
		this.registerType = data.djType
		console.log('this.registerType',this.registerType)
		this.getQuery()
	},  
	
  }
</script>
<style lang="scss">
	.view-sign-submit{
		height: 45px;
		line-height: 45px;
		background: #FF981F;
		border-radius: 23px;
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
	}
	.view-tips{
		font-size: 12px;
		color: #999999;
		margin: 16px 0;
	}
	.view-sign{
		margin-top: 20px;
		background: #fff;
		padding: 14px;
		border-radius: 10px;
		.view-sign-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
			h1{
				font-size: 15px;
				color: #3D3D3D;
			}
			.view-sign-clear{
				color: #999999;
				font-size: 16px;
				top: 10px;
				right: 10px;
			}
		}
	}
	.header{
		font-size: 16px;
		color: #3D3D3D;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.header-back-img{
			width: 18px;
			height: 18px;
		}
		view{
			width: 20px;
		}
	}
	.container{
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 46px 16px 20px 16px;
			background: linear-gradient(130deg,#ffe8cc 8%,#fcfcfc,#fcfcfc,#fcfcfc);
		}
</style>
