<template>
    <div class="img-box">
        <el-row :gutter="40">
            <el-col :span="12">
                <p style="text-align: center;margin-bottom: 10px;width:200px">高版本(支持安卓V7.0以上版本)</p>
                <!-- <el-image style="width: 100%; height: 100%" :src="imgUrl" :fit="'contain'" /> -->
                <el-image :src="imgUrl" :fit="'contain'" />
            </el-col>
            <el-col :span="12">     
                <p style="text-align: center;margin-bottom: 10px;width:200px">低版本(支持安卓V7.0以下版本)</p>        
                <el-image :src="imgUrl2" :fit="'contain'" />
            </el-col>       
        </el-row>
    </div>
</template>

<script lang="ts">
export default {
    name: 'pdaDownload'
};
</script>

<script lang="ts" setup>
import { reactive, onMounted, toRefs } from 'vue';
import { ElImage } from 'element-plus';
import { BarcodeFormat, EncodeHintType, MultiFormatWriter } from '@zxing/library';

const state = reactive({
    imgUrl: '',
    imgUrl2: ''
})
const {
    imgUrl,
    imgUrl2
} = toRefs(state);



onMounted(() => {
    creatCode()
});

function createCanvas(url: string,apk: string) {
    const writer = new MultiFormatWriter();
    const hints = new Map();
    hints.set(EncodeHintType.MARGIN, 1);
    const result = writer.encode(url + apk, BarcodeFormat.QR_CODE, 200, 200, hints);
        const canvas = document.createElement('canvas');
        const ctx: any = canvas.getContext('2d');
        canvas.width = result.getWidth();
        canvas.height = result.getHeight();
        for (let y = 0; y < result.getHeight(); y++) {
            for (let x = 0; x < result.getWidth(); x++) {
                ctx.fillStyle = result.get(x, y) ? '#000' : '#fff';
                ctx.fillRect(x, y, 1, 1);
            }
        }
        
        return canvas.toDataURL('image/png');
}

function creatCode() {
    const writer = new MultiFormatWriter();
    const hints = new Map();
    hints.set(EncodeHintType.MARGIN, 1);
    try {
        // 'http://192.168.1.73:8086/PDA.apk'
        const url = "http://172.22.10.217:8086/";

        const result = writer.encode(url + 'PDA.apk', BarcodeFormat.QR_CODE, 200, 200, hints);
        const canvas = document.createElement('canvas');
        const ctx: any = canvas.getContext('2d');
        canvas.width = result.getWidth();
        canvas.height = result.getHeight();
        for (let y = 0; y < result.getHeight(); y++) {
            for (let x = 0; x < result.getWidth(); x++) {
                ctx.fillStyle = result.get(x, y) ? '#000' : '#fff';
                ctx.fillRect(x, y, 1, 1);
            }
        }
        state.imgUrl = canvas.toDataURL('image/png');

        state.imgUrl2 = createCanvas(url, 'PDA2.apk');
        
    } catch (error) {
        console.error('Failed to generate QR code:', error);
    }
}


</script>
<style scoped>
.img-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
}
</style>