<template>
  <div class="home">
    <el-container class="obpm-container">
      <el-header class="p-0 ">
        <div name="header" id="header" class="obpm-header">
          <div class="table_noborder obpm-topbar d-flex">
            <div class="obpm-topbar-title pl-4">应用开发后台</div>
            <!-- <div class="admin-bg01"></div>
            <div class="admin-bg02"></div>
            <div class="admin-bg03"></div>
            <div class="admin-bg04"></div> -->
            <div class="obpm-topbar-info pr-4">
              <router-link
                class="obpm-topbar-homepage pr-2"
                :title="$t('home.home')"
                tabindex
                to="/home/softwarelist"
                >{{$t('home.home')}}</router-link
              >
              <a
                class="obpm-topbar-logout pr-2 obpm-topbar-help"
                :title="$t('home.logout')"
                @click="loginout"
                >{{$t('home.logout')}}</a
              >
              <a
                class="obpm-topbar-help"
                id="helpLink"
                tabindex
                :title="$t('home.help')"
                @click="openRightHelpFrame"
                >{{$t('home.help')}}</a
              >
            </div>
          </div>
          <el-drawer
            :with-header="false"
            :visible.sync="drawer"
            :before-close="handleClose"
            class="helpHelperPop"
            ref="drawer"
            size="200px"
          >
            <div class="height100">
              <iframe
                src="./assisHelpHtml/relatedTopics.html"
                frameborder="0"
                class="height100"
                style="width: 100%;"
                ref="helpNestedFrame"
                id="helpNestedFrame"
              ></iframe>
            </div>
          </el-drawer>
        </div>
      </el-header>
      <div class="obpm-header-nav">
        <div class="obpm-user float-left pl-4">
          <img class="user-logo" src="../assets/images/avatar_default.png" />
          <div class="d-inline-block pl-2 user-name">
            {{$t('home.hello')}}，{{ userName }}<a class="pl-1" @click="editLink">[{{$t('home.edit')}}]</a>
          </div>
        </div>
        <div class="d-inline-block obpm-home-breadcrumb ml-3">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/softwarelist' }" class="pointer breadMap"
              >{{$t('home.software_list')}}</el-breadcrumb-item
            >
            <el-breadcrumb-item v-if="breadcrumb != ''"  class="pointer" :to="{ path: `/home/softwaresdetails/baseicinfor`, query:{ edit: true} }">{{
              breadcrumb
            }}</el-breadcrumb-item>
             <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="obpm-syatem float-right pr-4">
          <a class="debug-system pr-2" :href="debugUrl" target="_blank"
            ><i class="el-icon-warning-outline mr-1"></i>{{$t('home.debugger')}}</a
          >
          <a class="system-message" @click="$router.push('/home/systemInfo')"
            ><i class="el-icon-setting mr-1"></i>{{$t('home.systemInfo')}}</a
          >
        </div>
      </div>
      <el-main class="obpm-content pb-0">
        <router-view
          class="height100"
          :user="user"
          @editSuperuser="editSuperuser"
          @toLink="toLink"
          @breadcrumbName="breadcrumbName"
          @createSoftware="createSoftware"
          @clearBreadcrumb="clearBreadcrumb"
        ></router-view>
      </el-main>
      <div class="obpm-aside" @click="openRightHelpFrame">
        <span class="arrow" :title="$t('home.help')"></span>
        <span class="arrow" :title="$t('home.help')"></span>
        <span class="arrow" title="更多"
          ><i class="el-icon-arrow-left"></i
        ></span>
      </div>
    </el-container>
  </div>
</template>

