<template>
  <div class="right-bar">
    <!-- 特惠套餐 -->
    <div class="right-bar-item" @click="handleSpecialOffer" title="点击查看特惠套餐">
      <div class="icon-container">
        <svg width="22" height="22" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_46_4230)">
            <path
              d="M17.8281 2.75L17.9023 2.83105L23.6846 9.16895L23.8506 9.35059L23.6719 9.51953L11.1016 21.3955L10.8926 21.5938L10.7256 21.3594L8.7959 18.6445L8.66992 18.4668L8.8291 18.3174L18.7158 9.05566L16.249 6.35156H8.56641L5.88867 9.28516L8.48633 12.6309L11.7861 9.60156L11.8584 9.53613H17.1035L16.624 9.9707L8.12402 17.6855L7.92285 17.8672L7.75781 17.6523L1.30176 9.28809L1.17383 9.12109L1.31543 8.9668L6.91309 2.83105L6.9873 2.75H17.8281Z"
              fill="url(#paint0_linear_46_4230)" stroke="white" stroke-width="0.5" />
          </g>
          <defs>
            <linearGradient id="paint0_linear_46_4230" x1="18.5" y1="19" x2="6" y2="0.499999"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#FF5820" />
              <stop offset="0.645259" stop-color="#FFA220" />
              <stop offset="1" stop-color="#FFCF20" />
            </linearGradient>
            <clipPath id="clip0_46_4230">
              <rect width="24" height="24" fill="white" transform="translate(0.5)" />
            </clipPath>
          </defs>
        </svg>
      </div>
      <span class="item-text">特惠<br>套餐</span>
    </div>


    <!-- 说明 -->
    <div class="right-bar-item" @click="handleHelp" title="点击查看使用说明">
      <div class="icon-container">
        <svg width="22" height="22" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.75 5.5V23.25H3.25V0.75H20L21.75 3.25H5.75V20.75H19.25V5.5H21.75Z" fill="#666" />
          <path d="M9 10.5H16" stroke="#666" stroke-width="2.5" />
          <path d="M9 15H16" stroke="#666" stroke-width="2.5" />
        </svg>
      </div>
      <span class="item-text">使用<br>说明</span>
    </div>

    <!-- 联系 -->
    <div class="right-bar-item contact-item" @click="handleContact" @mouseenter="showContactPopup" @mouseleave="hideContactPopup"
      title="查看联系客服">
      <div class="icon-container contact-icon-container">
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1760088114392" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="1247" width="200" height="200"><path d="M190.591634 960.526793c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-69.493701 82.050731-119.721821 226.370569-139.847472l0-9.63279c-97.876029-74.998152-97.876029-213.985554-97.876029-298.616496 0-139.675458 82.222745-223.102301 219.834033-223.102301l7.396607 0c137.611288 0 219.834033 83.426844 219.834033 223.102301 0 10.320847-0.172014 20.641693-0.344028 31.306568-0.516042 17.717453-14.965228 31.650596-32.854695 31.134554-17.717453-0.516042-31.650596-15.137242-31.134554-32.854695 0.344028-9.976818 0.344028-19.781623 0.344028-29.586427 0-105.616664-52.464304-159.113052-155.844784-159.113052l-7.396607 0c-103.38048 0-155.844784 53.496388-155.844784 159.113052 0 102.176382 6.364522 206.244919 83.082815 255.096926 9.288762 5.84848 14.793214 15.997312 14.793214 27.006215L448.956828 817.067025c0 16.341341-12.385016 30.102469-28.554342 31.82261-128.494541 13.589115-197.816227 51.260205-197.816227 79.642533C222.586259 946.077608 208.137074 960.526793 190.591634 960.526793z" fill="#575B66" p-id="1248"/><path d="M833.752394 960.526793c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-28.554342-69.321687-66.053418-197.816227-79.642533-16.341341-1.720141-28.726356-15.48127-28.726356-31.82261l0-54.700487c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 26.318159c144.319839 19.953637 226.370569 70.353771 226.370569 139.847472C865.747018 946.077608 851.469847 960.526793 833.752394 960.526793z" fill="#575B66" p-id="1249"/><path d="M612.198219 673.435243c-44.035612 0-76.890307-4.472367-77.750378-4.644381-15.825298-4.816395-25.286074-20.813707-21.845792-37.155048 3.268268-16.169326 18.40551-26.834201 34.918864-25.286074 79.814547 8.77272 201.600538 1.204099 222.930287-43.175542 7.568621-15.825298 26.662187-22.705863 42.659499-14.965228 15.997312 7.568621 22.705863 26.834201 14.965228 42.659499C794.705191 660.36217 687.368386 673.435243 612.198219 673.435243z" fill="#575B66" p-id="1250"/><path d="M896.021502 639.892491c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-111.809172-42.831514-15.309256c-12.729044-4.472367-21.32975-16.685369-21.32975-30.102469 0-160.489165-129.182597-291.219889-287.951621-291.219889-158.769024 0-287.951621 130.730724-287.951621 291.219889 0 10.320847-4.988409 19.953637-13.417101 25.974131l-18.577524 13.245087 0 118.00168c0 17.717453-14.277171 31.994625-31.994625 31.994625s-31.994625-14.277171-31.994625-31.994625l0-134.34302c0-10.320847 4.988409-19.953637 13.417101-25.974131l18.921552-13.589115C169.089871 245.980178 323.386528 95.639845 511.913993 95.639845c186.463296 0 339.555854 147.072065 351.252814 332.331262l43.51957 15.48127c12.729044 4.472367 21.32975 16.685369 21.32975 30.102469l0 134.34302C928.016126 625.61532 913.738955 639.892491 896.021502 639.892491z" fill="#575B66" p-id="1251"/></svg>
      </div>
      <span class="item-text">联系<br>客服</span>

      <!-- 联系悬浮框 -->
      <div v-show="contactPopupVisible" class="contact-popup-new">
        <!-- 骨架屏背景 -->
        <div v-if="!bgImageLoaded" class="contact-skeleton-bg">
          <div class="skeleton-shimmer"></div>
        </div>

        <!-- 实际背景容器 -->
        <div class="contact-bg-container" :class="{ 'bg-loaded': bgImageLoaded }">
          <!-- 预留背景图容器 -->
        </div>

        <!-- 内容区域 -->
        <div class="contact-content" :class="{ 'content-loaded': bgImageLoaded }">
          <!-- 骨架屏内容 -->
          <div v-if="!bgImageLoaded" class="contact-skeleton-content">
            <div class="skeleton-title"></div>
            <div class="skeleton-qr-section">
              <div class="skeleton-qr-container">
                <div class="skeleton-qr-shimmer"></div>
              </div>
              <div class="skeleton-qr-tip"></div>
            </div>
            <div class="skeleton-divider"></div>
            <div class="skeleton-phone-section">
              <div class="skeleton-phone-icon"></div>
              <div class="skeleton-phone-info">
                <div class="skeleton-phone-time"></div>
                <div class="skeleton-phone-number"></div>
              </div>
            </div>
          </div>

          <!-- 实际内容 -->
          <div v-else class="contact-real-content">
            <div class="contact-title">企业微信咨询</div>
            <div class="contact-qr-section">
              <div class="qr-code-container">
                <img v-if="qrCodeUrl && !loading" :src="qrCodeUrl" alt="企业微信二维码" class="qr-code-image" />
                <div v-else class="qr-code-loading">
                  <div class="loading-spinner"></div>
                </div>
              </div>
              <div class="qr-code-tip">手机扫码加微信答疑群</div>
            </div>
            <!-- 分界线 -->
            <div class="divider"></div>
            <div class="contact-phone-section">
              <div class="phone-icon">
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_68_7500_popup)">
                    <path d="M7.5 19V8.5C7.5 5.46243 9.96243 3 13 3C16.0376 3 18.5 5.46243 18.5 8.5V19" stroke="#F8FAFC"
                      stroke-width="2.66953" />
                    <path d="M18.7883 17.9497V19.0175H13.4492" stroke="#F8FAFC" stroke-width="2.66953" />
                    <path
                      d="M19.5 10.335H18.835V17.665H19.5C21.5243 17.665 23.165 16.0243 23.165 14C23.165 11.9757 21.5243 10.335 19.5 10.335Z"
                      stroke="#F8FAFC" stroke-width="2.66953" />
                    <path
                      d="M6.5 10.335H7.16504V17.665H6.5C4.47575 17.665 2.83496 16.0243 2.83496 14C2.83496 11.9757 4.47575 10.335 6.5 10.335Z"
                      stroke="#F8FAFC" stroke-width="2.66953" />
                    <path d="M12.3818 16.8813H16.2151V20.345H12.3818V16.8813Z" fill="#F8FAFC" />
                  </g>
                  <defs>
                    <clipPath id="clip0_68_7500_popup">
                      <rect width="24" height="24" fill="white" transform="translate(0.5)" />
                    </clipPath>
                  </defs>
                </svg>
              </div>
              <div class="phone-info">
                <div class="phone-time">咨询电话：09:00-21:00</div>
                <div class="phone-number">0571-87682985</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getWechatQRList } from '../api/user'
