// css의 경우, 전역으로 불러오시는 것이 편합니다
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (<= Swiper 5.x)
// Swiper 6 버전의 경우 현재 Pagination 관련 이슈가 있어 5.3.7 버전으로 설치해야 한다고 합니다.
// 자세한 내용은 아래의 참고자료를 참조하시면 좋을 것 같습니다.
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

<template>
  <!-- role 속성은 웹 접근성에 필요할 경우 넣는 속성이므로 swiper의 필수값은 아닙니다 -->
  <swiper ref="filterSwiper" :options="swiperOption" role="tablist">
    <swiper-slide role="tab">111111</swiper-slide>
    <swiper-slide role="tab">222222</swiper-slide>
    <swiper-slide role="tab">333333</swiper-slide>
    <swiper-slide role="tab">444444</swiper-slide>
    <swiper-slide role="tab">555555</swiper-slide>
    <swiper-slide role="tab">666666</swiper-slide>
    <swiper-slide role="tab">777777</swiper-slide>
    <swiper-slide role="tab">888888</swiper-slide>
    <swiper-slide role="tab">999999</swiper-slide>
    <swiper-slide role="tab">101010101010</swiper-slide>
    <swiper-slide role="tab">111111111111</swiper-slide>
    <swiper-slide role="tab">121212121212</swiper-slide>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  name: 'FilterSwiper',
  data () {
    return {
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 6, // swiper-slide 사이의 간격 지정
        slidesOffsetBefore: 0, // slidesOffsetBefore는 첫번째 슬라이드의 시작점에 대한 변경할 때 사용
        slidesOffsetAfter: 0, // slidesOffsetAfter는 마지막 슬라이드 시작점 + 마지막 슬라이드 너비에 해당하는 위치의 변경이 필요할 때 사용
        freeMode: true, // freeMode를 사용시 스크롤하는 느낌으로 구현 가능
        centerInsufficientSlides: true, // 컨텐츠의 수량에 따라 중앙정렬 여부를 결정함
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
.swiper-container {
  .swiper-wrapper {
    .swiper-slide {
      width: auto; // auto 값을 지정해야 슬라이드의 width값이 텍스트 길이 기준으로 바뀜
      min-width: 56px; // min-width를 지정하지 않을 경우 텍스트가 1개 내지는 2개가 들어갈 때 탭 모양이 상이할 수 있으므로 넣어준다.
      padding: 0px 14px;
      font-size: 14px;
      line-height: 36px;
      text-align: center;
      color: #84868c;
      border: 0;
      border-radius: 18px;
      background: #f3f4f7;
      appearance: none;
      cursor: pointer;
    }
  }
}
</style>

// 생략
<style lang="scss" scoped>
.swiper-container {
  padding: 0 20px; // 여백값을 지정할 경우 슬라이드의 시작점과 종점이 이에 영향을 받아 변경됨
  &:before,
  &:after { // 가상선택자를 활용하여 그라데이션 값 추가
    display: block;
    position: absolute;
    top: 0;
    width: 20px; // container에 준 여백값보다 크지 않게 사이즈 지정하기 (swiper-slide의 클릭 이벤트에 영향을 주지 않고, 이렇게 지정해야 그라데이션이 영역 내부에 있는 탭이 스크롤 하기 전엔 영향을 주지 않음)
    height: 100%;
    z-index: 10;
    content: "";
  }
  &:before {
    left: 0;
    background: linear-gradient(90deg, #fff -20.19%, rgba(255, 255, 255, 0.8) 18.31%, rgba(255, 255, 255, 0) 75%);
  }
  &:after {
    right: 0;
    background: linear-gradient(270deg, #fff -20.19%, rgba(255, 255, 255, 0.8) 18.31%, rgba(255, 255, 255, 0) 75%);
  }
  //...중략
}
</style>

<template>
  <!--...위와 동일-->
</template>

<script>

export default {
  name: 'FilterSwiper',
  data () {
    // swiper 이벤트 메소드 내에서 this는 Swiper 객체를 대상으로 하기 때문에, Vue 인스턴스에 지정한 메소드 갖고오기 위해서는 별도로 지정해야함
    const _vm = this 
    return {
      swiperOption: {
        on {
          click: function () {
            _vm.activeTab()
          },
          // 모바일에서는 클릭 이벤트로 구현시 제대로 작동하지 않는 경향이 있어 tap을 함께 추가해주면 click만 추가할 때보다 훨씬 잘 동작합니다.
          tap: function () {
            _vm.activeTab()
          },
        }
      }
    }
  },
  methods: {
    swiperInit: function () {
      this.activeTab()
    }
   activeTab: function (swiper) {
     swiper = swiper || this.swiper
     // 그라데이션 영역이나 슬라이드 사이의 여백을 터치할 경우 이벤트가 발생하지 않도록 처리 (처음 로딩시에는 swiper내 params 설정이 clickedSlide 이름의 property 값이 없는 것을 이용하여 구분함)
     if (swiper.hasOwnProperty('clickedSlide') && !swiper.clickedSlide) return

      const slideSelector = `.${swiper.params.slideClass}` //swiper에 지정한 slide class명을 가져옴
      const selectedEl = swiper.clickedSlide || swiper.slides[swiper.params.initialSlide] // 초기 로딩시에는 옵션에서 initialSlide 값으로 지정한 슬라이드가 활성화 되도록 지정
      const swiperArr = document.querySelectorAll(slideSelector)
      Array.from(swiperArr).forEach((el) => {
        el.setAttribute('aria-selected', 'false')
        selectedEl.setAttribute('aria-selected', 'true')
      })
    }
  },
  computed: {
    swiper: function () {
      return this.$refs.filterSwiper.swiper
    },
  },
  mounted () {
    this.swiperInit()
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
.swiper-container {
  //...생략
  .swiper-wrapper {
    .swiper-slide {
      //...생략
      &[aria-selected="true"] {
        color: #fff;
        background: #000;
      }
    }
  }
}
</style>

<template>
<!--...위와 동일-->
</template>
<script>
export default {
   data () {
     const _vm = this
     return {
      swiperOption: {
        //slideToClickedSlide: true, 제공하고 있지만 이거 안씀
        on: {
          click: function () {
            _vm.slideMoveTo()
            _vm.activeTab()
          },
          tap: function () {
            _vm.slideMoveTo()
            _vm.activeTab()
          }
        }
      }
    }
  },
  methods: {
    //...
    slideMoveTo: function (swiper = this.swiper) {
      // 그라데이션 영역이나 슬라이드 사이의 여백을 터치할 경우 이벤트가 발생하지 않도록 처리 
      // 슬라이드 이동의 초기값은 initialSlide에 영향을 받기 때문에 activeTab에 넣었던 hasOwnProperty 조건이 불필요
      if (!swiper.clickedSlide) return
      
      const activeIndex = swiper.clickedIndex
      swiper.slideTo(activeIndex)
    }
  },
  // 이하 동일
}
</script>

<template>
<!--...위와 동일-->
</template>
<script>
export default {
	//...
	data () {
      const _vm = this
      return {
        swiperOption: {
           //...
           on: {
             // ...
             resize: function () {
               this.allowTouchMove = !_vm.isOverview
             }
           }
         }
       }
    },
    computed: {
      swiper: function () {
        return this.$refs.filterSwiper.swiper
      },
      isOverview: function () { // swiper 전체 사이즈가 화면을 넘어가는지 여부 확인
        return window.innerWidth >= this.swiper.virtualSize
      }
    },
    methods: {
      swiperInit: function () {
        this.swiper.allowTouchMove = !this.isOverview // 초기 설정에 swiper 사이즈가 화면을 넘어가는지 여부 체크
        this.activeTab()
      }
	},
	mounted () {
     this.swiperInit()
    }
}
</script>

<template>
  <swiper ref="filterSwiper" :options="swiperOption" role="tablist">
    <swiper-slide role="tab">111111</swiper-slide>
    <swiper-slide role="tab">222222</swiper-slide>
    <swiper-slide role="tab">333333</swiper-slide>
    <swiper-slide role="tab">444444</swiper-slide>
    <swiper-slide role="tab">555555</swiper-slide>
    <swiper-slide role="tab">666666</swiper-slide>
    <swiper-slide role="tab">777777</swiper-slide>
    <swiper-slide role="tab">888888</swiper-slide>
    <swiper-slide role="tab">999999</swiper-slide>
    <swiper-slide role="tab">101010101010</swiper-slide>
    <swiper-slide role="tab">111111111111</swiper-slide>
    <swiper-slide role="tab">121212121212</swiper-slide>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  name: 'FilterSwiper',
  data () {
    const _vm = this
    return {
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 6,
        slidesOffsetBefore: 0,
        slidesOffsetAfter: 0,
        freeMode: true,
        centerInsufficientSlides: true,
        on: {
          click: function () {
            _vm.slideMoveTo()	
            _vm.activeTab()						
          },
          tap: function () {
            _vm.slideMoveTo()	
            _vm.activeTab()
          },
          resize: function () {
            this.allowTouchMove = !_vm.isOverview
          }
        }
      }
    }
  },
  methods: {
    swiperInit: function () {
       this.swiper.allowTouchMove = !this.isOverview
       this.activeTab()
    },
    activeTab: function (swiper) {
      swiper = swiper || this.swiper
      if (swiper.hasOwnProperty('clickedSlide') && !swiper.clickedSlide) return

      const slideSelector = `.${swiper.params.slideClass}`
      const selectedEl = swiper.clickedSlide || swiper.slides[swiper.params.initialSlide]
      const swiperArr = document.querySelectorAll(slideSelector)
      Array.from(swiperArr).forEach((el) => {
        el.setAttribute('aria-selected', 'false')
        selectedEl.setAttribute('aria-selected', 'true')
      })
    },
    slideMoveTo: function (swiper = this.swiper) {
      if (!swiper.clickedSlide) return

      const activeIndex = swiper.clickedIndex
      swiper.slideTo(activeIndex)
    }
  },
  computed: {
    swiper: function () {
      return this.$refs.filterSwiper.swiper
    },
    isOverview: function () {
      return window.innerWidth >= this.swiper.virtualSize
    }
  },
  mounted () {
    this.swiperInit()
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
.swiper-container {
  padding: 0 20px;
  &:before,
  &:after {
    display: block;
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
    z-index: 10;
    content: "";
  }
  &:before {
    left: 0;
    background: linear-gradient(90deg, #fff -20.19%, rgba(255, 255, 255, 0.8) 18.31%, rgba(255, 255, 255, 0) 75%);
  }
  &:after {
    right: 0;
    background: linear-gradient(270deg, #fff -20.19%, rgba(255, 255, 255, 0.8) 18.31%, rgba(255, 255, 255, 0) 75%);
  }
  .swiper-wrapper {
    .swiper-slide {
      width: auto;
      min-width: 56px;
      padding: 0px 14px;
      font-size: 14px;
      line-height: 36px;
      text-align: center;
      color: #84868c;
      border: 0;
      border-radius: 18px;
      background: #f3f4f7;
      appearance: none;
      cursor: pointer;
      &[aria-selected="true"] {
        color: #fff;
        background: #000;
      }
    }
  }
}
</style>

// 부모 컴포넌트
<template>
    <div>
      <keep-alive>
        <component v-if="isMobile" :is="'IntroSwiper'" :swiperOption="mobileOption"></component>
      </keep-alive>
      <keep-alive>
        <component v-if="!isMobile" :is="'IntroSwiper'" :swiperOption="pcOption"></component>
      </keep-alive>
	</div>
</template>
<script>
import IntroSwiper from '@/components/IntroSwiper'
export default {
  name: 'IntroPage',
  data() {
    return {
      isMobile: false,
      pcStandard: 769, // PC 화면의 Viewport 기준점
      mobileOption: { // 모바일 옵션 지정
        slidesPerView: 1,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        loop: true,
      },
      pcOption: { // PC 옵션 지정
        slidesPerView: 3,
      }
    }
  },
  methods: {
    checkIsMobile: function () {
      this.isMobile = (window.innerWidth < this.pcStandard)
    },
    handleResize: function () {
      this.$nextTick(function () {
        this.checkIsMobile()
      })
    }
  },
  created () {
    this.checkIsMobile()
  },
  mounted () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  components: {
    IntroSwiper
  }
}
</script>

// 자식 컴포넌트 (Swiper 영역)
<template>
  <swiper ref="introSwiper" :options="swiperOption">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
    <swiper-slide>4</swiper-slide>
    <swiper-slide>5</swiper-slide>
    <swiper-slide>6</swiper-slide>
    <swiper-slide>7</swiper-slide>
    <swiper-slide>8</swiper-slide>
    <swiper-slide>9</swiper-slide>
    <swiper-slide>10</swiper-slide>
    <swiper-slide>11</swiper-slide>
    <swiper-slide>12</swiper-slide>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  name: 'IntroSwiper',
  props: {
    swiperOption: {
      type: Object
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>