<template>
	<view class="com-calendar-form" v-if="info">
		<view class="date">{{info.tripDate}}</view>
		<view class="title">{{info.intro}}</view>
		<view class="content">
			<rich-text :nodes="info.content"></rich-text>  
			<view class="btn"  v-if="info.path!=''" > 
				<view class="hx-btn" v-if="info.userTicket" @click="onViewQrCode(info.userTicket.hxCode)">
					查看核销码					
				</view>
				<view v-else></view>
				<view  @click="onViewPage(info.path)" class="link">立即访问</view>
			</view>
		</view>
		
		
		
		<uni-popup ref="qrForm">
			<view class="qr-code" > 
					
				  	<view class="qr-box">
							<view class="qrcode">
							  <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
									 <view v-for="(col, colI) in row" :key="colI">
										   <view v-if="col.isBlack" style="width: 5px;height: 5px;background-color: black;">
											 <!-- 黑色码点 -->
										   </view>
										   <view v-else style="width: 5px;height: 5px;background-color: white;">
											 <!-- 白色码点 -->
										   </view>
									 </view>
							  </view>
							</view>
					</view>
					<view class="qr-text">核销码:{{qrText}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	
	export default {
		name:"CalendarForm",
		props:{
			info:{
				type:Object,
				default:()=>{
					return null;
				}
			}
		},
		watch:{
			'info':{
				handler(val){
					console.log("val",val);
					
				},
				deep:true,
				immediate:true,
			}
		},
		data() {
			return {
				qrText:'二维码内容',
				modules: [],
			};
		},
		methods:{
			//查看二维码
			onViewQrCode(e){
				let _this=this; 
				_this.qrText=e;
			 
				 // 获取uQRCode实例
				const qr = new UQRCode();
				 qr.data = e+"&T"; 
				 qr.make();
				_this.modules = qr.modules; 
				_this.$refs.qrForm.open("center"); 
			},
			onViewPage(url){
				uni.navigateTo({
					url:url,
				})
			}
		},
	}
</script>

<style lang="scss">
@import './CalendarForm.scss'
</style>