<template>
  <el-popover v-if="!(project == '' || project == 'index')" placement="left-end" width="143" trigger="hover" popper-class="sw-page-pop">
    <div>
      <ul class="toggle" v-for="(item, idx) in wfTypes" :key="idx">
        <li v-show="('w-' + project) != item.code">
          <router-link :to="item.target"><img :src="require(`@/assets/images/svg/${item.code}.svg`)" width="16" />{{ item.title }}</router-link>
        </li>
      </ul>
    </div>
    <div class="switch-page" slot="reference">
      <img src="../../assets/images/svg/more.svg" width="30" height="30" />
    </div>
  </el-popover>
</template>

<script>
import { wfTypes } from '@/config/mapping/common';
export default {
  name: 'SwitchPage',
  data() {
    return {
      wfTypes
    };
  },
  computed: {
    project() {
      return this.$store.state.project;
    }
  }
};
</script>

<style lang="scss" scoped>
.switch-page {
  position: fixed;
  right: 40px;
  bottom: 90px;
  width: 50px;
  height: 50px;
  background: #F7F8FA;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  cursor: pointer;
  text-align: center;
  padding-top: 9px;
}
.toggle {
  li {
    img {
      margin-right: 7px;
    }
    a {
      line-height: 34px;
      display: flex;
      align-content: center;
      padding: 0 5px 0 15px;
      width: 100%;
      color: $gray01;
      &:hover {
        background: $gray-disable;
      }
    }
  }
}
</style>
<style lang="scss">
.sw-page-pop {
  padding: 6px 0 !important;
}
</style>