<template>
  <div class="left-side-con" scroll-y>
    <div
      v-for="(item, index) of list"
      :key="'left-item-' + index"
      class="item"
      :class="activeClass(index)"
      @click="$emit('input', index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      defualt: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    activeClass(index) {
      if (index == this.value - 1) {
        return "active-top";
      } else if (index == this.value + 1) {
        return "active-bottom";
      } else if (index == this.value) {
        return "active";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="less">
.left-side-con {
  min-width: 50px;
  height: 100%;
  background: #f5f7fb;
  overflow-y: auto;

  .item {
    text-align: center;
    line-height: 44px;
    font-size: 13px;
    font-weight: bold;
    background: #ffffff;
  }

  .active {
    color: #2C66F5;
    background: #F5F7FB;
  }
  .active-top {
    border-bottom-right-radius: 14px;
  }
  .active-bottom {
    border-top-right-radius: 14px;
  }
}
</style>
