<template>
  <div id="app" :class="[isRed?'red-theme':'',typeSystem==1?'appBoxActive':'']">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
    <chosen-open-mode v-if="haveOpenMode&&typeSystem==0" :settingSys="settingSys"></chosen-open-mode>
    <!--  -->
    <div class="showMyCareer" v-if="showCareer">
      <mycareer :show-close="true" :uid="careerId" @close="closeCareer"></mycareer>
    </div>
  </div>
</template>


<script>
  var sUserAgent = navigator.userAgent;
  if (
    sUserAgent.indexOf("Android") > -1 ||
    sUserAgent.indexOf("iPhone") > -1 ||
    sUserAgent.indexOf("iPad") > -1 ||
    sUserAgent.indexOf("iPod") > -1 ||
    sUserAgent.indexOf("Symbian") > -1
  ) {
    // document.body.style.minWidth = '100%'
    // document.body.style.maxWidth = '100%'
    // document.body.style.overflow = 'hidden'
    // document.html.style.minWidth = '100%'
  } else {
    document.body.style.minWidth = "1366px";
    // document.html.style.minWidth = '1366px'
  }
  import chosenOpenMode from "./components/commonPage/chosenOpenMode";
  import mycareer from "./components/champion/mycareer";
  import {
    clearInterval
  } from "timers";
  export default {
    name: "App",
    components: {
      chosenOpenMode,
      mycareer
    },
    watch: {
      'window.location.ancestorOrigins': {
        handler(newValue) {
          if(window.location.ancestorOrigins.length==0) localStorage.setItem('typeSystem', 0)
          else localStorage.setItem('typeSystem', 1)
        },
        deep: true,
        immediate: true
      },
    },
    created() {
      //注册禁止后退，并且不做卸载
      // history.go(-1)
      // history.forward(-1)
      if (localStorage.openMode && localStorage.openMode == 1) {
        try {
          history.pushState(null, null, document.URL);
          window.addEventListener("popstate", function () {
            history.pushState(null, null, document.URL);
          });
        } catch (err) {}
      }
    },
    data() {
      return {
        images: [],
        imageOptions: {
          navbar: false,
          title: false
        },
        dataShow: false,
        haveOpenMode: false,
        settingSys: false,
        timer: null,
        useTime: 0,
        showCareer: false,
        careerId: 0,
        isRed: false,
        typeSystem: 0,
      };
    },
    methods: {
      inited(viewer) {
        this.$viewer = viewer;
      },
      closeCareer() {
        this.showCareer = false;
      },
      show(data) {
        this.$set(this.images, data);
        this.$viewer.show();
      },
      listeneruser() {
        let that = this;
        window.onblur = function () {
          that.plaus();
          if (that.useTime) {
            var cObj = that.getLocalStorage();
            let params = {
              CreateBy: 0,
              UsedTime: that.useTime
            };
            if (cObj && cObj.EmployeeId) {
              params.CreateBy = cObj.EmployeeId;
            }
            if (params.CreateBy && params.CreateBy > 0) {
              // that.apipost("user_set_user_usederplog", params, r => {
              //   if (r.data.resultCode == 1) {
              //     that.UsedTime = 0;
              //   }
              // });
            }
          }
        };
        window.onfocus = function () {
          that.timekeeper();
        };
      },
      timekeeper() {
        if (!this.timer) {
          this.timer = window.setInterval(() => {
            this.useTime += 0.1;
          }, 1000 * 6);
        }
      },
      plaus() {
        if (this.timer) {
          window.clearInterval(this.timer);
          this.timer = null;
        }
      }
    },
    mounted() {
      if(localStorage.typeSystem&&localStorage.typeSystem==1) {
        this.typeSystem = localStorage.typeSystem
        let href = this.domainManager().CarUrl
        if(this.getLocalStorage() == null){
          window.parent.postMessage({
          event_id: 'out',
          data: {
            loginState: '退出登录',
          }}, `${href}`)
        }
        // 通知车行已进入erp
        window.parent.postMessage({
        event_id: 'app',
        data: {}}, `${href}`)
      }

      if (
        !this.getLocalStorage() &&
        document.URL.indexOf("SupplierLogin") == -1 &&
        document.URL.indexOf("clientConfirm") == -1 &&
        document.URL.indexOf("clientProtocol") == -1 &&
        document.URL.indexOf("clientDisclaimerProtocol") == -1 &&
        document.URL.indexOf("TravelContractConfirm") == -1 &&
        document.URL.indexOf("ViittoContractConfirm") == -1
      ) {
        this.$router.push({
          path: "/login"
        });
      } else {
        if (
          document.URL.indexOf("clientConfirm") != -1 ||
          document.URL.indexOf("clientProtocol") != -1 ||
          document.URL.indexOf("clientDisclaimerProtocol") != -1 ||
          document.URL.indexOf("TravelContractConfirm") != -1 ||
          document.URL.indexOf("ViittoContractConfirm") != -1
        ) {
          // 车系统改变 单页面方式
          if(this.typeSystem==1) {
            localStorage.openMode = 1
            window.location.reload()
          }else localStorage.openMode = 0;
        } else {}
        this.timekeeper();
        this.listeneruser();
      }

      this.haveOpenMode = !localStorage.openMode;
      this.MsgBus.$on("imgpreviewoverflow", content => {
        this.show(content);
      });
      this.MsgBus.$on("imgpreviewshow", content => {
        this.$viewer.show();
      });
      this.MsgBus.$on("imgpreviewshowindex", content => {
        this.$viewer.view(this.images.indexOf(content));
        this.$viewer.show();
      });
      this.MsgBus.$on("settingOpen", content => {
        this.haveOpenMode = true;
        this.settingSys = true;
      });
      this.MsgBus.$on("settingClose", content => {
        this.haveOpenMode = false;
        this.settingSys = false;
      });
      this.MsgBus.$on("imgprevpush", content => {
        let isExsit = false;
        this.images.forEach(x => {
          if (x == content) isExsit = true;
        });
        if (!isExsit) this.images.push(content);
      });
      this.MsgBus.$on("imgprevclear", content => {
        this.images = [];
      });
      this.MsgBus.$on("showCareer", empId => {
        this.careerId = empId;
        this.showCareer = true;
      });
      this.MsgBus.$on("hideCareer", content => {
        this.careerId = 0;
        this.showCareer = false;
      });
      this.MsgBus.$on("changeTheme", t => {
        this.isRed = t == 1;
      });
    }
  };

