<template>
  <div>
    <van-image v-if="isHome" class="icon-home" :src="icon_home" @click="toHome" />
    <van-image v-if="isMe" class="icon-me" :src="icon_me" @click="toMe" />
    <van-image v-if="isRank" class="icon-rank" :src="icon_rank" @click="toRank" />
  </div>
</template>

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

<script>
// FIXME: VUE2写法
export default {
  props: ['type', 'item'],
  data() {
    return {
      userType: Cookies.get('userType') ? Cookies.get('userType') : ''
    }
  },
  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>
.icon-home {
  z-index: 169;
  position: fixed;
  right: 2rem;
  bottom: 14rem;
  width: 3rem;
  height: 3rem;
}

.icon-me {
  z-index: 169;
  position: fixed;
  right: 2rem;
  bottom: 10rem;
  width: 3rem;
  height: 3rem;
}

.icon-rank {
  z-index: 169;
  position: fixed;
  right: 2rem;
  bottom: 6rem;
  width: 3rem;
  height: 3rem;
}
</style>