<template>
  <div class="nav-bar-wrap">
    <el-menu class="navbar">
      <el-row style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between">
        <!-- logo & title -->
        <div>
          <div class="title-div">
            <img class="logo" :src="logo" alt="" @dblclick="showVersion" />
            <span class="title-text">{{ title }}</span>
          </div>
        </div>
        <!-- menu -->
        <side-menu></side-menu>
        <!-- 调度台选择框 -->
        <platform-selection v-if="getUserInfo" :user-role="sysUserInfo.role"></platform-selection>
        <!-- 左侧操作和显示区域 -->
        <div class="system-tools">
          <div class="btns">
            <i class="btn btn-theme" @click="showDialog"></i>
            <i class="btn" :class="'btn-' + (isFullscreen ? 'narrow' : 'fullscreen')" @click="handleScreen"></i>
          </div>
          <div class="user-info">
            <i class="avatar"></i>
            <div class="user-name">
              <span class="name">{{ sysUserInfo?.name }}</span>
              <span class="role">{{ sysUserInfo?.deviceName }}</span>
              <!--              <div class="role">{{ userInfo?.name }}</div>-->
            </div>
          </div>
        </div>
      </el-row>
    </el-menu>
  </div>
</template>

<script>
import { title } from "@/settings";
import SideMenu from "@/views/layout/SideMenu/index.vue";
import screenfull from "screenfull";
import { mapGetters } from "vuex";
import platformSelection from "@/views/layout/PlatformSelection.vue";

export default {
  name: "NavBar",
  components: { SideMenu, platformSelection },
  data() {
    return {
      // title,
      // logo: require("@/assets/警徽.png"),
      userInfo: "",
      isFullscreen: false,
      platform: localStorage.getItem("platform") || "1",
    };
  },
  computed: {
    ...mapGetters(["settings", "sysUserInfo", "version"]),
    getUserInfo() {
      return this.sysUserInfo && Object.keys(this.sysUserInfo).length > 0;
    },
    logo() {
      //判断当前是否有logo配置，undefined结尾说明还没有配置
      console.log("setting", this.settings.logo);
      if (this.settings.logo.endsWith("undefined") || this.settings.logo.endsWith("null")) {
        return require("@/assets/警徽.png");
      } else {
        return this.settings.logo;
      }
    },
    title() {
      return this.settings.title || title;
    },
  },
  mounted() {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      console.log("userInfo", JSON.parse(userInfo));
      this.userInfo = JSON.parse(userInfo);
    }
    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
  methods: {
    noPlatformChange() {
      localStorage.setItem("platform", this.platform);
      window.location.reload();
    },
    handleScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    },
    showDialog() {
      this.$store.commit("SET_VISUAL_VISIBLE", true);
    },
    showVersion() {
      alert("APP Version: " + this.version);
    },
  },
};
</script>

<style scoped lang="scss">
.logo {
  width: 44px;
  height: 46px;
}
.system-tools {
  height: 38px;
  display: flex;
  align-items: center;
  //margin-left: auto;
  .btns {
    display: flex;
    border-right: 2px solid #dde7ee;
    .btn {
      display: inline-block;
      width: 38px;
      height: 38px;
      margin-right: 24px;
      cursor: pointer;
      &-theme {
        background: url("~@/assets/images/layout/38px视觉配置默认.png") no-repeat;
        background-size: 100% 100%;
        &:hover,
        &-active {
          background: url("~@/assets/images/layout/38px视觉配置悬浮选中.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      &-fullscreen {
        background: url("~@/assets/images/layout/38px全屏放大默认.png") no-repeat;
        background-size: 100% 100%;
        &:hover,
        &-active {
          background: url("~@/assets/images/layout/38px全屏放大悬浮选中.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      &-narrow {
        background: url("~@/assets/images/layout/38px缩小浏览默认.png") no-repeat;
        background-size: 100% 100%;
        &:hover,
        &-active {
          background: url("~@/assets/images/layout/38px缩小浏览默认 1.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    padding-left: 24px;
    margin-right: 31px;
    height: 100%;
    .avatar {
      display: inline-block;
      width: 38px;
      height: 38px;
      background: url("~@/assets/images/layout/38px用户头像@2x.png") no-repeat;
      background-size: 100% 100%;
    }
    .user-name {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 17px;
      .name {
        //height: 23px;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        line-height: 23px;
      }
      .role {
        //height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
      }
    }
  }
}
</style>
