<template>
  <div class="navigation-main">
    <div class="list" ref="ref_list">
      <template v-for="(item, index) in $store.state.menu.navigations">
        <div class="navigation __hover" :class="{active: item.name === $route.name}" :style="`transform: translateX(${-8 * index}px);`" @click="toNavigation(item, index)">
          <div class="title">{{item.title}}</div>
          <SvgIcon class="close" name="close_1" @click.stop="closeNavigation(item, index)"/>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({})
    const ref_list = ref()
    const closeNavigation = (item: any, index: number) => {
      if (item.name === route.name) {
        const len = store.state.menu.navigations?.length
        if (len === 1) {
          router.push({
            name: store.state.menu.homeRouterName
          })
        } else if (index === len - 1) {
          router.push({
            name: store.state.menu.navigations[index - 1].name
          })
        } else {
          router.push({
            name: store.state.menu.navigations[index + 1].name
          })
        }
      }
      store.dispatch('menu/LOAD_NAVIGATION_DEL', item.name)
    }
    const toNavigation = (item: any, index: number) => {
      autoScroll(index)
      router.push({name: item.name})
    }
    const autoScroll = (index: number) => {
      const el = ref_list.value.children[index]
      const relaLeft = el.offsetLeft - el.parentNode.offsetLeft
      ref_list.value.scrollTo({
        left: relaLeft - ref_list.value.clientWidth / 2,
        behavior: "smooth",
      })
    }
    const initScroll = () => {
      let index = 0
      store.state.menu.navigations.forEach((v: any, i: number) => {
        if (v.name === route.name) {
          index = i
        }
      })
      autoScroll(index)
    }
    watch(() => [store.state.menu.navigations, route], (n: any) => {
      initScroll()
    }, {deep: true})
    onMounted(() => {
      initScroll()
    })
    return {
      ...toRefs(state),
      closeNavigation,
      toNavigation,
      ref_list
    }
  },
})
</script>

<style scoped lang="scss">
  .navigation-main {
    margin: 10px 0 0 10px;
    width: 100%;
    .list {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: flex-end;
      overflow-x: auto;
      &::-webkit-scrollbar { width: 0px; height: 0px; }
      .navigation {
        height: 28px;
        box-sizing: border-box;
        padding: 0 18px;
        background-color: #0062E9;
        clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        white-space: nowrap;
        line-height: 1;
        &:first-child {
          clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
        }
        &.active {
          font-size: 14px;
          color: #333333;
          height: 100%;
          background-color: #FFFFFF;
          border-radius: 2px 2px 0 0;
          z-index: 2;
        }
        .title {
          min-width: 48px;
          text-align: center;
          padding-bottom: 2px;
        }
        .close {
          margin-left: 14px;
          width: 10px;
          height: 10px;
        }
      }
    }
  }
</style>
