<template>
  <div
    class="fixed right-0 top-40 bg-white rounded-l-lg divide-y divide-gray-200 px-3 shadow-2xl cursor-default z-50"
  >
    <div
      v-for=" item in items "
      :key="item.id"
      class="py-4"
      @mouseenter="handleHover($event, item.id)"
      @mouseleave="handleHover($event, item.id)"
    >
      <svg-icon :iconClass="item.icon" class="w-5 h-5 mx-auto" />
      <div class="text-sm text-gray-500 pt-2">{{ item.header }}</div>
    </div>
    <div class="bg-white fixed top-36 right-24 mr-1 rounded-lg py-2 shadow-2xl" v-if="display1">
      <div class="text-xs text-gray-600 pt-2 text-center font-medium">扫一扫添加客服</div>
      <img src="@/assets/serviceQr.png" class="w-28" />
      <div class="triangle absolute top-0 bottom-0 my-auto -right-2"></div>
    </div>
    <div
      class="bg-white fixed top-64 right-24 mr-1 rounded-lg py-3 flex items-center px-2 shadow-2xl"
      v-if="display2"
    >
      <svg-icon iconClass="tel2" class="w-6 h-5 mx-auto mr-4" />
      <div class>
        <div class="text-xs text-gray-500">联系电话</div>
        <div class="text-sm text-gray-500 font-semibold">0571-8167-1366</div>
      </div>
      <div class="triangle absolute top-0 bottom-0 my-auto -right-2"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const items = [
  // {
  //   id: 1,
  //   header: '在线客服',
  //   icon: 'online'
  // },
  {
    id: 2,
    header: '微信咨询',
    icon: 'wechat'
  },
  {
    id: 3,
    header: '电话咨询',
    icon: 'tel'
  }
]

/* handle hover */
let display1 = ref(false)
let display2 = ref(false)

const handleHover = (e: Event, id: number) => {
  if (e.type == 'mouseenter') {
    if (id == 2) {
      display1.value = true
    } else if (id == 3) {
      display2.value = true
    }
    console.log('enter', id);
  } else if (e.type == 'mouseleave') {
    if (id == 2) {
      display1.value = false
    } else if (id == 3) {
      display2.value = false
    }
    console.log('leaver', id);

  }
}
</script>

<style>
.triangle {
  width: 0;
  height: 0;
  border-left: 8px solid white;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}
</style>