import { Headset } from '@element-plus/icons-vue'

const router = useRouter()

// 控制弹窗显示状态
const contactPopupVisible = ref(false)

// 企业微信二维码数据
const qrCodeUrl = ref('')
const loading = ref(false)

// 背景图加载状态
const bgImageLoaded = ref(false)
const bgImageError = ref(false)

// 特惠套餐点击处理
const handleSpecialOffer = () => {
  // 跳转到购买会员页面
  router.push('/membership')
}

// 说明点击处理
const handleHelp = () => {
  // 跳转到飞书说明文档
  window.open('https://lcnezxfyaf18.feishu.cn/wiki/QK5Fwmkv1iHezLkNwnScNxkbnWf', '_blank')
}

// 联系点击处理
const handleContact = () => {
  // 可以在这里添加联系相关逻辑
  console.log('点击联系')
}

// 显示联系弹窗
const showContactPopup = () => {
  contactPopupVisible.value = true
}

// 隐藏联系弹窗
const hideContactPopup = () => {
  contactPopupVisible.value = false
}

// 获取企业微信二维码
const fetchQRCode = async () => {
  try {
    loading.value = true
    const response = await getWechatQRList()
    if (response && response.code === 200 && response.data && response.data.qrCodes && response.data.qrCodes.length > 0) {
      // 取第一个二维码
      qrCodeUrl.value = response.data.qrCodes[0].qrCodeUrl
    }
  } catch (error) {
    console.error('获取企业微信二维码失败:', error)
  } finally {
    loading.value = false
  }
}

