<template>
	<view class="page">
		<u-navbar title="分享二维码" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='50' id="navbar">
		</u-navbar>
        
		<view class="tishi">
			<text>微信“扫一扫” 使用小程序</text>
			<text>选择您所需要的用电套餐</text>
		</view>

		<!-- 展示二维码 -->
		<view class="imgewm" @longpress="saveCanvas">
			<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
			<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
				SN:{{deviceNo}}
			</view>
			<view class="btn"
				@click="saveCanvas">
				保存二维码
			</view>
		</view>
	</view>
</template>

<script>
	var xBlufi = require("@/page_components/blufi/xBlufi.js")
	import uQRCode from '@/common/uqrcode.js'
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				suitSurplus:'',
				showflag: false,
				imgflag: false,
				wemflag: false,
				btnmsk: false,
				bluetoothflag: false,
				shibaiflag: false,
				danwei: '',
				listdanwei: [{
					value: 2,
					label: '小时'
				}, {
					value: 3,
					label: '分钟'
				}, {
					value: 4,
					label: '秒钟'
				}, {
					value: 0,
					label: '度'
				}],
				bgc: {
					backgroundColor: "#F9F8FF ",
				},
				ec: {
					lazyLoad: true
				},
				deviceInfo: {},
				loadings: false,
				info: '',
				checked: false,
				tittxt: "设备详情",
				titlist: [],
				tdtxt: '开启',
				curtitidx: 0,
				id: '',
				focus: false,
				timeday: '',
				imglist: '',
				token: '',
				userImgs: '',
				imgflag: true,
				mac: "",
				name: '',
				deviceId: '',
				storeId: '',
				qrResult: '',
				devicesList: [],
				setMode: null,
				vipflag: false,
				cztime: '',
				opflag: true,
				timer: null,
				url: "",
				deviceNo: '',
				modelId: [],
				damweiid: '',
				intervalId: null,
				sklist:{},
				sklistflag:false,
			}
		},
		onLoad(option) {
			this.deviceNo = option.id
			this.qrFun()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onShow() {

		},
		mounted() {
			this.drawCanvas()
		},
		methods: {

			capture() {
				var pages = getCurrentPages(); //获取当前页面信息
				var page = pages[pages.length - 1];
				var bitmap = null;
				var currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中
				currentWebview.draw(bitmap, function() {
					// console.log('截屏绘制图片成功');
					//这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
					let rand = Math.floor(Math.random() * 10000)
					let saveUrl = '_doc/' + rand + 'a.jpg'
					bitmap.save(saveUrl, {}, function(i) {
						// console.log('保存图片成功：' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								// bitmap.clear(); //销毁Bitmap图片
								uni.showToast({
									title: '保存图片成功',
									mask: false,
									duration: 1500
								});
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
				//currentWebview.append(amway_bit);
			},


			drawCanvas() {
				const ctx = uni.createCanvasContext('qrcode', this);
				ctx.setFillStyle('#fff');
				ctx.fillRect(10, 10, 250, 250);
				ctx.draw();
			},
			// 长按保存二维码
			saveCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: (res) => {
						console.log(res.tempFilePath); // 打印图片路径  
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							}
						});
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			//**生成二维码**//
			qrFun: function() {
				this.wemflag = true
				uQRCode.make({
					canvasId: 'qrcode',
					text: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo,
					size: 300,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
			},
			ewmyc() {
				this.wemflag = false
			},

			btnlyqx() {
				this.shibaiflag = false
				this.bluetoothflag = false
			},

			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				});
			},


			btnpic() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						this.url = rst.tempFilePaths[0]
					}
				})
			},
			onok(ev) {
				this.url = ""
				this.path = ev.path;
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				wx.uploadFile({
					url: 'https://up-z2.qiniup.com',
					name: 'file',
					filePath: _this.path,
					formData: {
						token: _this.token,
						key: 'smartmeter/img/' + math
					},
					success: function(res) {
						// console.log(res);
						let str = JSON.parse(res.data)
						_this.userImgs = 'https://api.ccttiot.com/' + str.key
						_this.imglist = _this.userImgs
						// console.log(_this.imglist,'_this.imglist_this.imglist')
						let data = {
							deviceId: _this.id,
							customPicture: _this.imglist
						}
						_this.putdevice(data)
					}
				})
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = ""
			},
			putdevice(data) {
				this.$u.put('/app/device', data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			opendevice() {
				let stause = 0
				if (this.deviceInfo.powerStatus == 1) {
					stause = 0
				} else {
					stause = 1
				}
				// console.log(stause, 'stausestause');
				this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
					if (res.code == 200) {
						// this.groupList=res.rows
						setTimeout(() => {
							this.getDevice(this.id)
						}, 2000)

						// this.loadings=true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			opendevices() {

			},
			swiperchange(e) {
				this.curtitidx = e.detail.current
				// console.log(e, 'aaaa');
			},
			changeidx(index) {
				this.curtitidx = index
			},

			toydfx() {
				uni.navigateTo({
					url: "/page_components/eletj?id=" + this.id
				})
			},
			
	

		}
	}
</script>

<style lang="scss">
	/deep/ .panel {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99 !important;
		overflow: hidden;
	}
    .btn{
		width:100%;
		height: 94rpx;
		background: #8883F0;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 94rpx;
		margin-top: 184rpx;
	}
	.imgewmflag {
		width: 750rpx;
		height: 100vh;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
	}

	.imgewm {
		width: 700rpx;
		height:700rpx;
		margin: auto;
		margin-top: 104rpx;
		z-index: 2;
	}
    .tishi{
		width: 620rpx;
		height: 180rpx;
		background: rgba(217,216,255,0.3294);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		padding: 36rpx 92rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 104rpx;
		text{
			margin-top: 16rpx;
			display: block;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
</style>