<template>
  <div class="tours-list" v-if="show" :class="{barshow:isShowToursList}">
    <div class="top-con" v-if="toursList.length > 0">
      <div class="swiper-container" id="swTours">
        <ul class="swiper-wrapper" v-if="toursList.length>1">
          <li class="swiper-slide" v-for="(item, i) in toursList" :key="i" :class="{
            loopspan: item.name.length > spanlength && item.id=='id2',
            active:item.id=='id2'
          }">

            <span v-if="item.id=='id2'">{{item.name}}</span>
            <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
            <div class="tourbar">
              <div class="tourline"></div>
            </div>
          </li>
        </ul>

        <ul class="swiper-wrapper" v-else>
          <li class="swiper-slide" v-for="(item, i) in toursList[0].list" :key="i" :class="{
            active:item.id=='id2'
          }">
            <div class="tourImg" :style="`background-image:url(${item.enter.cover});`"></div>
            <div class="tourbar">
              <div class="tourline"></div>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useApp } from "@/app";
import { useStore } from "vuex";
const store = useStore();

const show = ref(false);
const spanlength = ref(5);

const toursList = computed(() => store.getters["fdkk/toursList"]);

const isShowToursList = computed(() => store.getters["fdkk/isShowToursList"]);

const loadList = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      new Swiper("#swTours", {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 10,
        centerInsufficientSlides: true,
        centeredSlidesBounds: true,
        freeMode: true,
      });
    }, 100);
  });
};

onMounted(() => {
  useApp().then(async (app) => {
    show.value = true;
    loadList();
  });
});

</script>

<style lang="scss" scoped>
$width: 1150px;

.tours-list {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: $width;
  overflow: hidden;
  max-height: 0;
  transition: .3s all ease;
  z-index: 9;

  .swiper-container {
    width: 100%;
    position: relative;

    >ul {
      >li {
        width: 90px;
        height: 40px;
        background: rgba(24, 24, 24, .5);
        line-height: 40px;

        >span,
        >div>span {
          cursor: pointer;
          display: inline-block;
          color: rgba(255, 255, 255, 0.8);
        }

        &.loopspan {

          >span,
          >div>span {
            animation: 5s wordsLoop linear infinite normal;
          }
        }

        &.active {

          >span,
          >div>span {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  #swTours {
    margin: 0 auto;

    >ul {
      >li {
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2px;

        >span {
          width: 100%;
          word-break: keep-all;

        }

        &.active {
          position: relative;

          .tourbar {
            position: absolute;
            width: 78px;
            left: 6px;
            right: 6px;
            bottom: 4px;
            height: 2px;
            border-radius: 2px;
            background: #000;
            overflow: hidden;

            .tourline {
              width: 50%;
              height: 100%;
              background: var(--colors-primary-base);
            }
          }
        }
      }
    }
  }

  .top-con {
    padding: 10px 30px;
    min-width: 400px;
    background: linear-gradient(268deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0) 100%);
  }
}

.barshow {
  max-height: 62px;
}


@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>