<!-- 管理员登录页 -->
<template>
	<view class="page1" style="overflow: scroll;">
		<view @tap="addList"
			style="width: 90%;height:80rpx;margin:20rpx auto;background: #088FEB;color: #fff;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 32rpx;">
			新增
		</view>
		<uqrcode ref="uqrcode" canvas-id="qrcode"  hide="true" :value="QrUrl">
		</uqrcode>
		<view v-for="(item,index) in QrList1" :key="index"
			style="background: #fff;height: 100rpx;display: flex;line-height: 100rpx;">
			<input type="text" :value="item.name" maxlength="50" @blur="addItemName($event,index)" placeholder="输入名称"
				style="width: 30%;display: block;height: 100rpx;text-align: center;font-size: 32rpx;" />
			<input type="text" disabled @tap="scanCodeAdd(index)" :value="item.path" placeholder="点击扫描二维码"
				style="width: 58%;display: block;height: 80rpx;border: 1px solid #eee;padding-left: 20rpx;margin-top: 10rpx;" />
			<view @tap="delItem(index)" style="width:12%;margin-left: 20rpx;">
				<uni-icons color="red" type="minus" size="26"></uni-icons>
			</view>
		</view> 
		<view style="display: flex;">
			<view v-for="(item,index) in QrList1" :key="index" style="width: 150rpx;height: 210rpx;margin: 20rpx;">
				<image :src="item.imgUrl" style="width: 150rpx;height: 150rpx;background-size: 100%;"></image>
				<view v-if="item.imgUrl != ''">{{item.name}}</view>
			</view>
		</view> 
		
		<view @tap="updateShopIcon()"
			style="width: 90%;height:80rpx;position: fixed;bottom: 40rpx;left:5%;background: #088FEB;color: #fff;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 32rpx;">
			提交
		</view>
		<canvas canvas-id="qrcode1" style="width: 200px;height: 200px;top: -1000px;"></canvas>
	</view>
</template>

