<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 }" @click="addItem(v)">
      <img :src="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);
    }
  }
};
</script>

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