</script>
<style>
  /* viitto */
  @import "//at.alicdn.com/t/c/font_635492_z2m4iopdl1a.css";
  @import "./assets/css/Semibold.css";
  @import "./assets/css/global/config.css";
  /* @import "./assets/css/fileIcon.css"; */

  /* html,body{height: 100%; min-width: 1366px; } */
  html,
  body {
    margin: 0;
    padding: 0;
    background: #f9f9f9 url(assets/img/img-bg.png) no-repeat bottom left/100% auto;
    height: 100%;
  }

  #app {
    height: 100%;
  }

  #app>div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .BMap_cpyCtrl {
    display: none;
  }

  .anchorBL {
    display: none;
  }

  .viewer {
    display: none !important;
  }

  .showMyCareer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    z-index: 999999999999999;
  }

  .red-theme {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
      Noto Color Emoji, MicrosoftJhengHeiBoldFix, "\5FAE\8EDF\6B63\9ED1\9AD4",
      Microsoft JhengHei;
  }

  .groupTourOrderByTuan_ico {
    margin: 0 10px 0 0;
  }

  .groupTourOrderByTuan_ico i {
    display: inline-block;
    margin: 0 2px 0 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    vertical-align: middle;
  }

  .groupTourOrderByTuan_ico>span {
    vertical-align: middle;
  }

  .groupTourOrder_count {
    margin: 0 0 20px 0;
    width: 100%;
    height: auto;
  }

  .groupTourOrder_count_col {
    height: 80px;
  }

  .groupTourOrder_count_item {
    font-weight: 400;
    padding: 10px;
    height: 100%;
    border: 1px solid #E6E6E6;
    background-color: #FFFFFF;
    color: #333333;
  }

  .groupTourOrder_count_item>div>i {
    font-size: 12px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>div>span:nth-child(2) {
    font-size: 14px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>div>span:nth-child(3) {
    font-weight: bold;
    font-size: 16px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>p {
    font-size: 12px;
    line-height: 18px;
  }

  .groupTourOrder_count_item>p>span {
    margin: 0 5px 0 0;
    white-space: nowrap;
  }

  .groupTourOrder_count_green {
    color: #1BC594;
  }

  .groupTourOrder_count_blue {
    color: #4D7AFD;
  }

  .groupTourOrder_count_yellow {
    color: #FF9C00;
  }

  .groupTourOrder_count_gray {
    color: #999999;
  }


  .cursor-p {
    cursor: pointer;
  }

  .cursor-p.active,
  .cursor-p:hover {
    color: #409EFF;
  }

  .float-l {
    float: left;
  }

  .width100-float-l {
    float: left;
  }

  .width100-float-l+.width100-float-l {
    margin-left: 10px;
  }

  .c059FF6 {
    color: #059ff6;
  }
  .c9e {
    color: #9e9e9e;
  }

  .groupTourOrder_tickets_red {
    color: #ff0000;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_blue {
    color: #0000ff;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_green {
    color: #008000;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_black {
    color: #000000;
    text-decoration: underline;
  }
  .red-theme.appBoxActive .temDivs,.red-theme.appBoxActive .frame-box{
    top: 0;
  }
  .red-theme.appBoxActive .query-box li:last-child{
    position: inherit;
  }
  .red-theme.appBoxActive ._nav{
    margin: 0;
  }
  .bold{
    font-weight: bold;
  }
  .colorRed{
    color: red;
  }

</style>