<template>
  <div class="w-full h-[100vh]">
    <ChatHeaderBar title="群聊二维码" />
    <div class="h-100"></div>

    <div class="w-60 h-60 mx-auto rounded-full border overflow-hidden">
      <img
        class="w-full h-full object-cover"
        v-if="queueParmars?.groupAvatar"
        :src="queueParmars.groupAvatar"
        alt=""
      />
      <img class="w-full h-full object-cover" v-else src="~/assets/img/default_avatar.png" alt="" />
    </div>
    <!-- :list="queueParmars?.groupAvatar"  -->

    <!-- <ChatGroupAvatar class="mx-auto"></ChatGroupAvatar> -->

    <h1 title="" class="w-300 mt-16 mb-18 text-center mx-auto text-xl text-black-3 font-semibold">
      群聊：{{ queueParmars?.groupName }}
    </h1>

    <div class="relative mb-21 w-220 h-220 bg-white rounded-lg mx-auto box-border">
      <img class="h-full w-full" src="~/assets/img/chat/qr-code-box.png" alt="" />
      <img
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-170 h-170 shrink-0 object-cover"
        :src="qrCode"
        alt=""
      />
    </div>

    <p class="w-full text-center text-sm text-black-6">该二维码7天内有效，重新进入将更新</p>
  </div>
</template>

<script setup>
const route = useRoute()
definePageMeta({
  layout: false
})

onMounted(() => {
  getQrCode()
})

// getGroupQR
const QRURI = ref(`${import.meta.env.VITE_APP_BASE_URL}website/tourGroup/getGroupQR`)
const qrCode = ref('')
const queueParmars = reactive({
  groupId: computed(() => route.query?.groupId ?? ''),
  groupName: computed(() => route.query?.groupName ?? ''),
  groupAvatar: computed(() => route.query?.groupAvatar ?? '')
})

useSeoMeta({
  title: '群聊'
})

// 转换时间
function convertTimeStamp(timestamp) {
  // 将时间戳转换为日期对象
  let date = new Date(timestamp)

  // 增加7天
  date.setDate(date.getDate() + 7)

  // 获取新的月份和日期
  let month = date.getMonth() + 1 // getMonth() 返回的月份是 0-11，所以需要加 1
  let day = date.getDate() // 获取日期

  // 格式化为 "m-d" 格式
  let formattedDate = `${month}月${day < 10 ? '0' + day : day}日`
  return formattedDate
}

function getQrCode() {
  try {
    showLoadingToast({
      message: '加载中...',
      duration: 100000
    })
    qrCode.value = QRURI.value + `?groupId=${queueParmars.groupId}&systemOs=1`

    closeToast()
  } catch (error) {
  } finally {
    closeToast()
  }
}
</script>
<style lang="scss" scoped></style>
