<template>
  <div class="ScrollNav" v-if="labels.length > 0">
    <ScrollNavBar :current="current" :labels="labels" @change="changeHandler">
      <span slot-scope="props">
        {{props.txt}}
        <span :ref="`getindex${props.txt}`" v-show="false">{{props.index}}</span>
      </span>
    </ScrollNavBar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Style, ScrollNavBar } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('home/channel');

export default {
  name: 'slide',
  props: {
    list: {
      type: Array,
      default: true
    },
  },
  data() {
    return {
      index: 0,
      current: this.list[0].tab_name,
      labels: [],
    }
  },
  components: {
    Style,
    ScrollNavBar
  },
  computed: {
    ...mapState(['scrollnavidList']),
  },
  mounted() {
    // this.fetchProductList();
    // 遍历ScrollNavBar的key值，组装到labels中;
    this.list.map((res) => { this.labels.push(res.tab_name) });
  },
  created() {
    
  },
  methods: {
    ...mapActions(['fetchProductList']),
    changeHandler(cur) {
      let index = this.$refs[`getindex${cur}`].innerText;
      const params = {
        isReset: true,
      }
      this.fetchProductList(params);
      console.log(this.list[index].tab_name);
      // console.log(index);
     
    }
  }
};
</script>

<style lang="scss" scoped>
.ScrollNav {
  position: relative;
  top: 0;
  left: 0;
}

</style>