<template>
	<div class="header-wrapper" >


		<div class="nav-wrapper header-default" >

      <el-row :span="24" type="flex" justify="center" align="middle"  style="height: 80px;margin-top: 20px;">
        <el-col :span="4" >
          <img src="../../../assets/images/logo_portal.png" style="width: 80%;float: right"  alt="">
        </el-col>

        <el-col :span="16" >
          <el-menu  router :default-active="$route.path"  text-color="#111" active-text-color="#2f1ce5"  mode="horizontal" >
            <el-menu-item style="width: 15% ;font-size: 16px;font-weight: bold" index="/index">网站首页</el-menu-item>
            <el-submenu style="width: 15%;font-weight: bold"  index="/product">
              <template slot="title"  >产品中心</template>
<!--              <el-menu-item style="font-size: 16px" index="/product?id=1"  >自助打印系统</el-menu-item>
              <el-menu-item style="font-size: 16px" index="/product?id=2"  >智能win盒</el-menu-item>
              <el-menu-item style="font-size: 16px" index="/product?id=3"  >自助打印设备</el-menu-item>-->


              <el-menu-item style="font-size: 16px" index="/product?id=1" >自助打印系统</el-menu-item>
              <el-menu-item style="font-size: 16px" index="/product?id=2"  >智能win盒</el-menu-item>
              <el-menu-item style="font-size: 16px" index="/product?id=3"  >自助打印设备</el-menu-item>


            </el-submenu>
            <el-menu-item style="width: 15%;font-size: 16px;font-weight: bold"  index="/example" >合作案例</el-menu-item>
            <el-menu-item style="width: 15%;font-size: 16px;font-weight: bold"  index="/news" >招商加盟</el-menu-item>
            <el-menu-item style="width: 15%;font-size: 16px;font-weight: bold"  index="/about" >关于我们</el-menu-item>
          </el-menu>
        </el-col>

        <el-col :span="4">
          <el-button  @click="login_redirct()" class="blue-button"  style="float: left;"round>管理平台登录</el-button>
<!--          <img src="../../../assets/images/manage_login.png" style="margin-top:10px;float: right;margin-right: 50px" @click="login_redirct()"  alt="">
      -->  </el-col>
      </el-row>



<!--      <div class="nav" style=""   >
				<ul class="am-nav am-nav-pills am-nav-justify">
          <li ><img src="../../../assets/images/logo_portal.png" style="width: 150px" alt=""></li>
					<li><router-link class="router" to="/index">网站首页</router-link></li>
					<li><router-link class="router" to="/product">产品中心</router-link></li>
					<li><router-link class="router" to="/example">合作案例</router-link></li>
					<li><router-link class="router" to="/news">招商加盟</router-link></li>
					<li><router-link class="router" to="/about">关于我们</router-link></li>
          <li ><img src="../../../assets/images/manage_login.png" style="width: 150px" @click="login_redirct()"  alt=""></li>
          <li ><el-button @click="login_redirct()">
            <i class="el-icon-devops" />
          </el-button></li>
				</ul>
      </div>-->
    </div>


    <div :class="tops?'navbar':'navbar-top'">
      <el-tooltip class="item" effect="dark"  placement="left">

        <div slot="content" v-html="headContent"></div>

        <a><i>  <svg-icon  icon-class="headset-one" width="30px" height="30px" ></svg-icon></i></a>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="微信" placement="left">
        <a><i>  <svg-icon  icon-class="wechat" width="30px" height="30px"></svg-icon></i></a>

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="抖音" placement="left">

        <a><i> <svg-icon icon-class="tiktok" width="30px" height="30px"></svg-icon></i></a>
<!--          <a><i class="el-icon-shopping-cart-2"></i></a>-->

      </el-tooltip>

<!--      <div class="qrShow right" v-if="showQR">
        <el-image
            style="width: 100px; height: 100px;border-radius: 8px;"
            src="static/img/rightBar/qrcode.jpg"
            fit="cover">
        </el-image>
      </div>-->
