<template>
  <div class="body-box">
      <div class="head-box clearfix">
        <div class="logo">江西东乡经济开发区决策一张图</div>
        <div class="header-left-box">
          <div class="head-date">
            <div class="hd-time">{{timeString}}</div>
            <div class="hd-date">{{dateString}}</div>
          </div>
          <div class="nav-ul" >
            <a :href="'http://223.84.218.79:18084/alarm?token='+token" target="_Blank" class="nav-li">智慧管网</a>
            <a :href="'http://223.84.218.79:18083/route/login?token='+token" target="_Blank" class="nav-li">智慧安监</a>
          </div>
          <div class="iconn"></div>
        </div>
        <div class="header-right-box">
          <div class="nav-ul">
            <a :href="'http://223.84.218.79:18088/jxdx/pages/index.html?token='+token" target="_Blank" class="nav-li">智慧环保</a>
            <a :href="'http://223.84.218.79:18086/#/login?token='+token" target="_Blank" class="nav-li">产业经济</a>
          </div>
          <div class="iconn"></div>
          <div class="hd-exit" @click="exitSystem">注销</div>
        </div>
      </div>
      <div class="main-body">
        <router-view/>
      </div>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data () {
      return {
        token:null,
        dateString: new Date().format("yyyy-MM-dd"),
        timeString: new Date().format("HH:mm:ss"),
        timer: null,hearTimer:null,
        menuShow: {
          '智慧管网': {isShow:true,path:"economic"},
          '智慧安监': {isShow:true,path:"dataService"},
          '智慧环保': {isShow:true,path:"reportManage"},
          '产业经济': {isShow:true,path:"synthetical"},
        },
      }
    },
    created (){
      let vm = this;
      vm.token = JSON.parse(sessionStorage.getItem("token"))
      axios.defaults.headers.common['Authorization'] = JSON.parse(sessionStorage.getItem("token"));
      //时间定时器
      vm.timer = setInterval(()=>{
        let dateTime = new Date().format("yyyy-MM-dd HH:mm:ss");
        let _list = dateTime.split(" ");
        vm.dateString = _list[0];
        vm.timeString = _list[1];
      },1000);

    },
    methods:{
      exitSystem (){
        let vm = this;
        vm.$confirm('确定退出系统吗？','提示',{type:'warning'}).then(()=> {
          vm.$router.push({path: "/login"})
          vm.$http.post('/uniform-auth/auth/logout').then(function (resp) {
            let _data = resp.data;
            if (_data.code === 200) {
              axios.defaults.headers.common['Authorization'] = ""
              sessionStorage.setItem("token", "")
              sessionStorage.removeItem("userData");
              vm.$router.push({path: "/login"})
            } else {
              vm.$message.error(_data.message);
            }
          })
        })
      },
    },
  }
</script>
<style scoped>
  .body-box{width: 100%;height: 100%;background:url(../assets/images/index/bg.png) no-repeat;background-size: 100% 100%;font-size: 14px;overflow: hidden}
  .head-box{width: 100%;height:75px;position: relative;color:#0ab7ff;}
  .logo{position:absolute;width:480px;height:76px;background:url(../assets/images/index/logobg.png) no-repeat center;text-align:center;line-height:64px;color:#0ab7ff;font-size: 22px;left:calc(50% - 240px)}
  .header-left-box,.header-right-box{position:absolute;top:0px;height:76px;width:calc(50% - 240px);background: url("../assets/images/index/top_bg.png") repeat-x;}
  .header-left-box{left:0}
  .header-right-box{right:0;}

  .head-date{float:left;margin-left:7px;float:left;line-height:42px;}
  .head-date div{float:left;}
  .hd-time{color:#fff;float:left;font-size:16px;width:70px;}
  .hd-date{color:#07b6ff;font-size:14px;width:75px;text-align: right;}
  .header-left-box .nav-ul{float:right;}
  .header-right-box .nav-ul{float:left;margin-left:18px;}
  .nav-li{width:130px;height:42px;float:left;text-align: center;line-height:42px;user-select:none;cursor:pointer;color:#0ab7ff;background:url(../assets/images/index/line.png) no-repeat right center;}
  .header-right-box .nav-li{background:url(../assets/images/index/line-right.png) no-repeat left center;}
  .iconn{width: 143px;height:9px;background:url(../assets/images/index/iconn.png) no-repeat left center;position: absolute;bottom:0px;}
  .header-left-box .iconn{left: 10px;}
  .header-right-box .iconn{right: 10px;}
  .main-body{width: calc(100% - 30px);height: calc(100% - 91px);padding: 0 15px 15px;overflow: hidden}
  .hd-exit{height:42px;line-height: 42px;background: url(../assets/images/exit.png) no-repeat 0 center;margin-left:10px;padding-left:30px;cursor: pointer;position: absolute;right: 10px;}
  .hd-exit:hover{color: #fff;}
</style>