<template>
  <div class="f-s-c navbar-box" :style="`width:calc(100vw - ${sidebar ? '248px' : '72px'})`">
    <div class="f-c">
      <slot name="tabsMenu-l" />
      <div class="level-bar-toggle-button mr20" @click="toggleChange">
        <i :class="sidebar ? 'el-icon-s-fold' : 'el-icon-s-unfold'" />
      </div>
      <slot name="tabsMenu-c" />
      <el-breadcrumb separator="/" v-if="isShowBreadcrumb">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="item in breadCrumbArr" :key="item.id">
            {{ item[$i18n.locale] }}
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
      <slot name="tabsMenu-r" />
    </div>
    <div class="f-c">
      <slot></slot>
      <slot name="message-l"></slot>
      <ftl-message v-bind="$attrs"></ftl-message>
      <slot name="message-r"></slot>
      <i class="el-icon-full-screen cp fs20 mr15" @click="toScreenfull" v-if="isShowScreenfull"></i>
      <slot name="right-l"></slot>
      <el-dropdown class="international cp mt5" @command="handleSetLanguage" size="mini">
        <span>
          <img :src="showLocales[language].icon" alt="" style="width: 25px" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(lang, index) in showLocales"
            :command="lang.code"
            :key="index"
            :disabled="language === lang.code"
          >
            <img :src="lang.icon" alt="" class="mr5" style="width: 25px; vertical-align: middle" />
            {{ lang.desc }} - {{ lang.tip }}
            <i class="el-icon-check" v-if="language === lang.code"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <slot name="right-c"></slot>
      <el-popover placement="bottom" trigger="click">
        <slot name="userMenu"></slot>
        <div class="cp mb5" @click="changePassword" v-if="needChangePassword">
          <i class="el-icon-unlock" style="width: 25px"></i>
          {{ $t("ftlOne.changePassword") }}
        </div>
        <div class="cp" @click="logout">
          <i class="el-icon-upload2" style="width: 25px"></i>
          {{ $t("ftlOne.exit") }}
        </div>
        <div slot="reference" class="ml10 cp">
          {{ username }}
          <i class="el-icon-arrow-down"></i>
        </div>
      </el-popover>
      <slot name="right-r"></slot>
    </div>
    <ftl-password-dialog ref="ftlPasswordDialog" v-bind="$attrs" />
  </div>
</template>
<script>
import China from "../../../assets/img/China.png";
import Spanish from "../../../assets/img/Spanish.png";
import America from "../../../assets/img/America.png";
import French from "../../../assets/img/French.png";
import Original from "../../../assets/img/Original.png";
import FtlMessage from "../../FtlMessage";
import FtlPasswordDialog from "../../FtlPasswordDialog/src/index.vue";
import screenfull from "screenfull";
import { mapState, mapActions } from "vuex";
export default {
  name: "FtlNavbar",
  components: { FtlPasswordDialog,FtlMessage },
  props: {
    sidebar: {
      type: Boolean,
      default: true,
    },
    isShowBreadcrumb: {
      type: Boolean,
      default: true,
    },
    isShowScreenfull: {
      type: Boolean,
      default: true,
    },
    needChangePassword: {
      type: Boolean,
      default: true,
    },
    langCodeList: {
      type: Array,
      default: () => ["en", "cn", "fr", "es", "or"],
    },
  },
  data() {
    return {
      locales: {
        en: {
          code: "en",
          desc: "English",
          tip: "English",
          icon: America,
        },
        cn: {
          code: "cn",
          desc: "中文",
          tip: "Chinese",
          icon: China,
        },
        fr: {
          code: "fr",
          desc: "Français",
          tip: "French",
          icon: French,
        },
        es: {
          code: "es",
          desc: "Español",
          tip: "Spanish",
          icon: Spanish,
        },
        or: {
          code: "or",
          desc: "Original",
          tip: "Original",
          icon: Original,
        },
      },
      breadCrumbArr: [],
    };
  },
  watch: {
    // 监视路由的变化，匹配对应的面包屑名称展示
    "$route.name": {
      handler(newVal) {
        this.breadCrumbArr = [];
        newVal && this.setBreadName(newVal);
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      username: (state) => state.auth.username,
      resources: (state) => state.auth.resources,
      language: (state) => state.lang.language,
    }),
    showLocales() {
      const localesObj = {};
      for (const key in this.locales) {
        if (Object.hasOwnProperty.call(this.locales, key)) {
          if (this.langCodeList.includes(key)) {
            localesObj[key] = this.locales[key];
          }
        }
      }
      return localesObj;
    },
  },
  methods: {
    ...mapActions("lang", ["setLanguage"]),
    ...mapActions("app", ["setLocalLang"]),
    toggleChange() {
      this.$emit("update:sidebar", !this.sidebar);
      this.$bus && this.$bus.$emit("toggleChange");
    },
    toScreenfull() {
      if (!screenfull.isEnabled) {
        return this.$message.warning("you browser can not work");
      }
      screenfull.toggle();
    },
    handleSetLanguage(lang) {
      this.setLanguage(lang);
      this.setLocalLang(lang);
      this.$i18n.locale = lang;
      this.$bus && this.$bus.$emit("languageChange");
    },
    // 设置面包屑
    setBreadName(currentRouteName) {
      const element = this.resources.find((item) => item.name === currentRouteName);
      if (element) {
        this.breadCrumbArr.unshift(element);
        this.getMenuById(element);
      }
    },
    // 匹配路由，根据parentId去匹配id获得父级路由
    getMenuById(result) {
      if (result && result.parentId) {
        const element = this.resources.find((item) => item.id === result.parentId);
        if (element) {
          this.breadCrumbArr.unshift(element);
          this.getMenuById(element);
        }
      }
    },
    logout() {
      this.$store.dispatch("auth/logout");
      this.$emit("logout");
    },
    changePassword() {
      this.$refs.ftlPasswordDialog.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.navbar-box {
  height: 56px;
  padding: 10px 20px;
  border-bottom: 1px solid #e6e6e6;
  backdrop-filter: saturate(50%) blur(8px);
  position: fixed;
  z-index: 100;
  transition: none;
}
</style>
