<template>
  <view class="side-box" :style="{ background: bg }">
    <view
      v-for="(x, i) in list"
      :key="i"
      class="item"
      :style="{
        color: currentIndex != i ? textColor : activeColor,
        'border-color': currentIndex != i ? 'transparent' : activeColor,
        'border-bottom': border ? '1rpx solid #eee' : 'none',
        'text-align': textAlign,
        'background':currentIndex==i?'#FFF':''
      }"
      @click="change(i)"
      >{{ x[name] }}</view
    >
  </view>
</template>

<script>
export default {
  props: {
    bg: {
      type: String,
      default: "#F0F0F0",
    },
    textColor: {
      type: String,
      default: "#333",
    },
    activeColor: {
      type: String,
      default: "#FF3344",
    },
    border: {
      type: Boolean,
      default: false,
    },
    textAlign: {
      type: String,
      default: "center",
    },
    list: {
      type: Array,
      default: [],
    },
    name: {
      type: String,
      default: "text",
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
        currentIndex:this.active
    };
  },
  watch: {
      active: {
				immediate: true,
				handler(nVal) {
					// 视图更新后再执行移动操作
					this.$nextTick(() => {
						console.log("更新下标",nVal)
						this.currentIndex = nVal;
						this.change(nVal)
					});
				}
			},
  },
  methods: {
    change(i) {
      this.$emit("change", i);
    },
  },
};
</script>

<style scoped>
.side-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.side-box .item {
  height: 50px;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
  border-left: 6rpx solid transparent;
  display: flex;
  align-items: center;
  align-content: center;
  padding-left: 12rpx;
}
</style>
