<template>
  <div>
    <!--logo-->
    <div class="header-logo fl" :class="{'shrink-header-logo':isShrink}">
      <img v-show="!isShrink" key="max-logo" :src="imgUrl"  alt="公司logo" style="height:60px">
      <img v-show="isShrink" key="min-logo" :src="imgUriShrink"  class="min-logo-img">
    </div>
    <div class="fl header-menu-width-200" :class="{'header-menu-width-60':isShrink}">
      <!--收缩-->
      <div class="setting-icon fl" @click="_toggleClick">
        <Icon type="ios-menu" size="30" color="#eee" :class="{'rotate-icon':isShrink}"/>
      </div>
      <!--收缩-->
      <!--一级导航-->
      <div class="fl">
        <!--menuList -->
        <ul class="navMenu">
          <li
            v-for="item in (isDropDown === 0 ? menuList.slice(0,6) :isDropDown === 1?menuList.slice(0,14): menuList)"
            :key="item.name"
            :class="{'active':isShowCode===item.code}">
            <p @click="_goto(item)"> {{ item.name }}</p>
          </li><!--菜单超过6个或15个下拉隐藏-->
          <li v-show="isDropDown !== -1" style="width:50px;text-align: center">

            <el-popover
              trigger="click">
              <div class="set-menu-list-cont">
                <div style="margin:10px;">
                  <ul class="set-menu-list">
                    <li
                      v-for="item in (isDropDown === 0 ? menuList.slice(6) :isDropDown === 1?menuList.slice(14): [])"
                      :key="item.name"
                      @click="_goto(item)">
                      <p> {{ item.name }}</p>
                    </li>
                  </ul>
                </div>
              </div>
              <i slot="reference" class="el-icon-caret-bottom" style="color: #fff;font-size: 17px;cursor: pointer;line-height: 50px"></i>
            </el-popover>

          </li>
          <!--菜单超过5个下拉隐藏/-->
        </ul>
        <!--menuList /-->
      </div>
      <!--一级导航-->
      <!--导航左侧退出-->
      <div class="fr" style="width:360px">
        <top-bar-menu @on-result-change="_tagsResult" @on-skin-change="_skinResult"/>
      </div>
      <!--导航左侧退出-->
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
</template>
<script>
import global from '../../api/config'
import TopBarMenu from './top-bar-menu'

export default {
  components: { TopBarMenu },
  props: ['menuList', 'menuTheme', 'imgUrl'],
  data() {
    return {
      isShrink: false,
      imgUriShrink: `${global.staticURL}/img/logo-min.png`,
      isDropDown: -1,
      isShowCode: global.getCode()
    }
  },
  updated() {
    this.$nextTick(() => {
      this._getDropDown()
    })
  },
  methods: {
    _toggleClick() {
      this.isShrink = !this.isShrink
      this.$emit('on-result-change', this.isShrink)
    },
    _goto(data) {
      if (this.isShowCode === data.code) {
        this.$router.push('/')
      } else {
        window.open(data.uri, data.name)
      }
    },
    // 判断导航显示的数量（最多显示6个）；
    _getDropDown() {
      const screenWith = document.body.clientWidth
      if (screenWith <= 1366) {
        // 小屏幕
        if (this.menuList.length > 6) {
          this.isDropDown = 0
        } else {
          this.isDropDown = -1
        }
      } else if (screenWith > 1366) {
        // 大屏幕
        if (this.menuList.length > 14) {
          this.isDropDown = 1
        } else {
          this.isDropDown = -1
        }
      } else {
        this.isDropDown = -1
      }
    },
    // tags标签的关闭
    _tagsResult(data) {
      this.$emit('on-tag-result-change', data)
    },
    // 皮肤更换
    _skinResult(data) {
      this.$emit('on-skin-result-change', data)
    }
  }
}
</script>
