<template>
    <div class="main">
        <u-button type="primary" :text="'审核员 ' + name" shape="circle" color="#AB2F23" style="width:700rpx "></u-button>
        <image :src="ticketsInfo.ticketCoverPic" mode="scaleToFill" class="img" />
        <card>
            <template #l1>
                <div class="box-left">
                    姓名
                </div>
            </template>
            <template #r1>
                {{ userInfo.userName || '' }}
            </template>
            <template #l2>
                <div class="box-left">
                    身份证号
                </div>
            </template>
            <template #r2>
                <div class="box-right">
                    {{ userInfo.idCard || '' }}
                </div>
            </template>
            <template #l3>
                <div class="box-left">
                    领票日期
                </div>
            </template>
            <template #r3>
                {{ ticketsInfo.drawDay }}
            </template>
            <template #l4>
                <div class="box-left">
                    核验项目
                </div>
            </template>
            <template #r4>
                {{ ticketsInfo.ticketName }}
            </template>
            <template #l5 v-if="userInfo.checkTime">
                <div class="box-left">
                    核验日期
                </div>
            </template>
            <template #r5 v-if="userInfo.checkTime">
                {{ userInfo.checkTime }}
            </template>
        </card>
        <u-button type="primary" text="核验人像" shape="circle" color="#000" style="width:436rpx " @click="openPicUrl"
            v-if="ticketsInfo.status === 1"></u-button>
    </div>
</template>

<script>
import card from '@/components/card/moreDataCard'
export default {
    components: {
        card
    },
    data() {
        return {
            appointmentUid: '',
            ticketsInfo: {},
            userInfo: {},
            name: uni.getStorageSync('nickName')
        }
    },
    onLoad(option) {
        console.log(option.qrcode)
        this.appointmentUid = option.qrcode
        this.getQrInfo()
    },
    methods: {
        getQrInfo() {
            this.$request.qrCodeInfo({ appointmentUid: this.appointmentUid }).then((res) => {
                if (res.status === 0) {
                    this.ticketsInfo = res.data.ticketsInfo
                    this.userInfo = res.data.userInfo[0]
                } else {
                    uni.$u.toast(res.msg);
                }
            })
        },

        checkPerson() {
            uni.connectSocket({
                url: `wss://warehouse.szjixun.cn/ticket/api/smart/check/issue/msg?AppointmentUid=${this.appointmentUid}`,
                success: function () {
                    console.log('WebSocket连接已创建成功！');
                }
            });
            uni.onSocketOpen((res) => {
                console.log(res, 'onSocketOpen')
            });
            uni.onSocketMessage((res) => {
                console.log('WebSocket接收到消息：', res);
                if (res.data) {
                    this.checkQr(res.data)
                }
            });
            uni.onSocketError(function (res) {
                console.log(res);
            });
            uni.onSocketClose(function (res) {
                console.log('WebSocket 已关闭！', res);
            });

        },
        openPicUrl() {
            this.$request.openPicUrl({ appointmentUid: this.appointmentUid }).then((res) => {
                if (res.status === 0) {
                    this.checkPerson()
                } else {
                    uni.$u.toast(res.msg);
                }
            })
        },
        checkQr(img) {
            this.$request.checkQr({
                appointmentUid: this.appointmentUid,
                imageUrl: img
            }).then((res) => {
                if (res.status === 0) {
                    this.getQrInfo()
                } else {
                    uni.$u.toast(res.msg);
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: url('@/static/bg.png');
    background-size: cover;
    box-sizing: border-box;
    padding: 42rpx 26rpx;

    .img {
        width: 100%;
        height: 354rpx;
        margin-top: 40rpx;
    }

    .box-left {
        font-size: 28rpx;
    }
}
</style>