<template>
  <div class="inline-block dm-marketing__opt">
    <span v-for="(v, i) in options" :key="i" class="dm-marketing__opt__item" @click="addItem(v)" style="display: inline-block;height: 36px;line-height: 36px;margin-right: 30px;cursor: pointer;">
      <img :src="v.img" alt="" srcset="" style="vertical-align: middle; height: 17px; width: auto; overflow: hidden; color: #909399;" /><span style=" vertical-align: middle;color: #606266;font-size: 14px;"> {{ v.name }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'opt',
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    addItem(item) {
      this.$emit('addItem', item);
    }
  }
};
</script>
<style lang="scss" scoped>
.dm-marketing__opt {
  background: #ffffff;
  border: 1px solid rgba(235, 238, 245, 1);
  -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
}

.dm-marketing__opt__item {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  margin-right: 30px;
  cursor: pointer;
}
.dm-marketing__opt__item > img {
  vertical-align: middle;
  height: 17px;
  width: auto;
  overflow: hidden;
  color: #909399;
}
.dm-marketing__opt__item > span {
  vertical-align: middle;
  color: #606266;
  font-size: 14px;
}
</style>
