<template>
	<view class="pwd-retrieve-container" style="text-align: center;">
		<image class="uni-uploader__img" style="border:1rpx solid #999" v-if="signUrl" :src="signUrl" :data-src="signUrl"
			@tap="previewImage">
		</image>
		<view v-if="!signUrl" class="zanwuqianming">暂无签名</view>
		<button type="primary" v-if="!signUrl" plain="true" style="margin-top: 30rpx;" @click="tanchushouxie">去签名</button>
		<button type="primary" v-if="signUrl" plain="true" style="margin-top: 30rpx;" @click="tanchushouxie">修改签名</button>
		<sign-png @uploadSignImg="uploadSignImg" :openSignBoxshow="openSignBoxshow" @closeshx="closeshx"></sign-png>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import { getUserProfile, getConfigKey, updateUserProfile } from "@/api/system/user";
	import { updateUserPwd } from "@/api/system/user"
	import storage from '@/utils/storage'
	import { getToken } from '@/utils/auth';
	import signPng from '@/uni_modules/sign-png/sign-png.vue';
	import config from '@/config';
	const baseUrl = config.baseUrl;
	export default {
		components: { signPng, },
		data() {
			return {
				signUrl: '',
				signSrc: '',
				qrsignSrc: '',
				msgType: '',
				messageText: '',
				openSignBoxshow: false,
				user: {
					userId: "",
					userName: "",
					avatar: "",
					createBy: "",
					createTime: "",
					dept: {
						deptName: "",
					},
					deptId: "",
					email: "",
					nickName: "",
					phonenumber: "",
					remark: "",
				},
				roleGroup: "",
			}
		},
		onReady() {
			//	this.$refs.form.setRules(this.rules)
		},
		onShow() {

			this.getUser();

		},
		methods: {
			getUser() {
				getUserProfile().then(res => {
					const data = res;
					this.user = data.data;
					this.signUrl = this.user.signUrl || '';
					this.roleGroup = data.roleGroup.split(",");
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: [this.signUrl]
				})
			},
			uploadSignImg(src) {
				//更新图片
				//	debugger
				this.signSrc = src;
				this.postshchansign();
				//上传图片之后台获取返回地址
			},
			closeshx(e) {
				//关闭手写框
				this.openSignBoxshow = false;
			},
			postshchansign() {
				//上传图片之后台获取返回地址
				let _self = this;
				uni.uploadFile({
					url: baseUrl + '/common/upload', //仅为示例，非真实的接口地址
					filePath: this.signSrc,
					name: 'file',
					//	formData: {formData},
					header: {
						Authorization: "Bearer " + getToken()
					},
					//上传成功后将图片修改
					success: (uploadFileRes) => {
						//传递需要解析
						if (config.isencryption) {
							//加密
							let res = Decrypt(JSON.parse(uploadFileRes.data));
							let data = JSON.parse(res);
							this.qrsignSrc = data.url;
						} else {
							let data = JSON.parse(uploadFileRes.data);
							this.qrsignSrc = data.url;
						}
						this.updateimg(); //更新签字
						//	debugger
					},
					fail: (err) => {
						//debugger
						//console.log('请求error_______________', err)
						_self.msgType = 'error';
						_self.messageText = `图片上传出错！` + err;
						_self.$refs.message.open();
					}

				});
			},
			updateimg() {
				//更新签字
				let _self = this;
				this.user.signUrl = this.qrsignSrc;
				updateUserProfile(this.user).then(res => {
					if (res.code === 200) {
						_self.msgType = 'success';
						_self.messageText = `修改成功！`;
						_self.$refs.message.open();
						_self.getUser(); //重新获取
					}
				});
			},
			tanchushouxie() {
				this.openSignBoxshow = true;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.pwd-retrieve-container {
		padding-top: 36rpx;
		padding: 15px;
	}

	.formsws {
		.uni-forms-item {
			margin-bottom: 16rpx;
		}

		::v-deep .uni-forms-item__error {
			position: initial;
		}
	}

	.zanwuqianming {
		margin-top: 50rpx;
		font-size: 40rpx;
		color: #999;
		line-height: 100rpx;
		text-align: center;
	}
</style>