<template>
    <view>
        <!-- class="ewm-dialog" -->
        <van-popup :show="upImgShow" closeable @close="openImgEwm">
            <view :class="'ewm-content ' + (isOpacity ? 'none' : '')">
                <view class="img-text" style="display: flex; align-items: center; justify-content: center">
                    <text>姓名：{{ userData.patDesc }}</text>
                    <text style="margin-left: 40rpx">人员标识：{{ userData.hisPatNo }}</text>
                </view>
                <view style="display: flex; align-items: center; justify-content: center">
					<!-- #ifdef MP -->
                    <canvas id="barcode2" canvas-id="barcode2" type="2d" style="width: 600rpx; height: 140rpx"></canvas>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<svg ref="barcode" style="width: 300px; height: 70px"></svg>
					<!-- #endif -->
                </view>
                <view style="padding: 30rpx; display: flex; align-items: center; justify-content: center; margin-top: 30rpx">
                    <canvas type="2d" id="qrCode" ref="qrCode" canvas-id="qrCode" style="width: 200px; height: 200px"></canvas>
                </view>
                <view class="img-text2">扫一扫上面的二维码图案，快速就诊</view>
            </view>
        </van-popup>
    </view>
</template>

<script>
/**
 * 就诊码
 */
import VanPopup from "@/components/popup/index.vue";
// #ifdef MP
const drawQrcode = require('@/utils/weapp-qrcode.js');
import { CODE128 } from '@/utils/wxbarcode';
// #endif
// #ifdef H5
import JsBarcode from 'jsbarcode';
import UQRCode from 'uqrcodejs';
// #endif
export default {
	components: {
		'van-popup': VanPopup
	},
    data() {
        return {
            upImgShow: false,
            isOpacity: true,
            imgsrc: '',

            userData: {
                patDesc: '',
                hisPatNo: ''
            }
        };
    },
    props: {},
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {},

        attached() {
            const userData = uni.getStorageSync('userData');
            this.setData({
                userData
            });
        },

        initCanvasWithDelay() {
            setTimeout(() => {
                this.drawImage();
            }, 100); // 100ms delay is usually enough
        },

        openImgEwm() {
            const _this = this;
            const bol = !this.upImgShow;
			console.log('openImgEwm === ', bol)
            if (bol) {
                this.setData({
					isOpacity: false,
                    upImgShow: bol
                });
                _this.initCanvasWithDelay();
            } else {
                _this.setData({
                    isOpacity: !bol
                });
                setTimeout(() => {
                    _this.setData({
                        upImgShow: bol
                    });
                }, 100);
            }
        },

        //获取二维码
        drawImage: function () {
            const userData = this.$cache.get('userData');
            console.log('获取二维码', userData.hisPatNo);
            let _this = this;
            let url = `${userData.hisPatNo}`;
			// #ifdef MP
            const query = uni.createSelectorQuery().in(_this);
            query
                .select('#my-canvas')
                .fields({
                    node: true,
                    size: true
                })
                .exec(async (res) => {
                    if (!res[0] || !res[0].node) {
                        return;
                    }
                    const canvas = res[0].node;
                    await drawQrcode({
                        canvas: canvas,
                        canvasId: 'my-canvas',
                        width: 200,
                        padding: 30,
                        background: '#ffffff',
                        foreground: '#000000',
                        text: url,
                        callback: function (e) {
                            uni.canvasToTempFilePath({
                                x: 0,
                                y: 0,
                                canvasId: 'canvas',
                                success: function (res) {
                                    _this.setData({
                                        imgsrc: res.tempFilePath
                                    });
                                },
                                fail: function (res) {}
                            });
                        }
                    });
                    _this.drawImage2();
                });
			// #endif
			// #ifdef H5
			const qr = new UQRCode();
			qr.data = url; // 设置二维码内容
			qr.size = 200; // 设置二维码大小，必须与canvas设置的宽高一致
			qr.make(); // 调用制作二维码方法
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrCode', this); // 如果是组件，this必须传入
			qr.canvasContext = canvasContext; // 设置uQRCode实例的canvas上下文
			qr.drawCanvas(); // 调用绘制方法将二维码图案绘制到canvas上
			// #endif
			_this.drawImage2()
		},

        //获取条形码
        drawImage2: function () {
            const userData = this.$cache.get('userData');
            let url = `${userData.hisPatNo}`;
			// #ifdef MP
            CODE128(
                '#barcode2',
                url,
                {
                    canvasType: '2d',
                    width: 600,
                    height: 140,
                    lineColor: '#000000'
                },
                this
            );
			// #endif
			// #ifdef H5
			const barcodeRef = this.$refs['barcode'];
			if (barcodeRef) {
				JsBarcode(barcodeRef, url, {
					format: 'CODE128', // 条形码类型
					lineColor: '#000', // 线条颜色
					width: 3.5, // 条形码宽度
					height: 70, // 条形码高度
					displayValue: false, // 是否显示文本
					fontSize: 30,// 文字大小
					background: "#fff", // 白色背景
					margin: 5,
					marginTop: 5,
					marginBottom: 5,
					marginLeft: 5,
					marginRight: 5
				});
			}
			// #endif
            this.setData({
                isOpacity: false
            });
        }
    },
    created: function () {}
};
</script>
<style>
.none {
    display: none;
}
.ewm-dialog {
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}
.ewm-dialog .bg {
    position: relative;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.ewm-content {
    width: 700rpx;
	/* #ifdef MP */
	margin: 50rpx 0;
	/* #endif */
	/* #ifdef H5 */
	padding-bottom: 20px;
	/* #endif */
    background: #fff;
}

.img-text {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    padding: 30rpx;
}

.img-text2 {
    font-size: 24rpx;
    font-weight: 500;
    color: #999;
    line-height: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
}
</style>
