<template>
  <div class="fixed-button-group">
    <div class="button-item" @click="handleVip">
      <el-badge :is-dot="readCount" class="item">
        <el-icon class="icon-item color-#10c55b!"><Trophy /></el-icon>
      </el-badge>
      <span class="button-text">VIP</span>
    </div>
    <div class="button-item" @click="handleService">
      <el-badge :is-dot="readCount" class="item">
        <el-icon class="icon-item color-#10c55b!"><Service /></el-icon>
      </el-badge>
      <span class="button-text">客服</span>
    </div>
    <div class="button-item" @click="handleSign">
      <el-icon class="icon-item color-#10c55b!"><Checked /></el-icon>
      <span class="button-text">签到</span>
    </div>
    <div class="button-item" @click="handlePublish">
      <el-icon class="icon-item color-#C561F9!"><Promotion /></el-icon>
      <span class="button-text">发布</span>
    </div>
    <div class="button-item mt-10px" @click="scrollToTop">
      <el-icon class="icon-item"><Top /></el-icon>
      <span class="button-text">顶部</span>
    </div>
  </div>
  <!-- 打开客服弹窗 弄成组件 -->
  <KlService v-if="dialogVisible" v-model:dialog-visible="dialogVisible"></KlService>
  <!-- vip组件 -->
  <KlVip v-if="showVip" v-model="showVip"></KlVip>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import useUserStore from '~/store/user'
  import { Service, Top, Promotion, Checked, Trophy } from '@element-plus/icons-vue'
  import KlService from './components/kl-service.vue'

  const showVip = ref(false)
  const handleVip = () => {
    // 判断是否登录
    const userStore = useUserStore()
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }
    showVip.value = true
  }

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth', // 平滑滚动
    })
  }

  const handlePublish = () => {
    // 判断是否登录
    const userStore = useUserStore()
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }
    // 新开窗口 用router跳转 新窗口打开
    navigateTo('/upnew/drawe')
  }

  const dialogVisible = ref(false)
  const handleService = () => {
    // 判断是否登录
    const userStore = useUserStore()
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }
    dialogVisible.value = true
    // 读取未读消息
    readCount.value = false
  }

  // 签到
  const handleSign = () => {
    // 判断是否登录
    const userStore = useUserStore()
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }
    navigateTo('/sign-page')
  }

  const readCount = ref(false)
  onMounted(() => {
    const userStore = useUserStore()
    userStore.mqttClient?.onMessage((topic: string, message: any) => {
      if (topic.indexOf(`zbjk_message_kefu`) === -1) return
      console.log('接收消息---------', topic, message)
      const msg = JSON.parse(message)
      if (msg.userId === userStore.userInfoRes.id) return
      if (!dialogVisible.value) {
        // 显示未读
        readCount.value = true
      }
    })
  })
</script>

<style lang="scss" scoped>
  .fixed-button-group {
    position: fixed;
    right: 10px;
    bottom: 120px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 2px;

    .button-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 41px;
      height: 52px;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: all 0.3s;

      &:hover {
        background-color: #10c55b;
        .button-text,
        .icon-item {
          color: #fff !important;
        }
      }

      .el-icon {
        font-size: 20px;
        color: #666;
        margin-bottom: 2px;
      }

      .button-text {
        font-size: 12px;
        color: #666;
        line-height: 1;
      }

      .el-badge {
        margin-bottom: 2px;
      }
    }
  }
</style>
