<template>
  <header class="header" :class="{ 'is-fixed': fixed, 'is-enter': isEnter && fixed }">
    <HeaderNews />
    <div class="header-inner">
      <div class="header-main">
        <div class="logo">
          <router-link to="/">
            <img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_white.svg" v-show="fixed && !isEnter" />
            <img src="https://webapp-pub.ezijing.com/project/cuw/cuw_logo_blue.svg" v-show="isEnter || !fixed" />
          </router-link>
        </div>
        <nav class="nav">
          <div class="nav-item" v-for="item in navList" :key="item.path">
            <router-link :to="item.path">{{ item.title }}</router-link>
          </div>
        </nav>
      </div>
    </div>
  </header>
</template>

<script>
import HeaderNews from './headerNews.vue'

export default {
  name: 'AppHeader',
  props: { fixed: { type: Boolean, default: false } },
  components: { HeaderNews },
  data() {
    return {
      scrollTop: 0,
      navList: [
        { title: '首页', path: '/index' },
        { title: '家庭教育硕士', path: '/profession' },
        { title: '报名申请', path: '/my' },
        { title: '最新动态', path: '/news' },
        { title: '联系我们', path: '/contact' }
      ]
    }
  },
  computed: {
    isEnter() {
      return this.scrollTop > 0
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;

  &.is-fixed {
    .header-inner {
      position: fixed;
      top: 40px;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .nav {
      .nav-item {
        color: #fff;
      }
    }
  }
  &.is-enter {
    .header-inner {
      background-color: #fff;
    }
    .header-main {
      height: 60px;
    }
    .nav {
      .nav-item {
        color: #000;
      }
    }
  }
}
.header-inner {
  width: 100%;
  background-color: #fff;
}
.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  height: 80px;
  margin: 0 auto;
  transition: all 0.5s;

  .logo {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    a {
      height: 80%;
    }
    img {
      height: 100%;
    }
  }
  .nav {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    .nav-item {
      flex: 1;
      text-align: right;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000;
    }
    a {
      &.router-link-active {
        color: var(--main-color);
      }
    }
  }
}
</style>
