<template>
  <div
    @click="activeCard"
    @mouseenter="changStatus(true)"
    @mouseleave="changStatus(false)"
    class="entry-card"
    :style="{
      '--icon': options.icon,
      '--img': `url(/imgs/entry/${index + 1}.png)`,
    }"
    v-show="!options.hide"
  >
    <img class="icon" :src="`/imgs/entry/${options.icon}.png`" alt="" />
    <div class="title">{{ options.title }}</div>
    <div class="i-dao-hang" :style="{ opacity: mousemove ? 1 : 0.5 }"></div>
  </div>
</template>

<script>
export default {
  props: { options: { type: Object }, index: { type: Number } },
  data () {
    return {
      mousemove: false
    }
  },
  mounted () {
    if (this.options.actived) this.activeCard()
  },

  methods: {
    activeCard () {
      this.$router.push(this.options.link)
    },
    changStatus (status) {
      this.mousemove = status
    }
  }
}
</script>

<style lang="scss" scoped>
.entry-card {
  cursor: pointer;
  -webkit-user-drag: none;
  min-width: 250px;
  min-height: 300px;
  background: var(--img) no-repeat;
  background-size: 100% 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 100px;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}
.icon {
  width: 35%;
  height: 20%;
  -webkit-user-drag: none;
}
.title {
  font-size: 25px;
  color: white;
  font-weight: bold;
  margin-top: 10px;
  letter-spacing: 3px;
}
.i-dao-hang {
  color: white;
  font-size: 30px;
  position: absolute;
  bottom: 30%;
  opacity: 0.5;
}
</style>
