<template>
  <div class="bar-list">
    <div class="swiper-container" id="swcatalogRoot"
      :style="`width:${catalogRootW > innerW ? '100%' : (catalogRootW + 'px')}`"
      v-if="store.metadata.catalogRoot.length > 0 && store.metadata.catalogs.length > 1">
      <ul class="swiper-wrapper" v-if="store.metadata.catalogRoot.length > 1">
        <li class="swiper-slide" :class="{
          active: store.currentCatalogRoot.id == item.id,
          loopspan: item.name.length > spanlength && store.currentCatalogRoot.id == item.id,
        }" @click="tabRoot(item)" v-for="(item, i) in store.metadata.catalogRoot" :key="i">
          <span v-if="store.currentCatalogRoot.id == item.id">{{ item.name }}</span>
          <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="bottom-con"
      :style="`width:${(Math.max(scenesListW, secondaryW) > 1150) ? '100%' : ((Math.max(scenesListW, secondaryW) + 120) + 'px')}`">
      <div class="swiper-container" :style="`width:${scenesListW > 1150 ? '100%' : (scenesListW + 'px')}`" id="swScenes"
        v-if="store.currentScenesList.length > 0">
        <ul class="swiper-wrapper">
          <li @click="tabCurrentScene(item)" class="swiper-slide" :class="{
            active: store.currentScene.sceneCode == item.sceneCode,
            loopspan: item.sceneTitle.length > spanlength && store.currentScene.id == item.id,
          }" :style="{ backgroundImage: `url(${item.icon})` }" v-for="(item, i) in store.currentScenesList" :key="i">
            <div>
              <span v-if="store.currentScene.id == item.id">{{ item.sceneTitle }}</span>
              <span v-else>{{
                item.sceneTitle.length > spanlength ? item.sceneTitle.slice(0, spanlength) :
                  item.sceneTitle
              }}</span>
            </div>
          </li>
        </ul>
      </div>

      <div class="swiper-container" id="swSecondary" :style="`width:${secondaryW}px`"
        v-if="store.secondaryList.length > 1">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" @click="tabSecondary(item)" :class="{
            active: store.currentSecondary.id == item.id,
            loopspan: item.name.length > spanlength && store.currentSecondary.id == item.id,
          }" v-for="(item, i) in store.secondaryList" :key="i">
            <span v-if="store.currentSecondary.id == item.id">{{ item.name }}</span>
            <span v-else>{{ item.name.length > spanlength ? item.name.slice(0, spanlength) : item.name }}</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script setup>
import appStore from '@/store/index';
import { ref, onMounted, computed, watch, nextTick } from "vue";

const store = appStore();
const spanlength = ref(5);

const swidth = ref({
  "swcatalogRoot": 130,
  "swSecondary": 84,
  "swScenes": 124,
})

const scenesListW = computed(() => store.currentScenesList.length * (swidth.value['swScenes'] + 10) - 10)
const secondaryW = computed(() => store.secondaryList.length * (swidth.value['swSecondary'] + 10) - 10)
const catalogRootW = computed(() => store.metadata.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)
const innerW = computed(() => 1150)


const loadList = () => {
  nextTick(() => {
    let t = setTimeout(() => {
      clearTimeout(t);
      ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
        new Swiper(item, {
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 10,
          centerInsufficientSlides: true,
          mousewheel:true,
          centeredSlidesBounds: true,
          freeMode: true,
          observer: true,
          observeParents:true
        });
      });
    }, 100);
  });
};

const tabCurrentScene = (data) => {
  store.currentScene = data;
};

const tabSecondary = (data) => {
  store.setCurrentSecondary(data);
};

const tabRoot = (data) => {
  store.setCurrentCatalogRoot(data);
};



onMounted(() => {
  loadList()
  store.$subscribe((mutation, state) => {
    loadList()
  })
})

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

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

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

    >ul {
      >li {
        white-space: nowrap;

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

        &.loopspan {

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

        &.active {

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

  .bottom-con {
    margin: 20px auto 0;
    padding: 10px;
    border-top: 2px solid #E1CEAA;
    border-bottom: 2px solid #E1CEAA;
    background: linear-gradient(89deg, rgba(141,127,100,0) 0%, rgba(141,127,100,0.8) 22%, rgba(141,127,100,0.8) 80%, rgba(141,127,100,0) 100%);
    backdrop-filter: blur(20px);
  }

  #swcatalogRoot {
    >ul {
      >li {
        box-sizing: border-box;
        overflow: hidden;
        width: 130px;
        line-height: 30px;
        height: 30px;
        background: rgba(132,115,83,0.5);
        border-radius: 25px 25px 25px 25px;
        border: 1px solid #E1CEAA;
        backdrop-filter: blur(4px);
        >span {
          width: 100%;
          word-break: keep-all;
        }

        &.active {
          // border: 1px solid rgba(255, 255, 255, 1);
        }
      }
    }
  }

  #swSecondary {
    margin: 20px auto 10px;

    >ul {
      >li {
        width: 84px;
        box-sizing: border-box;
        overflow: hidden;
        padding-bottom: 6px;

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

        &.active {
          position: relative;

          &::before {
            content: "";
            display: inline-block;
            position: absolute;
            bottom: 0;
            width: 20px;
            height: 2px;
            z-index: 9999;
            left: 50%;
            transform: translateX(-50%);
            background: var(--colors-primary-base);
          }
        }
      }
    }
  }

  #swScenes {
    >ul {
      >li {
        cursor: pointer;
        border-radius: 6px;
        border: 2px solid transparent;
        border-right: 0;
        background-size: cover;
        position: relative;
        overflow: hidden;
        width: 124px;
        height: 90px;
        border-radius: 1px;
        &::after{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          display: inline-block;
          background: rgba(0,0,0,0.3);
          content: '';
          pointer-events: none;
        }
        >div {
          position: absolute;
          bottom: 10px;
          left: 0;
          height: 20px;
          width: 100%;
          overflow: hidden;

          >span {
            width: 100%;
            line-height: 20px;
            word-break: keep-all;
          }
        }

        &.active {
          border: 2px solid #D9C7A4;
          &::after{
            display: none;
          }
          >div {
            >span {}
          }
        }
      }
    }
  }
}

.barshow {
  max-height: 190px;
}

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

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