<template>
	<div class="header">
    <!-- 顶层导航 -->
    <div class="ceiling">
      <div class="w" style="overflow: hidden;">
        <div class="left">
          <span>登录</span>
          <span>|</span>
          <span>免费注册</span>
        </div>
        <div class="right">
          <span>设为首页</span>
          <span>|</span>
          <span>加入收藏</span>
          <span>|</span>
          <span>在线留言</span>
          <span>|</span>
          <span>企业位置</span>
          <span>|</span>
          <span>手机站</span>
        </div>
      </div>
    </div>
    <!-- logo图片 -->
    <div class="logo">
      <div class="w" style="overflow: hidden;">
        <div class="left">
          <img src="../assets/image/logo.png">
        </div>
        <!-- 搜索框部分 -->
        <div class="right searchNews">
          <el-input  placeholder="请输入内容" class="input-demo" v-model="title">
            <el-button @click="handleSearch" slot="append" icon="el-icon-search" class="input-button"></el-button>
          </el-input>
        </div>
      </div>

    </div>

    <div class="nav">
      <div class="w">
        <!-- 一级导航 -->
        <div class="navone" ref="navone">
          <div class="card" v-for="(item, index) in list" @click="chooseSelection(index)">
            <router-link :to="item.goPageUrl">
              <div class="cardMenu1" ref="menu1" @mouseover="move(item, index)" @mouseout="out"><span :class="[{active:id === item.id}]">{{item.name}}</span></div>
            </router-link>
          </div>
        </div>
        <!-- 二级导航 -->
        <div class="menu2" v-if="showStatus&&menu2List.length>0" :style="{'top': domtop,'left': domleft}" @mouseover="moveMenu2AllOver"  @mouseout="out">
          <ul v-for="(item, index) in menu2List" @mouseover="moveMenu2(index)">
            <router-link :to="item.goPageUrl">
            <li :style="{color: currentIndex === index ? '#fcb212' : '#fff'}">{{item.name}}</li>
            </router-link>
          </ul>
        </div>

      </div>
    </div>
	</div>
</template>
<style>
.header {

}
.header .ceiling {
  height: 30px;
  line-height: 30px;
  background-color: #eeeeee;
  color: #333333;
  font-size: 12px;
}
.header .logo {
  overflow: hidden;
}
.header .logo .searchNews {
  height: 118px;
  line-height: 118px;
}
.header .logo .searchNews .input-demo {
  /*height: 100px;*/
}
.header .logo  .el-input__inner {
  /*height: 80px !important;
  line-height: 80px !important;*/
}
.header .nav{
	border-bottom: 4px solid #14A24B;
}
.header .navone {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  background: -webkit-linear-gradient(top, #f0f0f0 , #14A24B);
  background: -o-linear-gradient(bottom, #f0f0f0 , #14A24B);
  background: -moz-linear-gradient(bottom, #f0f0f0, #14A24B);
  background: linear-gradient(to bottom, #f0f0f0 , #14A24B);
}
.header .navone a{
  color: #fff;
}
.header .card {
  float: left;
  height: 60px;
  line-height: 60px;
  /*width: 95px;*/
  text-align: center;
}
.header .cardMenu1 span {
  display: inline-block;
  width: 96px;
}
.header .cardMenu1 .active {
  background-color: #14A24B;
}
/*二级导航样式*/
.header .menu2 {
  color: white;
  text-align: left;
  background: #14A24B;
  position: absolute;
  padding: 5px 20px;
  z-index: 99999;
}
.header .menu2 ul {
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
}
.header .menu2 ul li {
  border-radius: 1px solid #fff;
}
.header .menu2 ul  a {
  display: block;
  color: #fff;
}
</style>

<script>
import Swiper from 'swiper';
export default{
  data() {
	    return {
	    isShow: true,
      nowIndex: 0,
      domleft: 0,
      domtop: 210,
      selectedIndex: 0,
      currentIndex: 1000,
      showStatus: false,
      menu2List: [],
      list: [],
      title: ''
    };
  },
  methods: {
    async loadData() {
      const response = await this.$http.get(`biz/menus`);
      if (response.data.code === 1) {
        this.loading = false;
        this.list = response.data.responseData;
        // console.log(this.list);
      }
    },
    // 搜索功能
    handleSearch() {
      sessionStorage.setItem('title', this.title);
      this.title = '';
      window.open('/obscure');
    },
    chooseSelection (index) {
      this.nowIndex = index;
    },
    move(item, index) {
      let domRect = this.$refs.menu1[index].getBoundingClientRect();

      const left = domRect.left + 3;

      const top = domRect.top + domRect.height;

      this.domleft = left + 'px';
      // this.domtop = top + 'px';

      this.showStatus = true;
      this.menu2List = item.childList;
    },
    moveMenu2(index) {
      this.currentIndex = index;
    },
    moveMenu2AllOver() {
      this.showStatus = true;
    },
    out() {
      this.showStatus = false;
      this.currentIndex = 1000;
    }
  },
  props: {
    bindImg: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    slides: {
      type: Array, // 数据类型
      default: [] // 默认值
    },
    inv: {
      type: Number,
      default: 2000
    }
  },
  created() {
    this.loadData();
  },
  mounted () {
    // this.list  = sessionStorage.getItem('list');
  }
};
</script>
