<template>
  <div id="container" ref="container" class="visual-container material-cockpit">
    <el-row
      class="container-title"
      :style="{
        height: beilv * 88 + 'px',
        lineHeight: beilv * 88 + 'px',
        fontSize: beilv * 30 + 'px'
      }"
    >
      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
        <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
        合肥新能源数字工厂物料管理驾驶舱
      </div>
      <el-button
        type="text"
        class="title-button"
        :style="{ right: 0, top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
        <svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
      </el-button>
    </el-row>
    <el-row class="container-main" :style="{ padding: '0 ' + 16 * beilv + 'px' }" :gutter="16 * beilv">
      <!-- 左 -->
      <el-col :span="10" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
        <base-container :beilv="beilv" :height="958" :title="'BOM清单管理'" :title-icon="'cockpit_2_1'">
          <bom-list :beilv="beilv" :bom-msg="bomMsg" />
        </base-container>
      </el-col>
      <el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
        <!-- 右上 -->
        <div class="right-box">
          <div class="right-top">
            <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="15"
                  :show-index="false"
                  :beilv="beilv"
                  :table-config="material"
                  :table-data="materialList"
                />
              </div>
            </base-container>
          </div>
          <div class="right-bottom">
            <base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="15"
                  :show-index="false"
                  :beilv="beilv"
                  :table-config="originalFilm"
                  :table-data="originalFilmList"
                />
              </div>
            </base-container>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import baseContainer from './components/baseContainer'
import screenfull from 'screenfull'
import BaseTable from './components/baseTable.vue'
import moment from 'moment'
import bomList from './components/bomList.vue'
const originalFilm = [
  {
    prop: 'time',
    label: '上线时间',
    minWidth: 35
  },
  {
    prop: 'productLine',
    label: '产线',
    minWidth: 33
  },
  {
    prop: 'spec',
    label: '原片规格',
    minWidth: 32.4
  },
  {
    prop: 'batch',
    label: '批次',
    minWidth: 35
  },
  {
    prop: 'num',
    label: '数量',
    minWidth: 28
  }
]
const material = [
  {
    prop: 'time',
    label: '上线时间',
    minWidth: 35
  },
  {
    prop: 'eqName',
    label: '设备名称',
    minWidth: 33
  },
  {
    prop: 'spec',
    label: '辅料名称',
    minWidth: 32.4
  },
  {
    prop: 'batch',
    label: '批次',
    minWidth: 35
  },
  {
    prop: 'num',
    label: '数量',
    minWidth: 28
  }
]
export default {
  name: 'Cockpit',
  components: {
    baseContainer,
    BaseTable,
    bomList
  },
  data() {
    return {
      beilv: 1,
      isFullScreen: false,
      originalFilm,
      originalFilmList: [],
      material,
      materialList: [],
      bomMsg: []
    }
  },
  watch: {
    isFullScreen: function(val) {
      if (val) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    },
    'sidebar.opened': function(val) {
      console.log(val)
      if (!this.isFullScreen) {
        setTimeout(() => {
          this.beilv = document.getElementById('container').offsetWidth / 1920
        }, 300)
      }
    }
  },
  mounted() {
    this.beilv = document.getElementById('container').offsetWidth / 1920
    window.addEventListener('resize', () => {
      if (this.isFullScreen) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    })
    this.getMsg()
  },
  methods: {
    getMsg() {
      const arr = []
      const temp = []
      const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
      let cnum = 1
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 3 + 1)
        cnum += sj
        obj.time = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYY-MM-DD HH:mm:ss')
        obj.productLine = sj % 2 ? 'A' : 'B'
        obj.spec = productList[parseInt(Math.random() * (productList.length))]
        obj.batch = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYYMMDDHH')
        obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
        arr.push(obj)
      }
      arr.sort(function (a, b) {
        return new Date(a.time) - new Date(b.time)
      })
      this.originalFilmList = arr
      const eqList = [
        {name: '磨边机', fc: ''},
        {name: '丝印机', fc: ['油墨', '刮胶']},
        {name: '镀膜机', fc: ['镀膜液', '异丙醇']},
        {name: '包装机', fc: ['隔离纸', '包装辅材']}
      ]
      let cnum2 = 1
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 3 + 1)
        const sj2 = parseInt(Math.random() * eqList.length)
        const sj3 = sj % 2 ? 1 : 0
        cnum2 += sj
        obj.time = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYY-MM-DD HH:mm:ss')
        obj.eqName = eqList[sj2].name
        obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
        obj.batch = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYYMMDD')
        obj.num = parseInt(Math.random() * 800 + 100)
        temp.push(obj)
      }
      temp.sort(function (a, b) {
        return new Date(a.time) - new Date(b.time)
      })
      this.materialList = temp
      this.bomMsg = [
        { name: '2.0-1128*1716' },
        { name: '2.0-1128*2251' },
        { name: '2.0-1128*2272' },
        { name: '3.2-1128*1716' },
        { name: '3.2-1128*1718' },
        { name: '3.2-1032*1747' }
      ]
    },
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      this.isFullScreen = !this.isFullScreen
      screenfull.toggle(this.$refs.container)
    }
  }
}
</script>
<style lang="scss" scoped>
.visual-container {
  width: 100%;
  min-width: 960px;
  background: url('../../../assets/img/cockpit/cockpit-back.png') no-repeat;
  background-size: cover;
  .container-title {
    width: 100%;
    background: url('../../../assets/img/cockpit/title.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .title-button {
      color: #00fff0;
      font-size: 20px;
      position: absolute;
    }
  }
  .box-padding {
    padding: 0 16px 16px;
    height: 100%;
    opacity: 0.8;
  }
}
</style>
<style lang="scss">
.material-cockpit {
  .container-main {
    height: calc(100vh - 100px * var(--beilv));
    display: flex;
    flex: 1;
  }
  .right-box {
    height: 100%;
    display: flex;
    // flex: 1;
    flex-direction: column-reverse;
    justify-content: space-between;
  }
  .right-top {
    height: 49.4%;
  }
  .right-bottom {
    height: 49.4%;
  }
  .specil-table1 {
    .el-table .cell {
      padding-left: 40px;
      padding-right: 40px;
    }
    .el-table--border th:first-child .cell,
    .el-table--border td:first-child .cell {
      padding-left: 40px;
    }
  }
}
</style>
