<template>
    <a-modal v-model:visible="visible" title="人脸采集" hide-cancel mask-closable esc-to-close draggable width="auto">
        <div class="container">
            <div class="left">
                <canvas ref="qrcodeCanvas"></canvas>
            </div>
            <div class="line"></div>
            <div class="right">
                <div class="faceCode">
                    <div class="title">人脸采集码</div>
                    <div class="value">{{ faceInfo.bind_code }}</div>
                </div>
                <div>
                    <div class="title">采集链接</div>
                    <div class="value">
                        <a :href="faceurl" target="_blank">{{ faceurl }}</a>
                    </div>
                </div>
                <div v-if="faceInfo.face_time">
                    <div class="title">上次采集时间</div>
                    <div class="value">
                       {{ stramptoTime(faceInfo.face_time) }}
                    </div>
                </div>
                <div v-if="faceInfo.face_url">
                    <div class="title">视频链接</div>
                    <div class="value">
                        <a :href="faceInfo.face_url" target="_blank">{{ faceInfo.face_url }}</a>
                    </div>
                </div>
            </div>
        </div>
    </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import QRCode from 'qrcode'

const visible = ref(false)
const faceInfo = ref({})

const qrcodeCanvas = ref(null)
const faceurl = ref('')

function openModal(record) {
    if (!record) return
    faceInfo.value = record
    faceurl.value = `https://xxoo365.top/#/faceReco?code=${record.bind_code}`

    QRCode.toCanvas(qrcodeCanvas.value, faceurl.value, { width: 200 }, function (error) {
        if (error) {
            console.error(error)
            return
        }

        // 绘制 logo
        const ctx = qrcodeCanvas.value.getContext('2d')
        const logo = new Image()
        logo.src = '/logo.svg'
        logo.onload = () => {
            const canvasSize = qrcodeCanvas.value.width
            const logoSize = canvasSize * 0.15 // logo 占二维码宽度的百分比
            const x = (canvasSize - logoSize) / 2
            const y = (canvasSize - logoSize) / 2
            ctx.drawImage(logo, x, y, logoSize, logoSize)
        }
    })

    visible.value = true
}

const stramptoTime = (time) => {
    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

defineExpose({ openModal })
</script>

<style lang="less" scoped>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    .line {
        border: 1px solid #999;
        height: 150px;
    }

    .right {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .title {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.2em;
            color: #666;
            user-select: none;
        }

        .faceCode {
            .value {
                font-size: 2.5em;
                font-weight: bold;
            }
        }
    }
}
</style>