<template>
  <el-header class="app-top">
    <div class="logo">
      <img v-if="logo" :src="logo"/>
      <h1 v-else>{{ title }}</h1>
    </div>
    <div style="float:right;">
      <el-select v-if="allowI10n && changeLangVisible" v-model="lang" placeholder="请选择" @change="changeLang" style="width:100px;"
                 class="select-lang">
        <el-option v-for="item in langs" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-dropdown trigger="click" size="small" placement="bottom">
                <span class="el-dropdown-link userinfo-inner">
                    <el-button type="text" icon="el-icon-fa-user">{{ $store.state.base.sysUser.userName }}</el-button>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="!isSso" @click.native="$store.state.base.loginChangePwd=true">修改密码</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button class='margin-right-4 margin-left-2' type="text"
                 :icon="fullScreenModel?'alibaba al-iconzuixiaohua':'alibaba al-zuidahua1'"
                 :title="fullScreenModel?'退出全屏模式':'进入全屏模式'"
                 @click="cfullScreenModel"/>
    </div>

    <!-- 项目自定义header组件 -->
    <component :is="embedHeader"/>

  </el-header>
</template>

<script>
  import Vue from "vue";
  import moment from "moment";
  import config from "@/config";
  import Locales from "@/locale/locale";
  import AcesAPI from "@/api/base/sysm/AcesAPI";

  export default {
    components: {},
    data() {
      return {
        changeLangVisible: config.changeLangVisible,
        lang: window.localStorage.getItem("lang") || config.lang,
        fullScreenModel: false,
        openCompanyInfo: false,
        allowI10n: config.allowI10n,
        title: config.title,
        logo: config.logo,
        isSso: config.isSso,
        embedHeader: config.embedHeader
      };
    },
    computed: {
      langs() {
        return Object.keys(Locales).map((localeName, locale) => {
          return {label: Locales[localeName]["title"], value: localeName};
        });
      }
    },
    mounted() {
      //监听是否全屏来同步更改头部图标
      this.syncWindowFull();
    },
    methods: {
      changeLang(lang) {
        window.localStorage.setItem("lang", lang);
        Vue.config.lang = lang;
        moment.locale(lang);
      },
      async logout() {
        await this.$confirm("确认退出吗?", "提示", {type: "warning"});
        let resp = await AcesAPI.logout();
        if (resp.redirect || config.logoutUrl) {
          window.location = resp.redirect || config.logoutUrl;
        } else window.location.reload();
      },
      //全屏模式控制
      cfullScreenModel() {
        if (this.fullScreenModel) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            //FireFox
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            //Chrome等
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            //IE11
            document.msExitFullscreen();
          }
        } else {
          let docElm = document.documentElement;
          //W3C
          if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
          } else if (docElm.mozRequestFullScreen) {
            //FireFox
            docElm.mozRequestFullScreen();
          } else if (docElm.webkitRequestFullScreen) {
            //Chrome等
            docElm.webkitRequestFullScreen();
          } else if (docElm.msRequestFullscreen) {
            //IE11
            docElm.msRequestFullscreen();
          }
        }
        this.fullScreenModel = !this.fullScreenModel;
      },
      //监听是否全屏来同步更改头部图标
      syncWindowFull() {
        document.addEventListener("fullscreenchange", () => {
          this.fullScreenModel = !!(
            document.fullscreenEnabled ||
            window.fullScreen ||
            document.webkitIsFullScreen ||
            document.msFullscreenEnabled
          );
        });

        document.addEventListener("webkitfullscreenchange", () => {
          this.fullScreenModel = !!(
            document.fullscreenEnabled ||
            window.fullScreen ||
            document.webkitIsFullScreen ||
            document.msFullscreenEnabled
          );
        });

        document.addEventListener("mozfullscreenchange", () => {
          this.fullScreenModel = !!(
            document.fullscreenEnabled ||
            window.fullScreen ||
            document.webkitIsFullScreen ||
            document.msFullscreenEnabled
          );
        });

        document.addEventListener("MSFullscreenChange", () => {
          this.fullScreenModel = !!(
            document.fullscreenEnabled ||
            window.fullScreen ||
            document.webkitIsFullScreen ||
            document.msFullscreenEnabled
          );
        });
      }
    }
  };
</script>
