<template>
  <div class="select-chart">
    <div class="item" :style="{ cursor: item.disable ? 'not-allowed' : 'pointer' }" :class="{ 'active' : item.active }" :title="item.label">
      <span v-if="item.disable" class="icon" :style="{ backgroundImage: `url(${require(`@/assets/img/${item.icon}-disable.svg`)})` }"></span>
      <span v-else-if="item.active" class="icon" :style="{ backgroundImage: `url(${require(`@/assets/img/${item.icon}-active.svg`)})` }"></span>
      <span v-else class="icon" :style="{ backgroundImage: `url(${require(`@/assets/img/${item.icon}.svg`)})` }"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectChart",
  props: ['item'],
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="less">
.select-chart {
  display: inline;
  .item {
    width: 38px;
    height: 38px;
    background: #ebecf0;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    margin-right: 8px;
    position: relative;

    .icon {
      height: 24px;
      width: 24px;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .active {
    background: #6b6868 !important;
  }
}
</style>
