<template>
  <div class="inline-block dm-marketing__opt">
    <span v-for="(v, i) in options" :key="i" class="dm-marketing__opt__item" :class="{ 'is-disabled': v.disabled, item: !v.disabled }" @click="addItem(v)" @mouseenter="onHover(i, v)" @mouseleave="onLeave(i, v)">
      <img :ref="`img-${i}`" :src="v.disabled ? v.disabledImg : v.img" alt="" srcset="" /><span> {{ v.name }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'opt',
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    addItem(item) {
      if (item.disabled) return;
      this.$emit('addItem', item);
    },
    onHover(i, v) {
      if (v.disabled) return;
      this.$refs[`img-${i}`] && this.$refs[`img-${i}`][0] && (this.$refs[`img-${i}`][0].src = v.hoverImg);
    },
    onLeave(i, v) {
      if (v.disabled) return;
      this.$refs[`img-${i}`] && this.$refs[`img-${i}`][0] && (this.$refs[`img-${i}`][0].src = v.img);
    }
  }
};
</script>

<style lang="scss" scoped>
.is-disabled {
  span,
  img {
    color: #c0c4cc !important;
  }
  cursor: not-allowed;
}
.item:hover {
  span {
    color: #1890ff !important;
  }
}
</style>