<!--      <a @mouseover="showQRCode" @mouseleave="hideQRCode"><i class="el-icon-full-screen"></i></a>-->
      <el-tooltip class="item" effect="dark" content="返回顶部" placement="left" v-if="tops">
        <a @click="gotop"><i class="el-icon-caret-top"></i>
          <br>
          <span>顶部</span></a>
      </el-tooltip>
    </div>
	</div>
</template>

<script>
import AppFunctions from "@/utils/AppFunctions";
export default {
	name: "Header",
	components: {},
	data(){
		return{
      headContent:"&nbsp;&nbsp;&nbsp;&nbsp;服务热线<br/><br/>  18180928870<br><br>",
      showQR:false,
      tops:false,
      heights:window.innerHeight,
      scrolltop:'',
      companyInfo: {},
			AppFunctions,
		}
	},
	methods: {
    getCompanyInfo() {
      //获取公司信息，默认第一个
      this.$post("/company/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              if (res.data.data.length > 0) {
                this.companyInfo = res.data.data[0]
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });

    },

    login_redirct() {
      //todo 重新定位
      console.log("redirect")
      window.open("https://admin.jingzaowu.com", "_blank");
      // window.location.href("https://admin.jingzaowu.com");

    },

		toggleStickyHeader() {
			const scrolled = document.documentElement.scrollTop;
			if (scrolled > 100) {
				AppFunctions.addClass('.header-default', 'sticky');
			} else if (scrolled <= 100) {
				AppFunctions.removeClass('.header-default', 'sticky');
			}
		},
    showQRCode(){//显示二维码
      this.showQR = true
    },
    hideQRCode(){//隐藏二维码
      this.showQR = false
    },
    scrollToTop () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrolltop = scrollTop
      if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
        this.tops = true
      } else {
        this.tops = false
      }
    },
    gotop () {
      let timer = setInterval(() => {
        document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
        if (this.scrolltop === 0) {
          clearInterval(timer)
        }
      }, 15)
    },
	},
	created() {
		window.addEventListener('scroll', this.toggleStickyHeader);
	},

  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
	mounted() {
    this.getCompanyInfo()
		this.toggleStickyHeader();
    window.addEventListener('scroll', this.scrollToTop)
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.toggleStickyHeader);
	}

}
</script>

<style scoped>

::v-deep .el-icon-devops {
  background: url('../../../assets/images/manage_login.png') center no-repeat;
  font-size: 50px;
  background-size: cover;
}

::v-deep .el-icon-devops:before {
  content: "fffff";
  font-size: 50px;
  visibility: hidden;
}
.router.router-link-active{
	/*color: #fff;*/
	/*background-color: #0e90d2;*/
	/*border: 1px solid #0e90d2;*/
	cursor: default;

	color: #0e90d2;
}

.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
  text-decoration: none;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 0px #e6e6e6;
}

.el-menu--horizontal /deep/ .el-submenu.is-active .el-submenu__title {
  border-bottom: 0px solid #409EFF;
  color: #303133;
}

.el-submenu /deep/ .el-submenu__title {
    font-size: 16px;
    color: #303133;
    padding: 0 20px;
    cursor: pointer;
    -webkit-transition: border-color .3s,background-color .3s,color .3s;
    transition: border-color .3s,background-color .3s,color .3s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.navbar {
  text-align: center;
  background-color: white;
  position: fixed;
  top: 68%;
  right: 2%;
  width: 55px;
  height: 220px;
  z-index: 999;
  border-radius: 10px;
  border: solid 1px #e6e6e6;
}
.navbar-top{
  text-align: center;
  background-color: white;
  position: fixed;
  top: 68%;
  right: 2%;
  width: 55px;
  height: 165px;
  z-index: 999;
  border-radius: 10px;

}
.navbar a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  padding-top: 5px;
}
.navbar a:last-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 15px;
  border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 55px;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 10px 10px 0px 0px;
}
.navbar a:hover {
  background-color: #2f1ce5;
  color: white;
}
.navbar-top a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  padding-top: 5px;
}
.navbar-top a:last-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 55px;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
  background-color: #2f1ce5;
  color: white;
}

.svg-icon:hover{
  -webkit-filter: drop-shadow(0px 0px 0px red);
  color: #067acc !important;
}

.blue-button {
  background-color: #2f1ce5;
  color: white;
  letter-spacing: 3px;
}


</style>