<template>
  <div class="w-full h-[100vh]">
    <ChatHeaderBar title="扫码结果" />
    <div class="h-250"></div>
    <ChatGroupAvatar class="mx-auto"></ChatGroupAvatar>
    <h1 class="w-220 text-center text-black-3 font-semibold text-xl mb-27 mt-16 mx-auto">
      {{ itemData?.groupName }}
    </h1>
    <!-- @click="
         navigateTo({
           path: '/',
           query: {
             groupId: leaderId
           }
         })
      " -->
    <!-- <van-cell center is-link size="large" :title="itemData?.showName" value="查看群主主页">
      <template #icon>
        <div class="w-48 h-48 rounded-full overflow-hidden border mr-12">
          <img
            class="w-full h-full shrink-0 object-cover"
            src="~/assets/img/chat/user.svg"
            alt=""
          />
        </div>
      </template>
    </van-cell> -->
    <!-- <van-cell
      center
      size="large"
      title="群介绍"
      label="44444444444444444444444444444444"
    ></van-cell>

    <van-cell
      center
      size="large"
      label="为维护逍遥游良好社区氛围，请遵守《逍遥游社区规范》如群聊疑似违规，可点击举报群聊"
    ></van-cell> -->

    <div class="fixed bottom-0 left-0 w-full box-border pb-40 pt-16 bg-white px-16">
      <!-- <van-button
        round
        type="primary"
        block
        :color="colorList[itemData?.codeShowStatus]"
        @click="chageState(itemData?.codeShowStatus)?.fn"
      >
        {{ chageState(itemData?.codeShowStatus)?.text }}
      </van-button> -->
      <van-button
        v-if="itemData?.codeShowStatus == 1"
        round
        type="primary"
        block
        color="#FF9300"
        @click="
          navigateTo({
            path: '/chat/group',
            query: {
              groupId: itemData.value.id
            },
            replace: true
          })
        "
      >
        立即聊天
      </van-button>

      <template v-if="itemData?.codeShowStatus == 0">
        <van-button round type="primary" block color="#FF9300" @click="handleQrcode">
          加入
        </van-button>
      </template>
      <van-button
        v-if="itemData?.codeShowStatus == 4"
        round
        type="primary"
        block
        color="#D9D9D9"
        @click=""
      >
        已申请
      </van-button>

      <van-button
        v-if="itemData?.codeShowStatus == 2"
        round
        type="primary"
        block
        color="#D9D9D9"
        @click=""
      >
        此群异常,暂不能加入
      </van-button>
      <van-button
        v-if="itemData?.codeShowStatus == 3"
        round
        type="primary"
        block
        color="#D9D9D9"
        @click=""
      >
        此群已解散
      </van-button>
    </div>
  </div>
</template>
<script setup>
const route = useRoute()

const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

const itemData = ref({})

definePageMeta({
  layout: false
})

useSeoMeta({
  title: '我的消息'
})

onMounted(() => {
  getGroupInfo()
})

async function getGroupInfo() {
  try {
    let { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
      query: {
        groupId: route.query?.groupId
      }
    })

    if (typeof data == 'object') {
      itemData.value = data
    }
  } catch (error) {}
}

// const colorList = ['#FF9300', '#FF9300', '#D9D9D9', '#D9D9D9', '#D9D9D9']

// // 切换状态
// function chageState(state) {
//   let item = {}
//   if (state == 0) {
//     item.text = '加入'

//     item.fn = handleQrcode
//   }

//   if (state == 1) {
//     item.text = '立即聊天'

//     item.fn = navigateTo({
//       path: '/chat/group',
//       query: {
//         groupId: itemData.value.id
//       },
//       replace: true
//     })
//   }
//   if (state == 2) {
//     item.text = '此群异常,暂不能加入'

//     item.fn = () => {}
//   }
//   if (state == 3) {
//     item.text = '此群已解散'

//     item.fn = () => {}
//   }
//   if (state == 4) {
//     item.text = '已申请'

//     item.fn = () => {}
//   }

//   return item
// }

// 申请加入群聊
const handleQrcode = async () => {
  try {
    let { data } = await request('/website/tourMember/invite', {
      query: {
        groupId: itemData.value.id,
        userId: userInfo.value.userId
      }
    })

    if (data == 3) {
      navigateTo({
        path: '/chat/group',
        query: {
          groupId: itemData.value.id
        },
        replace: true
      })
    }
    if (data == 2) {
      itemData.value.codeShowStatus = 4
    }

    if (data == 1) {
      showDialog({
        width: 260,
        title: '提示',
        message: '该群聊异常，无法加入',
        confirmButtonColor: '#FF9300'
      }).then(() => {})
    }
  } catch (error) {}
}
</script>
<style scoped lang="scss"></style>
