<template>
  <div class="browserTip" v-if="visible">
    <i class="el-icon-warning-outline"></i>
    <span v-html="tip"></span>
  </div>
</template>
<script>
import { getExploreRecommentInfo } from "@/api/dictionary";
export default {
  name: "browserTip",
  data() {
    return {
      form: {},
      tip: this.$t("browser:tip:changeBorwser"),
      visible: false,
    };
  },
  methods: {
    async getInfo() {
      try {
        let res = await getExploreRecommentInfo();
        if (res.IsSuccess) {
          return res.Result;
        }
        return false;
      } catch (err) {
        console.log(err);
        return false;
      }
    },
    async open() {
      try {
        let browserType = this.getExplore();
        let type = browserType.split(": ")[0];
        let No = browserType.split(": ")[1].split(".")[0];
        console.log(type, No);
        if (type !== "Chrome" && type !== "Edge") {
          this.tip = this.$t("browser:tip:changeBorwser");
          return (this.visible = true);
        }
        let res = await this.getInfo();
        if (!res) return this.$t("dictionary:browser:tip:getError");
        let currentType = res.filter(
          (item) => item.ExploreType.toLowerCase() === type.toLowerCase()
        )[0];
        if (No < currentType.Version) {
          this.tip = `<span>${this.$t("browser:tip:borwserversionLow")}</span>`;
          res.forEach((item, index) => {
            this.tip += `<a href="${item.DownloadUrl}" target="_blank" style="color:#428bca">${item.Title}</a>`;
            if (index < res.length - 1) {
              this.tip += "、";
            }
          });
          return (this.visible = true);
        }
      } catch (err) {
        console.log(err);
      }
    },
    getExplore() {
      var Sys = {};
      var ua = navigator.userAgent.toLowerCase();
      var s;
      (s = ua.match(/rv:([\d.]+)\) like gecko/))
        ? (Sys.ie = s[1])
        : (s = ua.match(/msie ([\d\.]+)/))
        ? (Sys.ie = s[1])
        : (s = ua.match(/edg\/([\d\.]+)/) || ua.match(/edge\/([\d\.]+)/))
        ? (Sys.edge = s[1])
        : (s = ua.match(/firefox\/([\d\.]+)/))
        ? (Sys.firefox = s[1])
        : (s = ua.match(/(?:opera|opr).([\d\.]+)/))
        ? (Sys.opera = s[1])
        : (s = ua.match(/chrome\/([\d\.]+)/))
        ? (Sys.chrome = s[1])
        : (s = ua.match(/version\/([\d\.]+).*safari/))
        ? (Sys.safari = s[1])
        : 0;
      // 根据关系进行判断
      if (Sys.ie) return "IE: " + Sys.ie;
      if (Sys.edge) return "Edge: " + Sys.edge;
      if (Sys.firefox) return "Firefox: " + Sys.firefox;
      if (Sys.chrome) return "Chrome: " + Sys.chrome;
      if (Sys.opera) return "Opera: " + Sys.opera;
      if (Sys.safari) return "Safari: " + Sys.safari;
      return "Unkonwn";
    },
  },
};
</script>
<style lang="scss" scoped>
.browserTip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(250, 205, 145, 0.129411764705882);
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #555;
  i {
    color: red;
    font-size: 24px;
    margin-right: 10px;
  }
}
</style>