<template>
  <scroll-view class="hui-sidebar" scroll-y>
    <view
        class="hui-sidebar-item"
        :class="current === index ? 'hui-sidebar-item__active' : ''"
        v-for="(item, index) of options"
        :key="item[valueProp]"
        @click="handleClick(index)"
    >
      {{item[labelProp]}}
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: "HuiSidebar",
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    labelProp: {
      type: String,
      default: 'label'
    },
    valueProp: {
      type: String,
      default: 'value'
    },
  },
  data() {
    return {
      current: 0,
      scrollTop: 0,
    }
  },
  methods: {
    handleClick(index) {
      if (this.current !== index) {
        this.current = index;
        this.$emit('change', this.options[index]);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hui-sidebar {
  position: relative;
  width: 6em;
  height: 100%;
  background-color: #fff;
  .hui-sidebar-item {
    position: relative;
    padding: 2em 1em;
    text-align: center;
    font-size: 24rpx;
  }
  .hui-sidebar-item__active {
    background-color: #f1f1f1;
  }
}
</style>
