<!-- 用view渲染二维码，需要给定宽高和单位和数据：<cus-qrcode width="400" height="400" unit="rpx" data="baidu.com"></cus-qrcode> -->
<template>
	<view class="qr-wrapper" :style="{ width:`${width}${unit}`,height:`${height}${unit}` }">
		<!-- 绘制中, loading状态 -->
		<view class="qr-loading" v-if="loading">
			<slot name="loading">
				<image class="qr-loading-icon" src="data:image/gif;base64,[encoded data, 7724 characters]" />
			</slot>
		</view>
		<view v-else v-for="(row, rowI) in modules" :key="rowI" class="qr-content" :style="{ width:`${width}${unit}`,height:`${height}${unit}` }">
			<!--#ifndef APP-PLUS-NVUE-->
			<view v-for="(col, colI) in row" :key="colI">
				<view :style="{ width:`${per}vw`,height:`${per}vw`,backgroundColor: `${color || 'black'}`}" v-if="col.isBlack">
					<!-- 内容色码点 -->
				</view>
				<view v-else style="background-color: white;" :style="{ width:`${per}vw`,height:`${per}vw` }">
					<!-- 空白码点 -->
				</view>
			</view>
			<!--#endif-->
			<!--#ifdef APP-PLUS-NVUE-->
			<view v-for="(col, colI) in row" :key="colI">
				<view :style="{ width:`${per}${unit}`,height:`${per}${unit}`,backgroundColor: `${color || 'black'}`}" v-if="col.isBlack">
					<!-- 内容色码点 -->
				</view>
				<view v-else style="background-color: white;" :style="{ width:`${per}${unit}`,height:`${per}${unit}` }">
					<!-- 空白码点 -->
				</view>
			</view>
			<!--#endif-->
			<!-- 中间logo（新增部分） -->
			<view class="qrcode-logo">
				<slot name="logo">
					<image
					    v-if="logo"
						class="logo-image"
						:src="logo" 
						:style="{
							width: (logoWidth || '100') + unit,
							height: (logoHeight || '100') + unit,
							borderRadius: '5rpx'
						}"
					/>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from './uqrcode_latest.js';
	export default {
		name: 'ikunQrcode',
		props: ['width', 'height', 'unit', 'data', 'color', 'logo',"logoWidth", "logoHeight"],
		data() {
			return {
				per: 1, // 每一个小方块的单位长宽
				nvue_per: 1, // 同上，for app-plus或者nvue环境
				modules: [], // 二维码数据
				loading: true, // 绘制状态
			}
		},
		mounted() {
			this.init()
		},
		watch: {
			// 监听数据改变， 重新绘制
			data: {
				handler(val) {
					if (val) {
						this.init()
					}
				}
			}
		},
		methods: {
			init() {
				const qr = new UQRCode();
				qr.data = this.data
				if (!this.data) return // 数据为空不渲染
				this.loading = true
				try {
					qr.make();
					this.modules = qr.modules;
				} finally {
					this.loading = false
				}
				this.per = Number( this.width / 750 * 100 / this.modules.length )
				this.per_nvue = this.width / this.modules.length
				// console.log('per', this.per)
			}
		}
	}
</script>

<style scoped>
	.qr-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.qr-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.qr-loading {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.qr-loading-icon {
		width: 50%;
		height: 50%;
	}
	/* 新增logo样式 */
	.qrcode-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		background-color: white;
		padding: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>