<template>
  <div
    class="slider"
    :class="{'ts-slider': navigation && (tempRoute.meta && !tempRoute.meta.details), 'bg_fff': tempRoute.meta && tempRoute.meta.details}"
  >
    <div class="slider-body">
      <div class="slider-icon" v-show="tempRoute.meta && !tempRoute.meta.details">
        <el-image
          class="logo-new-1"
          v-if="navigation"
          src="https://zws-imgs-pub.ezijing.com/static/public/118a89f2d923fcce7079577f62cd9f88.png"
        ></el-image>
        <el-image class="logo-new-2" v-else :src="require('@/assets/images/logofff.png')"></el-image>
      </div>
      <div class="slider-icon" v-show="tempRoute.meta && tempRoute.meta.details">
        <el-image
          class="logo-new-1"
          src="https://zws-imgs-pub.ezijing.com/static/public/118a89f2d923fcce7079577f62cd9f88.png"
        ></el-image>
      </div>
      <div class="slider-banner">
        <div v-for="(item, index) in sidebar" :key="index" class="tab-item">
          <div v-if="!item.hidden">
            <template
              v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"
            >
              <app-link
                v-if="onlyOneChild.meta"
                :to="resolvePath(onlyOneChild.path, item.path)"
                class="app-link"
              >
                <span class="tab-link">{{onlyOneChild.meta.title}}</span>
              </app-link>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppLink from './Link.vue'
import path from 'path'
import { isExternal } from '@/utils/validate'
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default {
  mixins: [dyHeight],
  components: {
    AppLink
  },
  data() {
    this.onlyOneChild = null
    return {
      tempRoute: {}
    }
  },
  watch: {
    $route() {
      this.infoRouer()
    }
  },
  computed: {
    sidebar() {
      return this.$router.options.routes
    }
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          this.onlyOneChild = item
          return true
        }
      })
      if (showingChildren.length === 1) {
        return true
      }
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return true
      }
      return false
    },
    resolvePath(routePath, basePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(basePath)) {
        return basePath
      }
      return path.resolve(basePath, routePath)
    },
    infoRouer() {
      this.tempRoute = Object.assign({}, this.$route)
    }
  },
  mounted() {
    this.infoRouer()
  }
}
</script>

<style lang="scss" scoped>
.logo-new-2{
  width: 217px;
}
.logo-new-1{
  width: 221px;
}
.slider {
  height: 80px;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.3);
  .slider-body {
    width: 80%;
    display: flex;
    margin: 0 auto;
    height: 100%;
    justify-content: space-between;
    .slider-icon {
      flex: 1;
      .el-image {
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .slider-banner {
      display: flex;
      flex: 2;
      .tab-item {
        flex: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        .app-link {
          color: #fff;
          &.router-link-active .tab-link {
            color: #af1b40ff !important;
          }
        }

        .tab-link {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          cursor: pointer;
        }
      }
    }
  }
}
.ts-slider {
  height: 60px;
  background: #fff;
  .slider-body {
    .slider-banner {
      .tab-item {
        .tab-link {
          color: #222222;
        }
      }
    }
  }
}
.bg_fff {
  background: #fff;
  .slider-body {
    .slider-banner {
      .tab-item {
        .tab-link {
          color: #222222;
        }
      }
    }
  }
}
</style>
