<template>
  <div class="scroll-nav" v-if="labels.length > 0">
    <ScrollNavBar :current="this.list[current].title" :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 { Style, ScrollNavBar } from 'cube-ui';
import queryString from 'query-string';

export default {
  name: 'slide',
  props: {
    list: {
      type: Array,
      default: true
    },
    current: {
      type: Number,
      default: true
    },
  },
  data() {
    return {
      index: 0,

      labels: [],
    };
  },
  components: {
    Style,
    ScrollNavBar
  },
  mounted() {
    this.list.map((res) => {
      this.labels.push(res.title);
    });
  },
  created() {

  },
  methods: {
    changeHandler(cur) {
      let index = this.$refs[`getindex${cur}`].innerText;
      let url = this.list[index].url.split('?');
      let params = queryString.parse(url[1]);

      params.isReset = true;
      this.$parent.$parent.$parent.fetchList && this.$parent.$parent.$parent.fetchList(params);
      this.$emit('transfer', index);
    }
  }
};
</script>

<style lang="scss" scoped>
.scroll-nav {
  padding: 0 24px;
}

/deep/ {
  .cube-scroll-nav-bar {
    background: none;
  }

  .cube-scroll-wrapper {
    text-align: left;
  }

  .cube-scroll-content {
    // display: block;
  }

  .cube-scroll-nav-bar-item {
    padding: 0 12px;
    line-height: 52px;
    font-size: 15px;
    color: #555;

    > span {
      font-weight: 300;
    }
  }

  .cube-scroll-nav-bar-item_active {
    color: #000;
    font-size: 16px;
    position: relative;

    > span {
      font-weight: 500;
    }

    &:after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      height: 3px;
      border-radius: 1.5px;
      background-color: #000;
    }
  }
}

</style>