<template>
  <div class="swiper" ref="container">
    <div class="table_nav " :class="{fixed:isFixed}">
      <swiper :options="swiperNavOpt" ref="mySwiperNav">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in menu" :key="index" :class="index == changeIndex ? navActive : ''">
          <!--nav_active-->
          <div v-html="item.catalogname || item.recommendName" class=""></div>
          <slot :name="'navEx'+index"></slot>
        </swiper-slide>
      </swiper>
    </div>
    <swiper class="table_main" :class="isFixed?'pdT':''" :options="swiperMainOpt" ref="mySwiperMain">
      <!-- slides -->
      <swiper-slide v-for="(i,index) in menu.length" :key="index">
        <slot :name="'slide'+index"></slot>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
  	name:"ZghSwiperLink",
    components: {
      swiper,
      swiperSlide
    },
    props: {
      menu: {},
      initialSlide: {
        default: 0
      },
      navActive: {
        default: 'nav_active'
      },
      isFixed: {
        default: false
      },

      swiperOpt: {
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        changeIndex: this.initialSlide,
        swiperNavOpt: Object.assign({
          slideToClickedSlide: true,
          initialSlide: this.initialSlide,
          watchSlidesProgress: true,
          watchSlidesVisibility: true,
          slidesPerView: 'auto',
          freeMode: true,
          onTap: this.onTapNav
        }, this.swiperOpt),
        swiperMainOpt: {
          initialSlide: this.initialSlide,
          freeMode: false,
          onlyExternal: false,
          touchAngle:15,
          onSlideChangeStart: this.onSlideChangeStart,
          onSlideChangeEnd: this.onSlideChangeEnd,
          //          simulateTouch:this.simulateTouch//默认为true，Swiper接受鼠标点击、拖动。
        }
      }
    },

    // you can find current swiper instance object like this, while the notNextTick property value must be true
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
      swiperNav() {
        return this.$refs.mySwiperNav.swiper
      },
      swiperMain: function () {
        return this.$refs.mySwiperMain.swiper
      }
    },
    mounted() {
      // you can use current swiper instance object to do something(swiper methods)
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //			this.$refs.container.style.height = window.innerHeight+'px';
    },
    ready() {

    },
    methods: {
      onSlideChangeStart: function(swiper) {
        let activeIndex = swiper.activeIndex;
        this.changeIndex = activeIndex;
        this.swiperNav.slideTo(activeIndex, 500, false);
        this.$emit('slideChange', activeIndex);

      },
      onTapNav: function(swiper) {
        let clickedIndex = swiper.clickedIndex;
        this.changeIndex = clickedIndex;
        this.swiperMain.slideTo(clickedIndex, 500, false);
        this.$emit('slideChange', clickedIndex);
      }
    }
  }
</script>

<style lang="less">
  @import url("../../assets/config");

  @h: 40px;
  .position-b {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #aaa;
    transform: scaleY(.3);
  }

  .swiper {
    height: 100%;
    overflow: hidden;
    .table_nav {
      width: 100%;
      /*min-height: @h+.1rem;*/
      background-color: #fff;
      z-index: 99;
      &.fixed {
        position: fixed;
        top: @m-top;
        left: 0;
        width: 100%;
      }
      .swiper-slide {
        display: inline-block;
        min-height: @h;
        line-height: @h;
        text-align: center;
        border-bottom: 3px solid transparent;
        .m-fs(28);
        color: #000;
        &.nav_active {
          color: #db2227;
          background: #fff;
          &:after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            display: block;
            width: 100%;
            .h(10);
            background-size: 100% auto;
            z-index: 3;
          }
        }
      }
    }
    .table_main {
      height: 100%;
      &.pdT {
        padding-top: @h;
      }
      .swiper-slide {
        height: 100% !important;
        width: 100% !important;
        /*padding-top: 2%;*/
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
      }
      .swiper-wrapper {
        height: 100% !important;
      }
    }
  }
</style>
