<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: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon v-else icon-class="fullScreenView" />
      </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">
        <!-- 右上 -->
        <el-row>
          <el-col :style="{ marginTop: 16 * beilv + 'px' }">
            <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
                  :show-index="false"
                  :beilv="beilv"
                  :table-config="originalFilm"
                  :table-data="originalFilmList"
                />
              </div>
            </base-container>
          </el-col>
        </el-row>
        <!-- 右下 -->
        <el-row>
          <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
            <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
              <div class="box-padding specil-table1">
                <base-table
                  :page="1"
                  :limit="14"
                  :show-index="false"
                  :beilv="beilv"
                  :table-config="material"
                  :table-data="materialList"
                />
              </div>
            </base-container>
          </el-col>
        </el-row>
      </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 = []
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 200)
        obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
        obj.productLine = '产线A'
        obj.spec = '光伏玻璃2.0'
        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
        obj.num = parseInt(Math.random() * 800 + 100)
        arr.push(obj)
      }
      this.originalFilmList = arr
      const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206']
      const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100']
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 200)
        obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
        obj.eqName = eqList[parseInt(Math.random() * eqList.length)]
        obj.spec = spcList[parseInt(Math.random() * spcList.length)]
        obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
        obj.num = parseInt(Math.random() * 800 + 100)
        temp.push(obj)
      }
      this.materialList = temp
      this.bomMsg = [
        { name: '隔离纸' },
        { name: '异丙醇' },
        { name: '镀膜液' },
        { name: '磨轮' },
        { name: '包装辅材' },
        { name: '网板' }
      ]
    },
    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;
  }
}
</style>
<style lang="scss">
.material-cockpit {
  .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>
