<template>
  <el-popover width="400" trigger="click">
    <div v-if="collectRoutes.length > 0">
      <el-tag
        v-for="(item, index) in collectRoutes"
        :key="index"
        class="routes-tag"
        size="normal"
        effect="plain"
        closable
        @click="toCollectionRoute(item.favoritePath)"
        @close="closeCollection(item.id)"
      >{{ item.name }}</el-tag>
    </div>

    <el-empty v-else :image-size="30" />
    <i slot="reference" class="el-icon-star-off" />
  </el-popover>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState('settings', ['collectRoutes'])
  },
  created() {
    this.getCollectionRoutes()
  },
  methods: {
    toCollectionRoute(favoritePath) {
      if (!favoritePath) return
      this.$router.push(favoritePath)
    },
    getCollectionRoutes() {
      this.$store.dispatch('settings/getCollectroutes')
    },
    closeCollection(id) {
      this.$store.dispatch('settings/deleteCollectRoute', id)
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-star-off {
  position: relative;
  height: 100%;
  top: -14px;
  padding: 0 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 21px;
}
.routes-tag{
  margin: 5px;
  cursor: pointer;
}
</style>
