<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title">{{title}}</div>
    <div class="btnGroup">
      <div style="display: flex;align-items: center;">
        <div class="btnRound" v-for="(item,index) in menuData" :key="index" @click="jump(item)">
          {{item.name}}
          <span class="top-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <div style="margin-right: .2rem;display: flex;">
          <div style="font-size: mini;font-weight: bold;">所属机构：</div>
          <div style="font-size: mini;margin-right: 10px;">{{deptName}}</div>
          <div style="font-size: mini;font-weight: bold;">角色：</div>
          <div style="font-size: mini;margin-right: 10px;">{{roleName}}</div>
          <div style="font-size: mini;font-weight: bold;">账号名称：</div>
          <div style="font-size: mini;margin-right: 10px;">{{userInfo.user_name}}</div>
        </div>
        <div class="btnRound" @click="prev">
          <span class="top-left border-span"></span>
          <!-- <span class="top-right border-span"></span> -->
          <!-- <span class="bottom-left border-span"></span> -->
          <span class="bottom-right border-span"></span>
          返回
        </div>
        <div class="btnRound" @click="handleScreen">
          <span class="top-left border-span"></span>
          <span class="bottom-right border-span"></span>
          全屏
        </div>
        <div class="btnRound" @click="turnOff">
          <span class="top-left border-span"></span>
          <span class="bottom-right border-span"></span>
          退出
        </div>
      </div>
    </div>
    <times></times>
    <weather2></weather2>
  </div>
</template>

<script>
  import {
    getUserByTenantIdAndAccount
  } from "@/api/system/user"
  import {fullscreenToggel} from "../../../util/util";
  import weather2 from "./weather2.vue"
  import weather from "./weather.vue"
  import times from './time.vue'
  import {
    mapGetters,
    mapState
  } from "vuex";
  import {getUserInfo} from "../../../util/util.js"
export default {
  name: 'TopHeader',
  components:{
    weather2,
    times
    // weather
  },
  data(){
    return{
      topBtnGroup:false,
      menuData:[],
      title:'',
      deptName: "  ",
      roleName: "  "
    }
  },
  props:{
    title:{
      type: 'String'
    },
    index:{
      type:'String'
    }
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      "userInfo",
      // "deptName",
      // "roleName",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag"
    ])
  },
  mounted() {
    getUserByTenantIdAndAccount(this.userInfo.tenant_id, this.userInfo.account).then((res) => {
      this.deptName = res.data.data.deptName;
      // debugger
      this.roleName = res.data.data.roleName;
      // console.log("getUserByTenantIdAndAccount:"+ + "this.deptName" + this.deptName + "this.roleName" + this.roleName)
    });
    if(this.index==1){
      //社区首屏
    }else if(this.index==2){
      //第二屏
      if(getUserInfo()){

      }else{
        this.menuData = [{
          name:'社区全景',
          path:'smartCommunity',
        }]
      }
    }else if(this.index==3){
      //消防一屏
      this.menuData = [{
        name:'设备态势',
        path:'fireDevices',
      }]
    }else if(this.index==4){
      //消防二屏
      this.menuData = [{
        name:'消防态势',
        path:'fireControl',
      }]
    }else{
      //其他
      let agencies2 = JSON.parse(localStorage.getItem('agencies2'))
      this.title = agencies2.name
      if(getUserInfo()){
        this.menuData = [{
            name:'园区态势',
            path:'index2'
          }]
      }else{
        this.menuData = [{
            name:'社区全景',
            path:'smartCommunity',
          },{
            name:'社区态势',
            path:'index2'
          }]
      }
    }
  },
  methods:{
    turnOff(){
      this.$router.push({
        path:'index'
      })
    },
    prev(){
      this.$router.back(-1)
    },
    handleScreen() {
      fullscreenToggel();
    },
    jump(item){
      this.$router.push({path:item.path})
    }
  }
}
</script>

<style lang="less" scoped>
  @import url("../css/default.css");
  @import url("../css/mobile.css");
#top-header {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }
  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }
  .center-title {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
  .btnGroup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 50px;
    display: flex;
    width: 100%;
    height:30px;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5 linear;
    box-sizing: border-box;
  }
  .menuItem{
    cursor: pointer;
    border-radius: 5px;
    margin: 5px;
    color: #fff;
    font-size: 14px;
  }
  .menuItem:hover{
    color: #fff;
  }
  .icon{
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .btnRound{
    box-sizing: border-box;
    font-size: 12px;
    padding: 1px 10px;
    margin-right: 10px;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.5s linear;
    box-shadow: inset 0 0 50px rgba(255,255,255,.1), 0 0 5px rgba(0,0,0,.3);
  }
  .btnRound:hover{
    transition: all 0.5s linear;
    .top-left{
      top: -2px;
          left: -2px;
          border-top: 2px solid #fff;
          border-left: 2px solid #fff;
    }
    .bottom-right{
      bottom: -2px;
          right: -2px;
          border-bottom: 2px solid #fff;
          border-right: 2px solid #fff;
    }
  }
  .border-span{
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        opacity: .5;
  }
  .top-left{
    top: -2px;
        left: -2px;
        border-top: 2px solid #54dcf2;
        border-left: 2px solid #54dcf2;
  }
  .top-right{
    top: -2px;
        right: -2px;
        border-top: 2px solid #54dcf2;
        border-right: 2px solid #54dcf2;
  }
  .bottom-left{
    bottom: -2px;
        left: -2px;
        border-bottom: 2px solid #54dcf2;
        border-left: 2px solid #54dcf2;
  }
  .bottom-right{
    bottom: -2px;
        right: -2px;
        border-bottom: 2px solid #54dcf2;
        border-right: 2px solid #54dcf2;
  }
}
</style>
