<template>
  <div class="tabs">
    <div class="tabs-item" v-for="item in tabs" :key="item.title">
      <div class="tabs-item-left">
        <i class="tabs-item-icon" :class="item.icon"></i>
      </div>
      <div class="tabs-item-right">
        <div class="tabs-item-right-title">{{ item.title }}</div>
        <slot :name="item.name" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
@for $i from 0 through 5 {
  .tabs-item:nth-child(#{$i + 1}) {
    background: url("../../../assets/map/tabs-item#{$i}.svg")
      left
      top
      no-repeat;
    background-size: cover;
    background-color: rgba(42, 132, 221, 1);
  }
}
.tabs {
  display: flex;
  gap: 20px;
  &-item {
    width: 16%;
    height: 120px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    color: #fff;
    padding: 0 20px;
    gap: 20px;
    &-left {
      .tabs-item-icon {
        font-size: 50px;
        vertical-align: middle;
      }
    }
    &-right {
      flex: 1;
      text-align: left;
      &-title {
        font-size: 17px;
        font-weight: bold;
      }
    }
  }
}
</style>