<template>
  <div class="main-views">
    <el-container style="height:100%;">
      <el-aside
      :class="!modelView ? 'borderRight' : ''">
        <WebSidebar
          @treeSwitch="treeSwitch"
          @warehouseSwitch="warehouseSwitch"
          @viewpointSwitch="viewpointSwitch"
          @WebMarkSwitch="WebMarkSwitch"
          @basicInfoSwitch="basicInfoSwitch"
          @modelManageSwitch="modelManageSwitch"
        ></WebSidebar>
      </el-aside>
      <el-container>
        <el-main>
          <div class="main_trees" id="mainTrees">
            <modelView v-if="modelView"></modelView>
            <tree v-if="tree" @treeSwitch="treeSwitch"></tree>
            <warehouse v-if="warehouse" @warehouseSwitch="warehouseSwitch"></warehouse>
            <viewpoint v-if="viewpoint" @viewpointSwitch="viewpointSwitch"></viewpoint>
            <web-mark v-if="WebMark" @WebMarkSwitch="WebMarkSwitch"></web-mark>
            <basicInfo v-if="basicInfo" @basicInfoSwitch="basicInfoSwitch"></basicInfo>
            <modelManage v-model="modelManage" @modelManageSwitch="modelManageSwitch"></modelManage>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import modelView from '@/components/modelView/index.vue';
import WebSidebar from '@/components/WebSidebar/index.vue';
import tree from '@/components/tree/index.vue';
import WebMark from '@/components/WebMark/index.vue';
import viewpoint from '@/components/viewpoint/index.vue';
import warehouse from '@/components/warehouse/index.vue';
import basicInfo from '@/components/basicInfo/index.vue';
import modelManage from '@/components/modelManage/index.vue';
export default {
  components: {
    modelView,
    WebSidebar,
    warehouse,
    tree,
    WebMark,
    viewpoint,
    basicInfo,
    modelManage
  },
  data() {
    return {
      pro: false,
      modelView: false,
      tree: false,
      WebMark: false,
      warehouse: false,
      viewpoint: false,
      basicInfo: false,
      modelManage: false
    };
  },
  computed: {
  },
  watch: {
  },
  created: function() {
    // 浏览器除去左侧菜单栏后的宽高
    const modelInfo = {};
    modelInfo.newW = Number(document.documentElement.clientWidth - 62);
    modelInfo.newH = Number(document.documentElement.clientHeight);
    this.$store.commit('SET_MODELVIEW_X', modelInfo.newW);
    this.$store.commit('SET_MODELVIEW_Y', modelInfo.newH);
    this.pro = window.location.search.indexOf('from=mbp') !== -1;
  },
  beforeMount: function() { },
  mounted: function() {
    sessionStorage.removeItem('isAdd');
    sessionStorage.removeItem('proType');
    sessionStorage.removeItem('proList');
    sessionStorage.removeItem('fromId');
    sessionStorage.removeItem('list');
    const plmUserInfo = this.$cookies.get('userInfo');
    const username = this.$cookies.get('project') ? this.$cookies.get('project').userName : '';
    const userid = this.$cookies.get('project') ? this.$cookies.get('project').userId : '';
    const projectId = this.$cookies.get('project') ? this.$cookies.get('project').projectId : '';
    const projectNo = this.$cookies.get('project') ? this.$cookies.get('project').projectCode : '';
    const id = this.$cookies.get('project') ? this.$cookies.get('project').id : '';
    console.log('==========userInfo', projectId);
    if (plmUserInfo) {
      sessionStorage.setItem('id', id);
      sessionStorage.setItem('userInfo', plmUserInfo);
      sessionStorage.setItem('username', username);
      sessionStorage.setItem('userid', userid);
      sessionStorage.setItem('projectId', projectId);
      sessionStorage.setItem('projectNo', projectNo);
      sessionStorage.setItem('tree-cur-modelId', '');
      sessionStorage.setItem('viewpoint-snapshot', '');
      sessionStorage.setItem('tree-modelId', '');
      sessionStorage.setItem('treeCheckedArr', '');
      sessionStorage.setItem('tree-viewId', '');
      this.$store.commit('SET_MODEL_ID', '');
      this.$store.commit('SET_VIEWPOINT_CONTENT', '');
      this.$store.commit('SET_VIEW_ID', '');
      const projectTitle = this.$cookies.get('project') ? this.$cookies.get('project').projectName : '浏览器';
      window.document.title = `BIM | ${projectTitle}`;
    }
    const token = this.$store.state.login.token ? this.$store.state.login.token : '';
    console.log('===========new token', token);
    if (!token || this.pro) {
      const proToken = this.pro ? {id: 'vbim.mbp'} : {};
      this.$axios('/auth/getToken', proToken, 'POST')
        .then((res) => {
          if (res && res.data && res.data.value.tokenValue) {
            this.$store.commit('SET_USER_INFO', res.data.value.tokenValue);
          } else {
            this.$store.commit('SET_USER_INFO', '');
          }
          console.log('==getToken=res', res);
        });
    }
    if (projectNo) {
      this.$axios('/modelView/queryViewByProject', {projectNo: projectNo}, 'POST')
        .then((res) => {
          if (res && res.data && res.data.value) {
            this.modelView = true;
          } else {
            window.onresize = function() {
              const modelInfo = {};
              modelInfo.newW = Number(document.documentElement.clientWidth - 62);
              modelInfo.newH = Number(document.documentElement.clientHeight);
              console.log('=============test', modelInfo);
              this.$store.commit('SET_MODELVIEW_X', modelInfo.newW);
              this.$store.commit('SET_MODELVIEW_Y', modelInfo.newH);
              // this.resizeWindow();
            };
            this.modelView = false;
            this.$message({
              message: ' 此项目没有模型, 请添加模型，开始你的项目',
              type: 'warning'
            });
          }
          console.log('==getToken=res', res);
        });
    }
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  methods: {
    resizeWindow() {
      try {
        const modelInfo = {};
        modelInfo.newW = Number(document.documentElement.clientWidth - 62);
        modelInfo.newH = Number(document.documentElement.clientHeight);
      } catch (e) {
        console.log(e);
      }
    },
    treeSwitch(val) {
      this.tree = val;
    },
    warehouseSwitch(val) {
      this.warehouse = val;
    },
    WebMarkSwitch(val) {
      this.WebMark = val;
    },
    viewpointSwitch(val) {
      this.viewpoint = val;
    },
    basicInfoSwitch(val) {
      this.basicInfo = val;
    },
    modelManageSwitch(val) {
      this.modelManage = val;
    }
  },
  directives: {}
};
</script>
