<template>
  <el-container class="framework-wrapper">
    <!-- 顶部导航 -->
    <el-header class="navbar"><Hd /></el-header>

    <el-container class="page">
      <!-- 侧边菜单栏 -->
      <el-aside class="sidebar" :style="{width: sideWidth}"><Side @collapseChange="collapseChange" /></el-aside>

      <!-- 内容区域 -->
      <el-main class="content" :style="{width: contentWidth}"><Content /></el-main>
    </el-container>

    <!--打印弹窗组件-->
    <Print ref="print"></Print>
    <Upload ref="upload"></Upload>
  </el-container>
</template>

<script>
import Vue from 'vue'
import Hd from './layouts/Hd'
import Side from './layouts/Side'
import Content from './layouts/Content'
// import Print from '../../components/Print'
import Print from 'apec-fe-print-component'
import Upload from 'apec-fe-up-load-component'
// import Upload from '../../components/up-load.umd.min.js'

export default {
  name: 'Framework',
  components: {
    Hd,
    Side,
    Content,
    Print,
    Upload,
  },
  created () {
    this.getUserInfo()
  },
  mounted () {
    // 注册全局打印方法引用
    Vue.prototype.$print = this.$refs.print.preview
    Vue.prototype.$upload = this.$refs.upload.getConfig // 上传
    Vue.prototype.$getLotAttrs = this.getLotAttrs // 获取批次属性
  },
  computed: {
    contentWidth () {
      return `calc(100% - ${this.sideWidth})`
    }
  },
  data () {
    return {
      sideWidth: '200px',
      userInfo: {}, // 用户数据
    }
  },
  methods: {
    // 加载按钮权限
    loadBtn () {
      const url = this.$API.loadBtn
      this.$https.get(url)
        .then(data => {
          this.$store.commit('framework/changeBtnPermission', data)
        })
    },
    // 获取用户信息
    getUserInfo () {
      const url = this.$API.getUserInfo
      this.$https.get(url)
        .then(data => {
          this.userInfo = data
          window.localStorage.setItem('userInfo', JSON.stringify(data))
          if (window.localStorage.getItem('userName') !== data.userNameCn) {
            window.localStorage.clear()
            window.sessionStorage.clear()
            this.$store.commit('framework/changePageName', '首页')
            this.$store.commit('framework/changeBreadcrumb', [{ name: '首页' }])
            this.$store.commit('framework/changeActiveMenu', '0')
            this.$store.commit('framework/changeOpenMenuId', '')
            this.$router.replace({ name: 'home' })
          }

          // 将用户名存入local以便用户复制地址访问
          this.$store.commit('framework/changeUserName', data.userNameCn)
          this.$store.commit('framework/changeProjectName', data.projectName)
          this.$store.commit('framework/sysParamConfig', data.sysParamConfig)
          this.loadBtn()
          this.getLotAttrs() // 获取批次属性
        })
    },
    // 菜单展开收起变化
    collapseChange (isCollapse) {
      this.sideWidth = isCollapse ? '75px' : '200px'
    },
    // 获取批次属性
    getLotAttrs () {
      const url = this.$API.public.lotAttr.getLotAttrs
      const param = {
        projectId: this.userInfo.projectId
      }
      const config = {
        headers: { 'Content-Type': 'application/json' },
        transformRequest: [],
      }
      this.$https.post(url, param, config)
        .then(data => {
          if (data.succeed) {
            this.$store.commit('framework/changeLotAttrsConfig', data.data)
          } else {
            this.$message.error(data.errorMsg)
            if (data.errorCode === '03001000') {
              // 数据过期的情况
              // window.location.reload()
            }
          }
        })
    },
  }
}
</script>

<style scoped lang="scss">
  .el-container {
    display: block;
  }
  .framework-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .page {
    overflow: hidden;
    height: calc(100% - 60px);
  }
  .sidebar {
    /*##兼容: ie9 布局*/
    display: inline-block;
    /*##兼容: ie10 布局*/
    height: 100%;
    overflow: hidden;
    /*transition: width 0.2s;*/
    /*transition-delay: 0.2s;*/
    border-right: solid 1px #e6e6e6;
  }
  .content {
    /*##兼容: ie9 布局*/
    display: inline-block;
    /*##兼容: ie10 布局*/
    /*max-width: calc(100vw - 200px);*/
    height: 100%;
    padding: 0;
  }
</style>
