<template>
  <div class="ScrollNav">
    <ScrollNavBar :current="current" :labels="labels">
      <span slot-scope="props" @click="changeHandler(props.index)">
        {{props.txt}}
      </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: '快车',
      labels: [
        '快车',
        '小巴',
        '专车',
        '顺风车',
        '代驾',
        '公交',
        '自驾租车',
        '豪华车',
        '二手车',
        '出租车'
      ]
    }
  },
  components: {
    Style,
    ScrollNavBar
  },
  computed: {
    ...mapState(['channelList','scrollnavidList']),
  },
  methods: {
    changeHandler(index) {
      console.log(this.channelList.scrollnavList[index]); // value
      // console.log(this.channelList.scrollnavidList[index]); // id
    }
  }
};
</script>

<style lang="scss" scoped>
.ScrollNav {

}

</style>