<template>
    <a-modal v-model:visible="visible" title="绑定智能机器人" hide-cancel mask-closable esc-to-close draggable width="auto">
        <div class="container">
            <div class="left">
                <img src="../../assets/img/qrcode.png" alt="二维码" width="200">
            </div>
            <div class="line"></div>
            <div class="right">
                <div class="faceCode">
                    <div class="title">绑定码</div>
                    <div class="value">
                        {{ userInfo.bind_code }}
                    </div>
                </div>
                <div>
                    <div class="title">使用方法</div>
                    <div class="value">
                        添加智能机器人为QQ好友，并发送“/绑定 {{ userInfo.bind_code }}”完成绑定
                    </div>
                </div>
                <div v-if="userInfo.bot_account">
                    <div class="title">绑定账号</div>
                    <div class="value">
                        {{ userInfo.bot_account }}
                        <a-tag class="bindtag" color="green">
                            <template #icon>
                                <icon-check-circle-fill />
                            </template>
                            已绑定
                        </a-tag>
                    </div>
                </div>

            </div>
        </div>
    </a-modal>
</template>

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

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

const faceurl = ref('')

function openModal(record) {
    if (!record) return
    userInfo.value = record
    visible.value = true
}

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;

                .bindtag {
                    margin-left: 20px;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .container .left {
        display: flex;
        justify-content: center;
    }

    .container .line {
        width: 100%;
        height: 1px;
    }

    .container .right .faceCode .value {
        font-size: 1.75em;
        word-break: break-all;
    }
}
</style>