<template>
	<view>
		<view id="checkImg" style="width: 100%;" v-html="content">
		</view>
		<view class="dialog-footer">
			<tui-button id="btn" type="primary" @click="saveUserImage" width="200rpx"
				height="60rpx">生成缩略图</tui-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex';
	import html2canvas from 'html2canvas';
	import {
		getStorage
	} from '@/utils/storage.js';
	import {
		template
	} from '@babel/core';

	export default {
		data() {
			return {
				pageLoading: true,
				tableLoading: false,
				engineeringAry: [],
				content: null,
				searchForm: {
					title: '',
					limit: 15,
					page: 1
				},
				isshowImage: false,
				srcList: [],
				template: null,
				dialogVisible: false,
				dialogVisibleToContent: false,
				title: '新增',
				total: 1,
				editor: null,
				tableData: [],
				baseIndex: '/{:config("shop.backend_index")}/',
				upurl: '/admin/attachment/upload',
				upurl2: '/admin/attachment/uploadOtherFile',
				form: {

				},
				loading: false,
				formAddRules: {
					sort: [{
						required: true,
						message: '请输入必填项'
					}],
				},
				multipleSelection: [],
				iselect: true,
				cycletypeArr: [{
						value: '1',
						label: '日'
					},
					{
						value: '2',
						label: '周'
					},
					{
						value: '3',
						label: '月'
					},
				],
				isDisabled: false,

			};
		},
		computed: {
			...mapState(['APIHOST', 'userinfo']),
			// switch组件映射Boolean
			is_switch() {
				return this.itemInfo.is_use === 1 ? true : false
			}
		},
		onLoad(options) {
			// 页面通信
			this.page = this.getOpenerEventChannel();
			this.item = options?.item;
			// 触发事件
			this.page.on('detail', (data) => {
				this.itemInfo = data
			})
			this.getTemplate();
		},
		methods: {
			hide(e) {
				this.showPicker = false;
			},
			pickRoleChange(e) {
				this.itemInfo.roleName = e.text;
				this.selectRoleId = e.value;
			},
			picker() {
				this.showPicker = true
			},
			getTemplate() {
				uni.request({
					url: this.APIHOST + "responsibility/template/showTemplate/getTemplate",
					method: 'POST',
					header: {
						authorization: "Bearer " + getStorage("sxlq_token"),
					},
					data: {
						template_id: this.itemInfo.id,
						user_id: getStorage('sxlq_userId')
					},
					success: (res) => {
						this.content = res.data.data.content;
					}
				});
			},
			dataURLtoFile(dataURI, type) {
				let binary = atob(dataURI.split(',')[1]);
				let array = [];
				for (let i = 0; i < binary.length; i++) {
					array.push(binary.charCodeAt(i));
				}
				return new Blob([new Uint8Array(array)], {
					type: type
				});
			},
			async saveUserImage() {
				const opts = {
					useCORS: true,
					allowTaint: false,
					tainttest: true,
					logging: false
				};
				let checkImg = document.getElementById('checkImg');
				let myImg = document.getElementById('myImage');
				myImg.crossOrigin = "anonymous";
				let canvas = await html2canvas(checkImg, opts);
				let imgData = canvas.toDataURL('image/png');
				let formData = new FormData();
				let blob = this.dataURLtoFile(imgData, 'image/png');
				let fileOfBlob = new File([blob], this.itemInfo.title + new Date() + ".png");
				formData.append("file", fileOfBlob);
				console.log(imgData)
				let uploadRes=await uni.uploadFile({
					url: 'https://anquansys.sxlq.com:37100/uploadoss/upload?token=1add2b5e9c36ce7d75a1ff3d11b9ffb8',
					filePath: imgData,
					name: 'file',
					fileType: "image",
					formData:{formData},
					success: (uploadFileRes) => {
						uploadRes = uploadFileRes;
						console.log(filePath)
						setTimeout(5000);
						console.log(uploadRes)
						this.userImage = uploadRes.data.url;
						let res=uni.request({
							url:this.APIHOST+'responsibility/template/showTemplate/saveUserImage',
							method:'GET',
							header:{
								authorization: "Bearer " + getStorage("sxlq_token"),
							},
							data:{user_id: getStorage('sxlq_userId'),
							template_id: this.itemInfo.id,
							userImage: this.userImage
							},
							success: (res) => {
								// localStorage.removeItem('template_id');
								console.log('成功了')
								console.log(url)
							},
							fail: (res) => {
								console.log('失败了')
							}
						})
					}
				});

				// let res = await this.$request.get('responsibility/template/showTemplate/saveUserImage', {
				// 	user_id: getStorage('sxlq_userId'),
				// 	template_id: this.itemInfo.id,
				// 	userImage: this.userImage
				// });
				// if (res.code == 0) {
				// 	console.log('成功了')
				// 	this.showTips(res.msg)
				// 	this.getList()
				// 	this.dialogCheckVisible = false;
				// } else {
				// 	console.log('失败了')
				// 	this.showTips(res.msg)
				// }
			},
			// 消息提示组件
			showTips(value) {
				let options = {
					msg: value,
					duration: 1000,
				};
				// 确认已获取到组件实例
				this.$refs.toast && this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tui-input__wrap {
		height: 80rpx !important;
	}

	.tui-input__label {
		width: 180rpx !important;
		font-size: $uni-font-size-sm !important;
	}
</style>