<template>
  <div class="floating-menu-mobile" @click="handleClick">
    <div class="customer-serve">
      <i class="iconfont icon-kefu" @click="showPhone = !showPhone"></i>
      <div v-show="showPhone" class="phone-popup">
        <div class="phone-popup-content">
          <div class="code">
            <img src="../assets/image/logo.jpg" alt="">
          </div>
          <p>电话：17777525395</p>
        </div>
      </div>
    </div>
    <div class="feedback">
      <i class="iconfont icon-fankui" @click="navigateTo('feedback')"></i>
    </div>
    <div class="backToTop" ref="backToTop">
      <i class="iconfont icon-huidaodingbu" @click="scrollToTop"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';

const router = useRouter();
const showPhone = ref(false);

const navigateTo = (routeName: string) => {
  router.push({ name: routeName });
};
const backToTop = ref();
const scrollToTop = () => {
  window.scrollTo({
    top: 0, //回到顶部
    left: 0,
    behavior: "smooth",
  })
};
window.onscroll = function () {
  // 获取浏览器卷去的高度
  let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
  if (high >= 900) {
    backToTop.value && (backToTop.value.style.display = "block")
  } else {
    backToTop.value && (backToTop.value.style.display = "none")
  }
};

const handleClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  const isInside = target.closest('.menu-item-wrapper') || target.closest('.phone-popup') || target.closest('.customer-serve');
  if (!isInside) {
    showPhone.value = false;
  }
  if (!isInside) {
    showPhone.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClick);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClick);
});
</script>

<style lang="scss" scoped>
.floating-menu {
  position: fixed;
  right: 5px;
  bottom: 20%;
  padding: 10px;
  z-index: 1000;

  .menu-item {
    display: block;
    margin: 5px 0;
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #0056b3;
    }
  }

  .menu-item-wrapper {
    position: relative;
  }

  .phone-popup {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    top: 50%;
    left: -180px;
    transform: translateY(-50%);
    z-index: 1001;
  }

  .phone-popup-content {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;

    .code {
      img {
        width: 70px;
        height: 70px;
      }
    }
  }
}

.floating-menu-mobile {
  position: fixed;
  right: 5px;
  bottom: 20%;
  padding: 10px;
  z-index: 1000;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgba(0,0,0,.2);

  .customer-serve {
    width: 30px;
    height: 30px;
    display: block;

    i {
      font-size: 30px;
    }

    margin-bottom: 10px;

    .phone-popup {
      position: absolute;
      background-color: white;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      top: 50%;
      left: -180px;
      transform: translateY(-50%);
      z-index: 1001;
    }

    .phone-popup-content {
      display: flex;
      flex-direction: column;
      padding: 10px;
      justify-content: center;
      align-items: center;

      .code {
        img {
          width: 70px;
          height: 70px;
        }
      }
    }
  }

  .feedback {
    width: 30px;
    height: 30px;
    display: block;

    i {
      font-size: 30px;
    }

    margin-bottom: 10px;
  }

  .backToTop {
    width: 30px;
    height: 30px;
    display: none;

    i {
      font-size: 30px;
    }
  }
}
</style>