<template>
    <div class="container">
        <div class="content">
            <div class="img-icon"></div>
            <!-- <groupAvatar class="img-icon" :users='wsStore.toUserInfo.avatars'></groupAvatar> -->
            <div class="title">群聊：{{wsStore.toUserInfo.sessionName}}</div>
            <qrcode-vue
                :value="qrtext"
                :size="196"
                background="transparent"
            />
            <div class="qr-title">该二维码7天内（{{ expireDate }} 前）有效</div>
            <!-- <van-button class="qr-btn" type="primary" size="large">保存到相册</van-button> -->
        </div>
    </div>
</template>

<script setup>
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
import groupAvatar from '../../components/groupAvatar/index.vue'
import QrcodeVue from "qrcode.vue";
const wsStore = useWebSocketStore();
const qrtext = wsStore.toUserInfo.uuid

const expireDate = computed(() => {
  const now = new Date();
  now.setDate(now.getDate() + 7);
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  return `${month}月${day}日`;
});
</script>

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
    .content{
        margin: 32px 58px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #000000;
        .img-icon{
            width: 82px;
            height: 82px;
            margin-bottom: 12px;
            margin-right: 0 !important;
        }
        .title{
            margin-bottom: 20px;
        }
        .qr-title{
            margin-top: 20px;
            font-size: 12px;
            color: #8D8D8D;
            margin-bottom: 54px;
        }
        .qr-btn{
            height: 40px !important;
            line-height: 40px !important;
            background: @theme-color1;
            border-radius:50px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            padding: 9px 0;
            box-sizing: border-box;
            color: #FFFFFF;
        }
        :deep(.van-button--primary){
            border: none !important;
        }
    }
}
</style>