<template>
  <div class="title-swiper">
    <div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-no-swiping" v-for="(item, index) in listData" :key="index">
          {{item.title}}
        </div>
      </div>
    </div>
    <div class="swiper-btn swiper-button-prev" @click="handleBtnClick">
      <!-- <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png"> -->
    </div>
    <div class="swiper-btn swiper-button-next" @click="handleBtnClick">
      <!-- <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png"> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      swiperOption1: {
        observer: true,
        observeParents: true,
        speed: 400,
        autoplay: false,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 0,
        disableOnInteraction: false,
        on:{
          init: function(){
            // that.isShowSwiper = true
          }
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
      isEn: false
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  },
  methods: {
    handleClick(e) {
      const index = e.target.dataset.swiperSlideIndex
      this.$refs.mySwiper1.swiper.slideTo(index % 5 + 5)
      this.$emit('slideTo', index)
    },
    handleBtnClick() {
      setTimeout(() => {
        this.$emit('slideTo', this.$refs.mySwiper1.swiper.realIndex)
      }, 100)
    }
  }
}
</script>
<style lang="scss"  scoped>
.title-swiper{
  padding: 0 25px;
  margin-top:5px;
  position:relative;
  // overflow: auto;
  // width: 100%;
  .swiper-slide{
    position: relative;
    width: 266px;
    height: 44px;
    padding:0 20px;
    margin:7px 0;
    line-height:22px;
    font-size:16px;
    cursor: pointer;
    user-select:none;
    border-right:1px solid #a81840;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .swiper-slide-active, .swiper-slide:hover{
    color:#a81840;
  }
  .swiper-btn{
    width:20px;
    height:35px;
    position:absolute;
    left:-5px;
    top:0;
    // top:10px;
    // transform:translateY(-50%);
    margin-top:0.11rem;
    z-index:2;
    user-select:none;
    cursor:pointer;
    ::after{
      font-size:22px;
    }
    img{
      width:100%;
      height:100%;
      display:block;
    }
  }
  .swiper-btn::after{
    font-size:32px;
    color:#ccc;
    font-weight:bold;
  }
  .swiper-button-next{
    left:unset;
    right: -5px;
  }
}
</style>