<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/2a5dca328ca63abcf1c8496180adc485.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/2a5dca328ca63abcf1c8496180adc485.png"
        ></el-image>
      </div>
      <div class="slider-banner">
        <div v-for="item in navList" :key="item.path" class="tab-item">
          <div class="app-link" :class="{ 'router-link-active': $route.path.includes(item.path) }">
            <router-link tag="span" :to="item.path" class="tab-link">{{ item.title }}</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dyHeight } from '@/pages/homepage/mixins/index.js'
export default {
  mixins: [dyHeight],
  data() {
    return {
      tempRoute: {},
      navList: [
        { title: '首页', path: '/index' },
        { title: '应用心理学硕士', path: '/profession' },
        { title: '报名申请', path: '/my' },
        { title: '最新动态', path: '/news' },
        { title: '联系我们', path: '/contact' }
      ]
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.infoRouer()
      }
    }
  },
  methods: {
    infoRouer() {
      this.tempRoute = Object.assign({}, this.$route)
    }
  }
}
</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: 5;
      .tab-item {
        flex: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        .app-link {
          color: #fff;
          &.router-link-active .tab-link {
            color: #e27f4d !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>
