<template>
  <div class="header">
    <a class="logo"
       @click="toIndex">
      <img src="@/assets/images/logo.png"
           alt="">
    </a>
    <!-- pc端 -->
    <template v-if="$store.getters.getModelType">
      <navbar v-if="navShow"
              ref="nav"
              :isHome.sync="isHome"
              :isEstate.sync="isEstate"
              :isIasf.sync="isIasf"
              @showMoreBtns="updateBtnsType"></navbar>
      <div class="tools"></div>
    </template>
    <!-- 手机端 -->
    <template v-else>
      <i class="rightBox"
         :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
         @click="updateModelType"></i>
      <div class="contentBox"
           v-show="modelType">
        <navbar ref="nav"
                :isHome.sync="isHome"
                :updateModelType="updateType"></navbar>
        <div class="modelBox">
          <div class="searchBox"><img class="search"
                 :src="require('@/assets/images/search' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
                 alt=""
                 @click.stop="toggleSearch"></div>
          <div class="languageBox">
            <!-- <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"> -->
            <template v-if="Util.isEn(site)">
              <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
                   alt=""
                   @click.stop="toggleLang">
            </template>
            <template v-else>
              <img :src="require('@/assets/images/en' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
                   alt=""
                   @click.stop="toggleLang">
            </template>
          </div>
          <div v-if="showSearch"
               class="search-wrap"
               @click.stop="stop">
            <input ref="search"
                   type="text"
                   :placeholder="$t('column.titlePlaceholder')"
                   v-model="title">
            <img class="search-icon"
                 src="@/assets/images/search.png"
                 alt=""
                 @click="handleSearch">
            <i class="el-icon-close close-icon"
               @click="showSearch = false"></i>
          </div>
        </div>
      </div>

    </template>
  </div>
</template>
<script>
import Util from '@/libs/util'
import { mapMutations } from 'vuex'
import navbar from '../navbar'
export default {
  data () {
    return {
      Util,
      isHome: true,
      isEstate: false,
      isIasf: false,
      showSearch: false,
      height: 907,
      title: '',
      searchTimer: null,
      modelType: false,
      navShow: true
    };
  },
  components: {
    navbar
  },
  computed: {
    isSfel () {
      return this.$route.path === '/sfel'
    },
    site () {
      return this.$route.query.siteId || this.$store.state.content.site
    },
  },
  watch: {
    '$route.path': {
      handler () {
        this.isHome = Util.isIndex()
        this.isEstate = this.$route.path === '/estate/index'
        this.isIasf = this.$route.path === '/iasf'
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.setKeyword('')
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    ...mapMutations('content', [
      'setKeyword'
    ]),
    toIndex () {
      this.$refs.nav.jump()
    },
    stop () {

    },
    /**
     * pc端下,当导航栏条目大于10的情况下,显示更多按钮
     * type : true显示,false隐藏
     */
    updateBtnsType (type) {
      this.showMoreBtns = type
    },
    // 获取页面滚动距离(home长页专用)
    handleScroll () {
      if (Util.isIndex()) {
        const h = this.height
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (this.isHome == scrollTop > h) {
          if (this.isHome != !(scrollTop > h)) this.navShow = false
          this.isHome = !(scrollTop > h)
          this.isEstate = !(scrollTop > h) && this.$route.path === '/estate/index'
          this.$nextTick(() => {
            this.navShow = true
          })
        }
      }
    },
    // 切换显示搜索
    toggleSearch () {
      this.showSearch = !this.showSearch
      this.$nextTick(() => {
        this.$refs.search.focus()
      })
    },
    // mail点击
    toMail () {
      window.open('https://qiye.aliyun.com/alimail/auth/login?custom_login_flag=1&reurl=%2Falimail%2F')
    },
    // oa点击
    toOa () {
      window.open('http://oa.iasf.ac.cn/sys/portal/page.jsp')
    },
    // 切换语言
    toggleLang () {
      let id = +(this.$route.query.siteId || this.$store.state.content.site)
      // 中英文站点的id是相邻的，有6个站点，1/2 3/4 5/6
      id % 2 ? id++ : id--
      location.href = this.$router.resolve(`/column?siteId=${id}`).href
      location.reload()
    },
    // 全局搜索
    handleSearch () {
      this.setKeyword(this.title)
      this.modelType = !this.modelType
      if (this.title) {
        this.showSearch = false
        this.$router.push(`/column/result`)
      }
    },
    // 更改右侧盒子样式
    updateModelType () {
      this.modelType = !this.modelType
    },
    updateType (type) {
      this.modelType = type
    }
  }
};
</script>
<style scoped lang="scss">
$height: 90px;
.header {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: $height;
    padding: 0 5% 0 5%;
    &:not(.channel) {
        background-color: #fff;
        border-bottom: 1px solid #f7f7f7;
    }
    &.estate {
        background-color: rgba(0, 0, 0, 0.15);
    }
    .logo {
        cursor: pointer;
        img {
            width: 150px;
            margin-right: 10px;
        }
    }
    .tools {
        img {
            cursor: pointer;
        }
    }
    .search {
        margin-right: 43px;
    }
}
.search-wrap {
    position: absolute;
    top: 67px;
    right: 89px;
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 10px;
    background-color: #fff;
    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
    input {
        width: 300px;
        height: 40px;
        padding: 0 40px 0 15px;
        font-size: 1.14rem;
        color: #333;
        line-height: 46px;
        border: 0;
        border-radius: 4px;
        outline: none;
    }
    .search-icon {
        padding-right: 15px;
        margin: 0 15px;
        cursor: pointer;
        border-right: 1px solid #ccc;
    }
    .close-icon {
        font-size: 2rem;
        cursor: pointer;
    }
}
.menu-child {
    /deep/ .el-submenu__title {
        font-size: 1rem;
    }
}
.rightBox {
    position: absolute;
    right: 10px;
    top: 2rem;
    font-size: 2.57rem;
    color: #818181;
}
.contentBox {
    width: 100%;
    position: absolute;
    top: 90px;
    left: 0;
    background-color: white;
    z-index: 9999;
    max-height: 30rem;
    overflow-y: scroll;
}
.searchBox,
.languageBox {
    padding-left: 20px;
    height: 56px;
    line-height: 56px;
}
.modelBox {
    position: relative;
    padding-bottom: 20px;
    .search-wrap {
        top: 0;
    }
}
@media (max-width: 1660px) {
    .header {
        .logo {
            left: 10px;
        }
        .search {
            margin-right: 20px !important;
        }
        .tools {
            right: 30px;
        }
    }
}

@media (max-width: 1200px) {
    .header {
        color: black !important;
        background-color: #fff;
    }
    .contentBox {
        .searchBox,
        .languageBox {
            padding-left: 20px;
            height: 40px;
            line-height: 40px;
        }
    }
    .search-wrap {
        right: 10px;
        top: 0;
        width: 70%;
        input {
            width: 15rem;
            padding: 0 0.5rem 0 0.1rem;
        }
    }
}
</style>
