<template>
  <div
    style="display: flex; justify-content: space-between; align-items: flex-end"
  >
    <div style="display: flex; align-items: flex-end">
      <img
        src="@/assets/navbar/index.png"
        alt
        style="width: 26px; height: 26px; margin-top: 12px"
      />
      <el-breadcrumb class="app-breadcrumb" separator=">">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item
            v-for="(item, index) in levelList"
            :key="item.path"
          >
            <span
              v-if="
                item.redirect === 'noRedirect' || index == levelList.length - 1
              "
              class="no-redirect"
              >{{ generateTitle(item.meta.title) }}</span
            >
            <a v-else @click.prevent="handleLink(item)">{{
              generateTitle(item.meta.title)
            }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div>
      <el-select
        v-model="language"
        size="mini"
        placeholder=""
        class="lang"
        @change="handleSetLanguage"
      >
        <div slot="prefix" style="padding: 4px">
          <img src="@/assets/lang.png" style="width: 20px; height: 20px" />
        </div>
        <el-option
          v-for="item in locale"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import { generateTitle } from "@/utils/i18n";
import pathToRegexp from "path-to-regexp";
import { locale } from "@/api/country";
import { langData } from "@/data/lang";

export default {
  data() {
    return {
      levelList: null,
      locale: [],
      apiLang: "",
      langData: langData,
    };
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language;
      },
      set(val) {
        this.handleSetLanguage(val);
      },
    },
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith("/redirect/")) {
        return;
      }
      this.getBreadcrumb();
    },
    language() {
      this.getCode = this.$t("login.getCode");
      this.apiLang = this.langData[this.language];
    },
  },
  created() {
    this.apiLang = this.langData[this.language];
    this.getBreadcrumb();
    locale().then((r) => {
      this.locale = r.data;
    });
  },
  methods: {
    generateTitle,
    handleSetLanguage(lang) {
      this.$i18n.locale = lang;
      this.$store.dispatch("app/setLanguage", lang);
    },
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      const first = matched[0];

      if (!this.isDashboard(first)) {
        matched = [{ path: "/dashboard", meta: { title: "dashboard" } }].concat(
          matched
        );
      }

      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
      console.log("9999", this.levelList);
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return (
        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
      );
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    handleLink(item) {
      const { redirect, path } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      if (item.meta.title == "dashboard" && process.env.VUE_APP_HOME_API) {
        window.open(process.env.VUE_APP_HOME_API);
      } else {
        this.$router.push(this.pathCompile(path));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.lang {
  width: 150px;
  ::v-deep .el-input__inner {
    border-radius: 34px;
  }
}
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 21px;
  margin-left: 2px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
