<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-model="$store.state.base.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-option>
      </el-select>
      <el-dropdown trigger="click" size="small">
        <span class="el-dropdown-link userinfo-inner">
          <el-button type="text" icon="el-icon-fa-user">{{$store.state.base.sysUser.userId}}</el-button>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @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"></el-button>
    </div>

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

  </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 {
      fullScreenModel: false,
      openCompanyInfo: false,

      title: config.title,
      logo: config.logo,
      embedHeader: config.embedHeader
    };
  },
  computed: {
    langs() {
      return Object.keys(Locales).map((localeName, locale) => {
        return { label: Locales[localeName]["title"], value: localeName };
      });
    }
  },
  watch: {
    "$store.state.base.lang"(lang) {
      Vue.config.lang = lang;
      moment.locale(lang);
    }
  },
  mounted() {
    let lang = window.localStorage.getItem("lang") || Vue.config.lang;
    this.$store.commit("base/updateState", { lang });
    //监听是否全屏来同步更改头部图标
    this.syncWindowFull();
  },
  methods: {
    openSettingView() {
      this.$store.dispatch("base/addTabPagesName", {
        name: "设置",
        path: "/usrm/setting"
      });
    },
    handleOpenTab(tabName, tabLabel, tabUrl) {
      this.$store.dispatch("base/openTab", { tabName, tabLabel, tabUrl });
    },
    changeLang(lang) {
      window.localStorage.setItem("lang", lang);
      this.$store.commit("base/updateState", { lang });
    },
    logout() {
      this.$confirm("确认退出吗?", "提示", { type: "warning" }).then(() => {
        AcesAPI.logout().then(() => {
          this.$router.push({
            path: "/login"
          });
        });
      });
    },
    //全屏模式控制
    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>