<template>
	<view class="collectionWrap">
		<view class="sealBox">
			<image v-if="src" class="img" mode="aspectFit" :src="src"></image>
			<view v-else style="height: 100%;
				line-height: 468rpx;
				font-size: 30rpx;
				color: #999999;
				background: #FFFFFF;
				text-align: center;"  @click="goSeal()">点击输入手写签名</view>
		</view>
		 <view v-if="!src"  class="sealAgreement">
			 <view class="check-icon" @click="checkClick">			 
			 <image src="../../../static/img/checkOk.png" style="width: 30rpx;height:30rpx;" v-if="status"></image>
			 <view class="seal-nocheck" v-else></view>
			 </view>
			<view>我已阅读并同意</view>
			<view class="agreement" @click="go('/pages/user/sealAgreement')">《申请数字证书协议》</view>
		</view> 
		<view v-if="src" class="forget" @click="goForget()">
			<view>重置密码</view>
			<image src="@/static/img/right.svg" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				status: false
			}
		},
		methods: {
			go(url){
				uni.navigateTo({
					url
				})
			},
			checkClick(){
				this.status = !this.status
			},
			realNameState(){
				if (!this.auth.realNameState) {
					uni.showToast({
						title: "未实名认证用户，请先进行实名认证。未完成实名认证，无法成功采集签名。",
						icon: 'none'
					})
					return
				}
			},
			goSeal(url){
				this.realNameState()
				 if (!this.status){
				 	uni.showToast({
				 		title: '请先阅读并同意《申请证书协议》',
				 		icon: 'none'
				 	})
					return
				 }
				uni.navigateTo({
					url:`/pageMy/setUserBase/seal/sealCanvas?path=/pageMy/setUserBase/index`
				})
			},
			goForget(){
				this.realNameState()
				uni.navigateTo({
					url: '/pageMy/setUserBase/seal/forget'
				})
			},
			getInpCode: function(e) {
				console.log(e)
			}
		},
		computed:{
			...mapGetters(['auth','autograph']),
			src() {
				if (this.autograph.data && this.autograph.data.signSrcUrl) {
					return this.autograph.data.signSrcUrl
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.sealAgreement{
		display: flex;
		align-items: center;
		margin: 30rpx;
		font-size: 32rpx;
		.agreement{
			color: #007AFF;
		}
	}
	.check-icon{
		font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				align-items: center;
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
				.seal-nocheck{
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					border: 2rpx solid #999999;
					margin-right:12rpx;
				}
	}
	.sealBox{
		padding: 15px 15px 0 15px;
	}
	.sealBox .img{
		background-color: #FFFFFF;
		width: 692rpx;
		height: 344rpx;
		background-color: #FFFFFF;
	}
	.collectionWrap{
		.modify,.forget{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			padding:15px;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.forget{
			margin-top: 10px;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;

		}
	}
</style>
