<template>
  <div class="ScrollNav" v-if="labels.length > 0">
    <ScrollNavBar :current="this.list[current].tab_name" :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('list/channel');
const {mapState, mapActions} = createNamespacedHelpers('list');

export default {
  name: 'slide',
  props: {
    list: {
      type: Array,
      default: true
    },
    current: {
      type: Number,
      default: true
    }
  },
  data() {
    return {
      index: 0,
      // current: this.list[0].tab_name,
      labels: [],
    }
  },
  components: {
    Style,
    ScrollNavBar
  },
  computed: {
    ...mapState(['productList']),
  },
  mounted() {
    this.list.map((res) => { this.labels.push(res.tab_name) });
  },
  created() {

  },
  methods: {
    ...mapActions(['fetchProductList']),
    changeHandler(cur) {
      let index = this.$refs[`getindex${cur}`].innerText;
      let query = this.list[index].query
      let params = Object.assign({},...query);
      params.isReset = true; delete params.method;
      this.fetchProductList(params);
      this.$emit('transfer',index);
    }
  }
};
</script>

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

</style>