// 背景图预加载处理
const preloadBackgroundImage = () => {
  const img = new Image()
  img.onload = () => {
    bgImageLoaded.value = true
  }
  img.onerror = () => {
    bgImageError.value = true
    bgImageLoaded.value = true // 即使加载失败也显示内容
  }
  // 设置图片路径 - 这里使用相对路径，Vite会自动处理
  img.src = new URL('../assets/RightBar/bg.png', import.meta.url).href
}

// 组件挂载时获取二维码和预加载背景图
onMounted(() => {
  fetchQRCode()
  preloadBackgroundImage()
})
</script>

<style scoped>
.right-bar {
  position: fixed;
  right: 0;
  top: 0;
  width: 60px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 5px;
  box-sizing: border-box;
}

.right-bar-item {
  position: relative;
  width: 50px;
  height: 78px;
  margin: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #ffffff;
  padding: 6px 4px;
  box-sizing: border-box;
  border-radius: 8px;
}

.right-bar-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -5px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
}

.right-bar-item:hover {
  background: #0F172A;
  transform: translateX(-3px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
  z-index: 1001;
}

.right-bar-item:hover .icon-placeholder {
  background: #FF7420;
  transform: scale(1.1);
}

.right-bar-item:hover .icon-container {
  transform: scale(1.1);
}

.right-bar-item:hover .icon-container svg path {
  fill: #F8FAFC !important;
  stroke: #F8FAFC !important;
}

.right-bar-item:hover .icon-container svg g path {
  fill: #F8FAFC !important;
  stroke: #F8FAFC !important;
}

/* 移除 Element Plus 图标继承的 stroke */
.contact-icon-container .el-icon svg path {
  stroke: none;
}

.right-bar-item:hover .contact-icon-container .el-icon svg path {
  stroke: none !important;
}

.right-bar-item:hover .item-text {
  color: #FF7420;
  font-weight: 600;
}

/* 特惠套餐默认橙色状态 */
.right-bar-item:first-child {
  background: #ffffff;
}


.right-bar-item:first-child .icon-container svg path {
  fill: #FF7420 !important;
  stroke: #FF7420 !important;
}

.right-bar-item:first-child .item-text {
  color: #FF7420;
  font-weight: 600;
}

.right-bar-item:first-child:hover .icon-container svg path {
  fill: #FF7420 !important;
  stroke: #FF7420 !important;
}

.right-bar-item:first-child:hover {
  background: #0F172A !important;
}

.right-bar-item:first-child:hover .item-text {
  color: #FF7420;
  font-weight: 600;
}

.icon-placeholder {
  width: 22px;
  height: 22px;
  background: #ddd;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
  /* 预留图标位置 */
}

.icon-container {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.icon-container svg path {
  fill: #666;
  stroke: #666;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.icon-container svg g path {
  fill: #666;
  stroke: #666;
  transition: fill 0.3s ease, stroke 0.3s ease;
}


.item-text {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  line-height: 15px;
  letter-spacing: 0%;
  text-align: center;
  color: #666;
  white-space: normal;
  word-break: keep-all;
  max-width: 100%;
  transition: all 0.3s ease;
  margin-top: 2px;
}


/* 新联系弹窗样式 */
.contact-popup-new {
  position: absolute;
  right: 65px;
  top: 0;
  width: 240px;
  height: 320px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  overflow: hidden;
}

/* 骨架屏背景 */
.contact-skeleton-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E0 100%);
  border-radius: 12px;
}