<script>
	import {
		generateUUID
	} from '@/utils/global.js'
	export default {
		data() {
			return {
				QrUrl: '1212', //二维码临时存放
				canUpdate:true,
				QrList1: [] // 点击新增按钮，新增一条数据
			}
		},
		onLoad(option) {
			let that = this
			that.tui.request("/app/shop/getShopInfoById", "post", {
				id: uni.getStorageSync('shopId'),
			}, false, true).then((res) => {
				if (res.code == 200) {
					let qrCode = res.result.shopIcon
					if (qrCode != '') { 
						let data = qrCode.split(',')
						for (let i = 0; i < data.length; i++) {
							if (qrCode.indexOf('@_@') != -1) {
								let obj = {
									name: data[i].split('@_@')[0],
									path: data[i].split('@_@')[1],
									imgUrl: data[i].split('@_@')[2],
									level: "M"
								}
								this.QrList1.push(obj)
							} else {
								var weixin = data[i].indexOf("微信");
								var dianpu = data[i].indexOf("店铺");
								var zifubao = data[i].indexOf("支付");
								var yinlian = data[i].indexOf("收款");
								var duizhang = data[i].indexOf("对账");
								if (duizhang != -1) {
									var result = data[i].substring(duizhang + 2);
									let obj = {
										name: '查看对账单',
										path: result,
										level: "M"
									}
									this.QrList1.push(obj)
								}
								if (dianpu != -1) {
									var result = data[i].substring(dianpu + 2);
									let obj = {
										name: '店铺微信',
										path: result,
										level: "M"
									}
									this.QrList1.push(obj)
								}
								if (weixin != -1) {
									var result = data[i].substring(weixin + 2);
									let obj = {
										name: '微信收款码',
										path: result,
										level: "M"
									}
									this.QrList1.push(obj)
								}
								if (zifubao != -1) {
									var result = data[i].substring(zifubao + 2);
									let obj = {
										name: '支付宝收款码',
										path: result,
										level: "Q"
									}
									this.QrList1.push(obj)
								}
								if (yinlian != -1) {
									var result = data[i].substring(yinlian + 2);
									let obj = {
										name: '银行收款码',
										path: result,
										level: "M"
									}
									this.QrList1.push(obj)
								}
								
							}
						}
					}
				}
			}).catch((res) => {})
			
			setTimeout(res => {
				// 返回canvas的位图数据
				uni.canvasGetImageData({
					canvasId: 'aaaa',
					x: 0,
					y: 0,
					width: 100,
					height: 100,
					success(res) {
						let data = {
							width:res.width,
							height:res.height,
							imageData:res.data,
							threshold:180
						}
					}
				})
			}, 2000)
		},
		methods: {
			grayPixle(pix) {
			    return pix[0] * 0.299 + pix[1] * 0.587 + pix[2] * 0.114;
			},
			updateShopIcon(){
				if(this.canUpdate == false){
					uni.showToast({
						title: "请等待二维码上传成功",
						icon: 'none'
					}) 
					return
				}
				let shopIcon = ''
				if(this.QrList1.length > 0){
					for(let i = 0; i < this.QrList1.length;i++){
						if(i == this.QrList1.length-1){
							shopIcon += this.QrList1[i].name+'@_@'+this.QrList1[i].path+'@_@'+this.QrList1[i].imgUrl
						}else{
							shopIcon += this.QrList1[i].name+'@_@'+this.QrList1[i].path+'@_@'+this.QrList1[i].imgUrl+','
						}
					}
					this.tui.request("/app/shop/editShopIconById", "post", {
						shopId: uni.getStorageSync('shopId'),
						shopIcon: shopIcon
					},false, true).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "更新成功",
								icon: 'none'
							})
							setTimeout(res=>{
								uni.navigateBack({
									delta: 1
								})
							},1000)
						}
					})
					
				}
			},
			overwriteImageData(data) {
			    let sendWidth = data.width,
			        sendHeight = data.height;
			    const threshold = data.threshold || 180;
			    let sendImageData = new ArrayBuffer((sendWidth * sendHeight) / 8);
			    sendImageData = new Uint8Array(sendImageData);
			    let pix = data.imageData;
			    const part = [];
			    let index = 0;
			    for (let i = 0; i < pix.length; i += 32) {
			        //横向每8个像素点组成一个字节（8位二进制数）。
			        for (let k = 0; k < 8; k++) {
			            const grayPixle1 = this.grayPixle(pix.slice(i + k * 4, i + k * 4 + (4 - 1)));
			            //阈值调整
			            if (grayPixle1 > threshold) {
			                //灰度值大于threshold位   白色 为第k位0不打印
			                part[k] = 0;
			            } else {
			                part[k] = 1;
			            }
			        }
			        let temp = 0;
			        for (let a = 0; a < part.length; a++) {
			            temp += part[a] * Math.pow(2, part.length - 1 - a);
			        }
			        sendImageData[index++] = temp;
			    }
			    return {
			        array: Array.from(sendImageData),
			        width: sendWidth / 8,
			        height: sendHeight,
			    };
				
			},
			addList() {
				if (this.QrList1.length > 4) {
					uni.showToast({
						title: '最多只能添加4个二维码',
						icon: 'none'
					})
					return
				}
				let data = {
					name: '',
					path: ''
				}
				this.QrList1.push(data)
			},
			getQRCode(index) {
				let that = this
				setTimeout(res => {
					that.$refs.uqrcode.toTempFilePath({
						success: res => {
							let ctx = uni.createCanvasContext('qrcode1', that)
							ctx.setFillStyle('#fff');
							ctx.fillRect(0, 0, 200, 200);
							let promise = that.getTempFilePath(res.tempFilePath)
							promise.then((result) => {
							  ctx.drawImage(result, 8, 8, 184, 184);
							  ctx.draw(true);
							  setTimeout(ress => {
							  	uni.canvasToTempFilePath({
							  		x: 0,
							  		y: 0,
							  		width: 200, 
							  		height: 200,
							  		destWidth: 200,
							  		destHeight: 200,
							  		canvasId: 'qrcode1',
							  		success: (res3) => {
							  			uni.uploadFile({
							  				url: that.tui.interfaceUrl() +
							  					'/upload/file',
							  				filePath: res3.tempFilePath,
							  				name: 'file',
							  				header: {
							  					"content-type": "multipart/form-data",
							  					'accessToken': that.tui
							  						.getToken()
							  				},
							  				formData: {},
							  				success: (uploadFileRes) => {
							  					let path = JSON.parse( 
							  						uploadFileRes
							  						.data)
							  					//后端返回的地址，存入图片地址
							  					that.QrList1[index]
							  						.imgUrl = path
							  						.result
												that.canUpdate = true
							  					that.$forceUpdate()
							  				}
							  			});
							  		}
							  	});
							  }, 500)
							});
						}
					});
				}, 1000)
			},
			getTempFilePath(base64Data) {
				return new Promise((resolve, reject) => {
					const fs = uni.getFileSystemManager()
					base64Data = base64Data.split(',')[1]
					const fileName = 'temp_image_' + Date.now() + '.png' // 自定义文件名，可根据需要修改
					const filePath = uni.env.USER_DATA_PATH + '/' + fileName
					const buffer = uni.base64ToArrayBuffer(base64Data)
					fs.writeFile({
						filePath,
						data: buffer,
						encoding: 'binary',
						success:res => resolve(filePath),
						fail:err => reject(err)
					})
				});
			},
			addItemName(e, index) {
				if(e.detail.value.length>6){
					uni.showToast({
						title: '最多输入6个字符',
						icon: 'none'
					})
					this.QrList1[index].name = ''
					return
				}
				this.QrList1[index].name = e.detail.value
			},
			scanCodeAdd(index) {
				let that = this;
				uni.scanCode({
					success: (res) => {
						if (res.result != '') {
							if(res.result.indexOf('u.wechat.com') == -1 && res.result.indexOf('qr.alipay.com') == -1 && res.result.indexOf('wxp://') == -1 && res.result.length > 80){
								let uid = uni.getStorageSync('shopId').substring('10','12') + generateUUID().substring('0','7');
								let urlMapping = []
								urlMapping.push({
									id:uid,
									longUrl:res.result
								})
								that.tui.request("/app/urlMapping/saveOrUpdateUrlMapping", "post",urlMapping, false, false).then((res) => {
									if (res.code == 200) {
										that.QrList1[index].path = that.tui.interfaceUrl() + '/app/urlMapping/redirect?id='+uid
									}
								})
							}else{
								that.QrList1[index].path = res.result
							}
							that.QrUrl = that.QrList1[index].path
							that.canUpdate = false
							that.$forceUpdate()
							setTimeout(res => {
								that.getQRCode(index)
							}, 1000)
							
						} else {
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			delItem(index) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					success: function(res) {
						if (res.confirm) {
							that.QrList1.splice(index, 1)
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page,
	.page1 {
		background: #eee;
		height: 100%;
	}
</style>