<script>
import {
  getSuperuser,
  logOut,
  getDebugurl,
  getDebugurlByWar
} from "@/service/CommonApi.js";
import { setCookie, getCookie } from '../utils/utils';
import {delMsg} from '@/utils/elementui'
export default {
  name: "home",

  data() {
    return {
      drawer: false,
      user: {},
      userName: "",
      breadcrumb: "",
      debugUrl: "" //调试链接
    };
  },
  created() {
    this.getDebugUrl();
  },
  mounted() {
    window["closeRightHelpPage"] = () => {
      this.drawer = false;
    };

    this.$store.dispatch("rightHelpPageParams", {
      title: this.$t('home.soft_info'),
      url: "application/application_info_help.html"
    });
    this.getSuperuser();
  },
  methods: {
    toHomePage(){
      alert()
    },
    //获取调试链接
    async getDebugUrl() {
        this.debugUrl = "../../static/macro/debug.html";
    },
    /**
     * **获取特权用户信息**
     */
    getSuperuser() {
      getSuperuser({
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.user = response.data.data;
            this.userName = response.data.data.name;
          }
        }
      });
    },

    /**
     * 修改特权用户信息
     */
    editSuperuser(data) {
      let user = {
        ...this.user,
        id: data.id,
        loginno: data.loginno,
        loginpwd: data.loginpwd,
        name: data.name,
        email: data.email
      };
      this.user = user;
    },

    /**
     * 显示帮助
     */
    openRightHelpFrame() {
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.helpNestedFrame.onload = () => {
          // 第一次加载设置title
          this.$refs.helpNestedFrame.contentWindow.document.title =
            this.$store.state.rightHelpPageParams.title +
            "&" +
            this.$store.state.rightHelpPageParams.url;
          // 将方法保存到vuex中另外调用
          this.$store.dispatch(
            "loadRightHelpFrame",
            this.$refs.helpNestedFrame
          );
        };
      });
      // 除第一次加载外设置title
      if (this.$refs.helpNestedFrame) {
        // 需要判断点击的是表单控件还是页面
        if (window.top.rightHelpFrameObj) {
          this.$refs.helpNestedFrame.contentWindow.document.title =
            this.$store.state.rightHelpPageParams.title +
            "&" +
            this.$store.state.rightHelpPageParams.url;
        } else {
          this.$refs.helpNestedFrame.contentWindow.document.title =
            this.$store.state.rightHelpPageParams.title +
            "&" +
            this.$store.state.rightHelpPageParams.url;
        }
      }
    },

    /**
     * 关闭帮助
     */
    handleClose(done) {
      done();
    },

    /**
     * 注销登录
     */
    async loginout() {
      try{
        await delMsg(this.$t('msg.logout'), this.$t('msg.tip'))
        const response = await logOut()
        if (response.data.errcode == 0) {
          this.$router.replace("/login");
          this.$message.success(this.$t('msg.logOut_ss'));
          // 发送请求重置数据
          this.$store.dispatch("resetUserInfo");
          // 重新设置为中文
          setCookie('designerLanguage', 'zh', 1)
          this.$i18n.locale = getCookie('designerLanguage')
        }
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 跳转到特权用户信息
     */
    editLink() {
      this.$router.push({ path: "/home/userinfo" });
    },

    toLink(item) {
      this.breadcrumb = item.name;
      let params = {
        appId: item.id,
        appName: item.name,
        type: item.type,
      };
      sessionStorage.setItem("appId", item.id);
      sessionStorage.setItem("appName", item.name);
      this.$store.dispatch("landingUser", { params });
      this.$router.push({
        path: "/home/softwaresdetails",
        query: { appId: item.id, appName: item.name, }
      });
    },

    /**
     * 跳转到软件列表
     */

    /**
     * 新建软件
     */
    createSoftware(id) {
      this.$router.push({
        path: "/home/baseicinformation",
        query: {params:JSON.stringify({ type: id, edit: false })}
      });
    },

    /**
     * 清空面包屑
     */
    clearBreadcrumb() {
      this.breadcrumb = "";
    },

    /**
     * 获取软件名称
     */
    breadcrumbName(val) {
      this.breadcrumb = val;
    }
  },
  watch: {
    "$store.state.rightHelpFrame"() {
      // 将加载出来的iframe传给嵌套页面
      window.top.rightHelpFrame = this.$store.state.rightHelpFrame;
      // 嵌套页面中存储的iframe
      if (window.top.rightHelpFrameObj) {
        this.$refs.helpNestedFrame.contentWindow.document.title =
          window.top.rightHelpFrameObj.title +
          "&" +
          window.top.rightHelpFrameObj.url;
        this.$store.dispatch("rightHelpPageParams", {
          title: window.top.rightHelpFrameObj.title,
          url: window.top.rightHelpFrameObj.url
        });
      }
      this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(
        this.$store.state.rightHelpPageParams.title,
        this.$store.state.rightHelpPageParams.url
      );
    }
  }
};
</script>
<style lang="scss"></style>