.skeleton-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.contact-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
  /* 预留背景图位置 - 您可以在这里添加 background-image */
  background-image: url('../assets/RightBar/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.contact-bg-container.bg-loaded {
  opacity: 1;
}

.contact-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
}

/* 骨架屏内容样式 */
.contact-skeleton-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.skeleton-title {
  width: 120px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  margin: 0 auto 16px auto;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.skeleton-qr-container {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-qr-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
  animation: skeleton-slide 1.8s ease-in-out infinite;
}

.skeleton-qr-tip {
  width: 100px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 12px 0;
}

.skeleton-phone-section {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
  border-radius: 8px;
}

.skeleton-phone-icon {
  width: 24px;
  height: 25px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-phone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skeleton-phone-time {
  width: 140px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-phone-number {
  width: 100px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* 实际内容样式 */
.contact-real-content {
  opacity: 0;
  animation: fade-in 0.5s ease-in-out forwards;
}

.contact-content.content-loaded .contact-real-content {
  opacity: 1;
}

.contact-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-align: center;
  margin-bottom: 16px;
}

.contact-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.qr-code-container {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-image {
  width: 110px;
  height: 110px;
  border-radius: 4px;
}

.qr-code-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e1e4e8;
  border-top: 2px solid #666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 骨架屏动画 */
@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes skeleton-slide {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qr-code-tip {
  font-size: 12px;
  color: #E2E8F0;
  text-align: center;
  width: 120px;
  line-height: 1.3;
}

.divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 12px 0;
}

.contact-phone-section {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 12px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-icon svg {
  width: 24px;
  height: 25px;
}

.phone-info {
  flex: 1;
}

.phone-time {
  font-size: 11px;
  color: #CBD5E0;
  text-align: left;
  margin-bottom: 2px;
}

.phone-number {
  font-size: 16px;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .right-bar {
    display: none;
  }

  .right-bar-item {
    width: 45px;
    height: 70px;
    padding: 5px 3px;
    margin: 1px 0;
  }

  .icon-placeholder {
    width: 18px;
    height: 18px;
    margin-bottom: 3px;
  }

  .icon-container {
    width: 18px;
    height: 18px;
    margin-bottom: 3px;
  }

  .icon-container svg {
    width: 16px;
    height: 16px;
  }

  .item-text {
    font-size: 10px;
    line-height: 12px;
    margin-top: 1px;
  }


  .contact-popup-new {
    width: 200px;
    height: 280px;
  }

  .contact-content {
    padding: 12px 16px 10px 16px;
  }

  .contact-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .contact-qr-section {
    margin-bottom: 8px;
  }

  .qr-code-container {
    width: 100px;
    height: 100px;
    margin-bottom: 6px;
  }

  .qr-code-image {
    width: 90px;
    height: 90px;
  }

  .qr-code-tip {
    width: 100px;
    font-size: 11px;
  }

  .divider {
    margin: 8px 0;
  }

  .contact-phone-section {
    padding: 8px 10px;
  }

  .phone-icon svg {
    width: 20px;
    height: 21px;
  }

  .phone-number {
    font-size: 14px;
  }

  /* 移动端骨架屏样式调整 */
  .skeleton-title {
    width: 100px;
    height: 18px;
    margin-bottom: 12px;
  }

  .skeleton-qr-container {
    width: 100px;
    height: 100px;
    margin-bottom: 6px;
  }

  .skeleton-qr-tip {
    width: 80px;
    height: 12px;
  }

  .skeleton-divider {
    margin: 8px 0;
  }

  .skeleton-phone-section {
    padding: 8px 10px;
  }

  .skeleton-phone-icon {
    width: 20px;
    height: 21px;
  }

  .skeleton-phone-time {
    width: 120px;
    height: 11px;
  }

  .skeleton-phone-number {
    width: 80px;
    height: 16px;
  }
}
</style>
