<template>
  <div @mouseover="isMove = true" @mouseout="isMove = false" :class="`${namespace}-action-item`" @click="handleClick">
   <div>
      <img :class="isMove || isActive ? 'active-icon' : 'icon'" :src="isMove || isActive ? activeIcon : icon" />
   </div>
    <div class="title">
      <span>{{ title }}</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ActionItem',
  inject: ['namespace'],
  props: ['title', 'icon', 'activeIcon', 'active'],
  data: () => ({
    isActive: false,
    isMove: false,
  }),
  model: {
    prop: 'active',
    event: 'update:active',
  },
  created() {
    this.isActive = this.active | false;
  },
  methods: {
    handleClick() {
      this.$emit('clickItem')
      this.isActive = !this.isActive;
    }
  }
}
</script>


<style scoped lang="less">
@import '@/assets/styles/config.less';

  .@{namespace}-action-item {
    cursor: pointer;
    position: relative;
    .icon {
      transition: all 0.2s;
      width: 200px;
      height: 165px;
    }

    .active-icon {
      transition: all 0.2s;
      width: 198px;
      height: 200px;
      margin-top: -34px;
    }

    .title {
      width: 100%;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50%, 0);
      font-size: 25px;
      font-family: DataFont;
      text-align: center;
      color: #fff;
    }
  }
</style>
