<!--
 * @Date: 2022-05-11 11:19:14
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-13 15:39:03
 * @FilePath: /tswj/src/components/ShortcutFixed/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="shortcut-page" :style="customStyle">
    <van-image v-if="isHome" class="icon-box" :src="icon_home" @click="toHome" />
    <van-image v-if="isMe" class="icon-box" :src="icon_me" @click="toMe" />
    <van-image v-if="isRank" class="icon-box" :src="icon_rank" @click="toRank" />
    <van-popover v-model:show="showPopover" placement="left">
      <div class="contact-content">
        <div class="text-tel">固话联系</div>
        <div>
          <a style="color: #C2915F;"
            :href="`tel:${tel}`"
          >
            {{ tel }}
          </a>
        </div>
      </div>
      <div class="contact-content" style="padding-top: 0;">
        <div class="text-tel">邮箱联系</div>
        <div>
          <a style="color: #C2915F;"
            :href="`mailto:${mail}`"
          >
            {{ mail }}
          </a>
        </div>
      </div>
      <template #reference>
        <div class="wrapper">
          <van-image class="icon-box" :src="icon_contact" />
        </div>
      </template>
    </van-popover>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import { icon_me, icon_home, icon_rank, icon_contact } from '@/utils/generateIcons.js'
</script>

<script>
// FIXME: VUE2写法
export default {
  props: ['type', 'item', 'customStyle'],
  data() {
    return {
      userType: Cookies.get('userType') ? Cookies.get('userType') : '',
      showPopover: false,
      tel: '021-61517073',
      mail: 'cxwa@allforlove.org.cn'
    }
  },
  computed: {
    isHome() {
      return this.item.indexOf('home') !== -1 ? true : false
    },
    isMe() {
      return this.item.indexOf('me') !== -1 ? true : false
    },
    isRank() {
      return this.item.indexOf('rank') !== -1 ? true : false
    },
  },
  mounted() {
  },
  methods: {
    toHome() {
      // 返回首页
      if (this.type === 'B') { // 服务端判断
        this.$router.push({
          path: '/business/index'
        });
      } else {
        // C 端返回首页需要判断是否，访客或客户
        switch (this.userType) {
          case 'visitor':
            this.$router.push({
              path: '/client/chooseBook'
            });
            break;
          case 'client':
            this.$router.push({
              path: '/client/chooseSchool'
            });
            break;
          default:
            this.$router.push({
              path: '/client/index'
            });
            break;
        }
      }
    },
    toMe() {
      if (this.type === 'B') { // 服务端判断
        this.$router.push({
          path: '/business/me'
        });
      } else {
        this.$router.push({
          path: '/me/index'
        });
      }
    },
    toRank () {
      this.$router.push({
        path: '/client/rankList',
        query: {
          kg_id: this.$route.query.kg_id
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.shortcut-page {
  position: fixed;
  bottom: 18rem;
  right: 1rem;
  overflow: auto;
  z-index: 999;
  width: 3rem;
}
.icon-box {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}

.contact-content {
  padding: 1rem 0.85rem;
  text-align: center;
  .text-tel {
    color: gray;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}
</style>