<template>
  <div id="app">
    <head-component
      class="headComponent"
      v-if="isShow"
      :nav="nav"
      @handleGoPage="handleGoPage"
    ></head-component>
    <router-view :homeData="homeData" :devData="devData" />
    <homeEditBtn-diolog
      ref="homeEditBtnDiolog"
      :btnTitle="nav.title"
      :btnSrc="nav.url"
      @handleSuccess="handleSuccess"
    ></homeEditBtn-diolog>
  </div>
</template>

<script>
import HeadComponent from "@/components/HeadComponent";
import HomeEditBtnDiolog from "@/views/HomeEditBtnDiolog";
import { getCorpById } from "@/api/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isShow: true,
      nav: {
        title: "标识解析",
        url: "",
      },
      homeData: null,
      devData: null,
    };
  },
  components: {
    HeadComponent,
    HomeEditBtnDiolog,
  },
  computed: {
    ...mapState(["editState"]),
  },
  created() {
    const href = location.href + "";
    const index = href.indexOf("id=");
    const index2 = href.indexOf("#");
    if (index == -1) {
      return this.$router.push({
        name: "404",
        params: {
          title: "地址错误！",
          content: "请输入正确的地址！",
        },
      });
    }
    const id = href.slice(index + 3, index2);
    this.getList(id);
  },
  mounted() {},
  methods: {
    async getList(id) {
      try {
        const { data, success } = await getCorpById(id);
        if (!success) {
          this.$message.error("获取页面数据失败,请刷新页面！");
          return this.$router.push({
            name: "404",
            params: {
              title: "获取页面数据失败！",
              content: "请返回首页重新加载！",
            },
          });
        }

        if (data.status == 0) {
          this.$message.warning("网站维护中！");
          return this.$router.push({
            name: "404",
            params: {
              title: "网站维护中！",
              content: "网站正在维护中，请稍后访问！",
            },
          });
        }
        const homeData = JSON.parse(data.corpHomepageJsonOnline);
        const devData = JSON.parse(data.corpDevJsonOnline);
        const headInfo = homeData.headInfo;
        if (homeData.nav) {
          this.nav = homeData.nav;
        } else {
          this.nav = {
            title: "标识解析",
            url: "",
          };
        }

        window.document.title = headInfo.title;
        const link = document.querySelector("link[rel*='icon']");
        link.href = headInfo.favicon;

        this.homeData = homeData;
        this.devData = devData;
      } catch (err) {
        console.dir(err);
        return this.$message.error("获取页面数据失败,请刷新页面！");
      }
    },
    handleGoPage() {
      if (!this.editState) {
        if (this.nav.url) {
          window.open(this.nav.url);
        }
      } else {
        this.$refs.homeEditBtnDiolog.dialogVisible = true;
      }
    },
    handleSuccess(data) {
      this.nav.title = data.title;
      this.nav.url = data.src;
    },
  },
  watch: {
    $route: {
      handler(newValue) {
        if (newValue.path == "/404") {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      },
      immediate: true,
    },
    title: {
      handler(newValue) {
        window.document.title = newValue;
      },
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-width: 1200px;
  max-width: 1920px;
  margin: 0 auto;

  .headComponent {
    z-index: 8889;
  }
}
</style>
