<template>
  <view class="pintuanshopNav">
    <swiper class="swiper" display-multiple-items="4" @change="aa" :current="cupage" circular=true>
      <swiper-item style="margin-left:50upx" slideTo v-for="(item,index) in navlist" :key="index">
        <view :class="xz1[index]?active:navitem" @click="xz" :data-id="index">{{item}}</view>
        
      </swiper-item>
      <!-- <swiper-item style="margin-left:50upx">
        <view :class="xz1[1]?active:navitem" @click="xz" data-id="1">保养套餐</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[2]?active:navitem" @click="xz" data-id="2">轮胎专区</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[3]?active:navitem" @click="xz" data-id="3">车载电器</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[4]?active:navitem" @click="xz" data-id="4">美容养护</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[5]?active:navitem" @click="xz" data-id="5">安全自驾</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[6]?active:navitem" @click="xz" data-id="6">汽车内饰</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[7]?active:navitem" @click="xz" data-id="7">汽车用品</view>
      </swiper-item>
      <swiper-item style="margin-left:50upx">
        <view :class="xz1[8]?active:navitem" @click="xz" data-id="8">其他</view>
      </swiper-item> -->
    </swiper>
  </view>
</template>

<script>
export default {
  name: "pintuanshopNav",
  data() {
    return {
      autoplay: false,
      active: "active",
      navitem: "navitem",
      xz1: [1],
      cupage: 0,
      nav:[]
    };
  },
  props:{
    navlist:{
      type:Array
    }
  },
  methods: {
    aa(a) {
      this.a = a.detail.current;
    },
    xz(e) {
      this.xz1 = [];
      this.xz1[e.currentTarget.dataset.id] = 1;

      if (parseInt(e.currentTarget.dataset.id) <= 1) {
        this.cupage = 0;
      } else {
        if (parseInt(e.currentTarget.dataset.id) < 7) {
          this.cupage = parseInt(e.currentTarget.dataset.id) - 2;
        } else {
          this.cupage = 5;
        }
      }
      this.$emit("selected",e.currentTarget.dataset.id)
    }
  },
  mounted(){
    console.log(this.navlist)
  }
};
</script>

<style lang="scss">
.pintuanshopNav{
  background-color: white;
  line-height: 62upx;
}
.swiper {
  height: 62upx;
}
.navitem {
  width: 120upx;
  font-size: 30upx;
  color: #666666;
  text-align: center;
}
.active {
  width: 120upx;
  color: #e0394d;
  font-size: 30upx;
  text-align: center;
}
</style>