<template>
  <div id="container" ref="container" class="visual-container order-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">
      <!-- 上 -->
      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
        <el-col :span="10">
          <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
            <work-order :beilv="beilv" :order-msg="orderList" />
          </base-container>
        </el-col>
        <el-col :span="14">
          <base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
            <div class="box-padding specil-table1">
              <base-table
                :page="1"
                :limit="12"
                :show-index="false"
                :beilv="beilv"
                :table-config="orderPool"
                :table-data="orderPoolList"
              />
            </div>
          </base-container>
        </el-col>
      </el-row>
      <!-- 下 -->
      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
        <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
          <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
            <div class="box-padding specil-table2">
              <base-table
                :page="1"
                :limit="17"
                :show-index="false"
                :beilv="beilv"
                :table-config="orderMonitiring"
                :table-data="orderMonitiringList"
              />
            </div>
          </base-container>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import baseContainer from './components/baseContainer'
import workOrder from './components/workOrder.vue'
import screenfull from 'screenfull'
import BaseTable from './components/baseTable.vue'
import moment from 'moment'
import orderStatus from './components/orderStatus.vue'
const orderPool = [
  {
    prop: 'customerName',
    label: '客户名称',
    minWidth: 38
  },
  {
    prop: 'orderCode',
    label: '订单编号',
    minWidth: 36
  },
  {
    prop: 'productName',
    label: '产品名称',
    minWidth: 30
  },
  {
    prop: 'planNum',
    label: '计划加工量',
    minWidth: 23.6
  },
  {
    prop: 'planDelivery',
    label: '计划交货期',
    minWidth: 25
  },
  {
    prop: 'status',
    label: '订单状态',
    subcomponent: orderStatus,
    minWidth: 21
  }
]
const orderMonitiring = [
  {
    prop: 'customerName',
    label: '客户名称',
    minWidth: 40
  },
  {
    prop: 'orderCode',
    label: '订单编号',
    minWidth: 38
  },
  {
    prop: 'status',
    label: '订单状态',
    subcomponent: orderStatus,
    minWidth: 28
  },
  {
    prop: 'completion',
    label: '完成率',
    minWidth: 24.8
  },
  {
    prop: 'yield',
    label: '良品率',
    minWidth: 24.8
  },
  {
    prop: 'shiftCosts',
    label: '班组费用',
    minWidth: 24.8
  },
  {
    prop: 'energyCosts',
    label: '能耗费用',
    minWidth: 29.4
  },
  {
    prop: 'equipmentCost',
    label: '设备费用',
    minWidth: 29.4
  },
  {
    prop: 'materialCost',
    label: '材料费用',
    minWidth: 29.4
  },
  {
    prop: 'totalCost',
    label: '总费用',
    minWidth: 31.6
  }
]
export default {
  name: 'Cockpit',
  components: {
    baseContainer,
    workOrder,
    BaseTable
  },
  data() {
    return {
      beilv: 1,
      isFullScreen: false,
      orderPool,
      orderPoolList: [],
      orderMonitiring,
      orderMonitiringList: [],
      orderList: []
    }
  },
  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 compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
      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']
      const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
      const arr1 = []
      const arr2 = []
      const temp = []
      for(let i = 0; i < 4; i++) {
        const sj = parseInt(Math.random() * 200)
        const obj = {}
        obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
        obj.state = '激活'
        obj.name = daping[i].name
        obj.line = sj % 2 ? 'A' : 'B'
        obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
        obj.percentage = daping[i].percentage
        arr1.push(obj)
      }
      this.orderList = arr1
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 200)
        const sj2 = parseInt(Math.random() * 31)
        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
        obj.productName = productList[parseInt(Math.random() * (productList.length))]
        obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
        obj.planDelivery = moment("20221001").add(sj2, 'days').format('YYYY-MM-DD')
        // obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
        // obj.status = parseInt(Math.random() * 3 + 1)
        obj.status = 4
        arr2.push(obj)
      }
      this.orderPoolList = arr2
      for (let i = 0; i < 20; i++) {
        const obj = {}
        const sj = parseInt(Math.random() * 200)
        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
        obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
        obj.status = parseInt(Math.random() * 3 + 1)
        obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
        obj.yield = parseInt(Math.random() * 10 + 90) + '%'
        // obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
        // obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
        // obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
        // obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
        // obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
        obj.shiftCosts = '0'
        obj.energyCosts = '0'
        obj.equipmentCost = '0'
        obj.materialCost = '0'
        obj.totalCost = '0'
        temp.push(obj)
      }
      this.orderMonitiringList = temp
    },
    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;
    }
  }
  .container-main {
    padding: 16px 8px;
    .top-container {
      height: calc((100vh - 100px * var(--beilv)) * 0.42);
      display: flex;
      flex: 1;
    }
    .bottom-container {
      height: calc((100vh - 100px * var(--beilv)) * 0.56);
      display: flex;
      flex: 1;
    }
  }
  .box-padding {
    padding: 0 16px;
    height: 100%;
    opacity: 0.8;
  }
}
</style>
<style lang="scss">
.order-cockpit {
  .specil-table1 {
    .el-table .cell {
      padding-left: 25px;
      padding-right: 25px;
    }
    .el-table--border th:first-child .cell,
    .el-table--border td:first-child .cell {
      padding-left: 25px;
    }
  }
  .specil-table2 {
    .el-table .cell {
      padding-left: 25px;
    }
    .el-table--border th:first-child .cell,
    .el-table--border td:first-child .cell {
      padding-left: 25px;
    }
  }
}
</style>
