<script setup>
import {reactive, watch} from "vue";
import XModal from "./XModal.vue";
import Api from "../api/index.js";

const show = defineModel('show');
const detail = reactive({});

watch(
    () => show.value,
    (val) => {
        if (val) Api.system.getQrcode(1).then(({data}) => {
            Object.assign(detail, data);
        });
    },
)
</script>

<template>
    <x-modal
        v-model:show="show">
        <view class="px-[30rpx] py-[40rpx] relative">
            <image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]"
                   src="/static/icons/close.png"></image>

            <view class="title">微信扫码添加</view>
            <view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
                <image class="!size-full" :src="detail.qrcode"></image>
            </view>
            <view class="desc !mt-[24rpx]">请发送 [我的] 页面截图给客服</view>
            <view class="desc">再描述您的问题</view>
        </view>
    </x-modal>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 34rpx;
    font-weight: 500;
    line-height: 48rpx;
    letter-spacing: 0;
    text-align: center;
}

.desc {
    color: rgb(78, 89, 105);
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
}
</style>
