<template>
  <view class="side-box" :style="{ background: bg }">
	  <view>
		  <view
		    class="item"
		    :style="{
		      color: !currentIndex2  ? textColor : activeColor,
		      'border-color': !currentIndex2 ? 'transparent' : activeColor,
		      'border-bottom': border ? '1rpx solid #eee' : 'none',
		      'text-align': textAlign,
		      'background':currentIndex==i?'#FFF':''
		    }"
		    @click="change2()"
		    > 全部 </view
		  >
	  </view>
    <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: -1,
    },
  },
  data() {
    return {
		currentIndex2:true,
        currentIndex:this.active
    };
  },
  watch: {
      active: {
				immediate: true,
				handler(nVal) {
					// 视图更新后再执行移动操作
					this.$nextTick(() => {
						this.currentIndex = nVal;
						
					});
				}
			},
  },
  methods: {
    change(i) {
      this.$emit("change", i);
	  this.currentIndex2 = false
    },
	change2() {
	  this.$emit("change2", 0);
	  this.currentIndex2 = !this.currentIndex2
	  this.currentIndex = -1
	  // console.log('4555555555',this.currentIndex)
	},
  },
};
</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>
