<template>
  <div class="dashboard-editor-container">

    <div class="chart-wrapper">
      <span style="text-align: center;display: block;width: 100%;line-height: 36px">机台负荷统计</span>
      <bar-chart :chart-data="chartData" @refreshInfo="getInfo" @getMachineTask="getMachineTasks"/>
    </div>

    <div class="dropTable">
      <el-table
        size="mini"
        :data="activeMachineInfoList"
        v-loading="listLoadingSort"
        ref="multipleTable2"
        tooltip-effect="dark"
        style="width: 100%;margin-bottom: 20px;"
        row-key="index"
        show-summary
        max-height="400px"
        :summary-method="getSummaries"
        border
        default-expand-all>
        <el-table-column
          label="序号"
          width="50px"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          label="施工单号"
          width="120px"
        >
          <template slot-scope="{row}">
                      <span
                        @click="getBillStep(row.idPrintBill)"
                        style="color: #409EFF;cursor: pointer"
                        v-html="row.printBill.billCode"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单消息"
          width="180px"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <template v-if="row.breedMsg">
              <el-button size="mini" icon="el-icon-plus" @click="openMessage(row)"></el-button>
              <span
                style="color: #20a0ff; cursor: pointer"
                @click="openMessage(row)"> {{ row.breedMsg }}</span>
            </template>
            <template v-else>
              <el-button size="mini" icon="el-icon-plus" @click="openMessage(row)"></el-button>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="版名称"
          width="140px"
        >
          <template slot-scope="{row}">
                    <span
                      @click="handleDetail(row.idPrintBill)"
                      style="color: #409EFF;cursor: pointer">{{ row.printBreed.breedName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生产状态" align="center" width="110px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <div v-if="row.pauseStatus==0">
              <el-tag size="mini" type="info" v-if="row.taskStatus==0">未开始</el-tag>
              <!--            <el-tag type="warning" type="info" v-if="row.taskStatus==0 && row.pauseStatus==1">暂停</el-tag>-->
              <el-tag size="mini" type="success" v-if="row.taskStatus==1">生产中</el-tag>
              <el-tag size="mini" type="danger" v-if="row.taskStatus==2">终止</el-tag>
              <el-tag size="mini" type="" v-if="row.taskStatus==5">完成</el-tag>
              <el-tag size="mini" type="su" v-if="row.taskStatus==10">已完成</el-tag>
            </div>
            <div v-if="row.pauseStatus==1">
              <el-tag size="mini" type="warning" v-if="row.taskStatus==0 || row.taskStatus==1">暂停</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="印刷机台">
          <template slot-scope="{row}">
            <el-tooltip :content="row.printBreed.machineName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.printBreed.machineName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称">
          <template slot-scope="{row}">
            <el-tooltip :content="row.printBill.clientName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.printBill.clientName }}</span>
            </el-tooltip>

          </template>
        </el-table-column>
        <el-table-column
          label="印品名称">
          <template slot-scope="{row}">
            <el-tooltip :content="row.printBill.billName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.printBill.billName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="工单下纸">
          <template slot-scope="{row}">
            {{ row.printBreed.paperName }}
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          label="实际用纸">
          <template slot-scope="{row}">
            {{ row.printBreed.actualPaperName }}
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="纸张开数">
          <template slot-scope="{row}">
            {{ row.printBreed.cutName }}
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="开纸尺寸">
          <template slot-scope="{row}">
            {{ row.printBreed.cutSize }}
          </template>
        </el-table-column>
        <el-table-column
          label="开单日期"
          width="120px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="翻版方式">
          <template slot-scope="{row}">
            <span v-if="row.printBreed.breedFlipType==1">正反</span>
            <span v-if="row.printBreed.breedFlipType==2">滚翻</span>
            <span v-if="row.printBreed.breedFlipType==3">自翻</span>
            <span v-if="row.printBreed.breedFlipType==4">单面</span>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="ps版套数">
          <template slot-scope="{row}">
            {{ row.printBreed.psGroupCount }}
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="千印数">
          <template slot-scope="{row}">
            {{ row.printBreed.printCount1000 }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="印工放数+后工放数">
          <template slot-scope="{row}">
            {{ row.printBreed.printFlowCount }}+{{ row.printBreed.craftFlowCount }}
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="拼版人">
          <template slot-scope="{row}">
            <span v-if="row.assembleStatusInt==10"> {{ row.assembleMan }}</span>
          </template>
        </el-table-column>
        <!--                  <el-table-column-->
        <!--                    width="100"-->
        <!--                    label="拼版人确认人">-->
        <!--                    <template slot-scope="{row}">-->
        <!--                      {{ row.assembleMan }}-->
        <!--                    </template>-->
        <!--                  </el-table-column>-->
        <el-table-column
          width="80"
          label="制版人">
          <template slot-scope="{row}">
            <span v-if="row.madeBreedStatusInt==10"> {{ row.madeBreedMan }}</span>

          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="白料裁切人">
          <template slot-scope="{row}">
            <span v-if="row.cutPaperStatusInt==10"> {{ row.cutPaperMan }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="大纸张数">
          <template slot-scope="{row}">
            {{ row.printBreed.wholePaperCount }}
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="印量">
          <template slot-scope="{row}">
            {{ row.printBreed.printCount }}
          </template>
        </el-table-column>
        <el-table-column
          width="110"
          label="印刷耗时（分钟）">
          <template slot-scope="{row}">
            {{ row.expectedWorkTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      title="施工单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message @handleAddBreed="handleAddBreed" ref="orderMessage"></order-message>
    </el-drawer>
    <print-step ref="printStep"></print-step>
    <printbill-detail ref="printbillDetail"></printbill-detail>

  </div>
</template>

<script>
import BarChart from './components/BarChartMachineBurden'
import {getMachineBurdenInfos} from '@/api/doc/inquire/inquire'
import printStep from '@/components/printbillDetail/printStep'
import OrderMessage from '@/views/feedBack/orderMessage/orderMessage'
import PrintbillDetail from '@/components/printbillDetail/printbillDetail'
import {getInfo} from "@/api/feedBack/feedBack";

export default {
  components: {
    BarChart,
    PrintbillDetail,
    printStep,
    OrderMessage
  },
  data() {
    return {
      serverData: [],
      chartData: {},
      activeMachineInfoList: [],
      listLoadingSort: false,
      rowData: {},
      memoDrawer: false
    }
  },
  mounted() {
    const _that = this
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        _that.getInfo()
        resolve(0)
      }, 500)
    })
  },
  methods: {
    getInfo() {
      const _that = this
      getMachineBurdenInfos().then(response => {
        if (response.httpCode === 200) {
          _that.serverData = response.data
          // 处理数据
          const chartData = _that.processData(response.data)
          _that.chartData = chartData
        } else {
          _that.$message.error(response.msg)
        }
      })
    },
    processData(serverData) {
      const result = {}
      const dataResult = []
      const nowTime = new Date()
      const nowTimeLong = nowTime.getTime()

      const tomorrow = new Date(nowTime)
      tomorrow.setDate(tomorrow.getDate() + 1)

      // 计算下一个17:00的时间戳
      const nowHour = nowTime.getHours()
      if (nowHour < 17) {
        // 取今天的17:00
        const targetTime = new Date(nowTime.getFullYear(), nowTime.getMonth(), nowTime.getDate(), 17, 0, 0, 0).getTime()
        result.line1Time = targetTime
      } else {
        // 取明天的17:00
        const targetTime = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), 17, 0, 0, 0).getTime()
        result.line1Time = targetTime
      }

      // 计算下一个8:00的时间戳
      if (nowHour < 8) {
        // 取今天的8:00
        const targetTime = new Date(nowTime.getFullYear(), nowTime.getMonth(), nowTime.getDate(), 8, 0, 0, 0).getTime()
        result.line2Time = targetTime
      } else {
        // 取明天的8:00
        const targetTime = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), 8, 0, 0, 0).getTime()
        result.line2Time = targetTime
      }

      let maxWorkTime = 0
      serverData.forEach(x => {
        const item = []
        item.push(x.machineName) // x坐标
        const expectTime = nowTimeLong + Math.floor(x.expectedWorkTime * 60 * 1000)
        item.push(expectTime) // y坐标
        dataResult.push(item)

        if (x.expectedWorkTime > maxWorkTime) {
          maxWorkTime = x.expectedWorkTime
        }
      })

      // 计算y轴坐标最大值
      result.yMaxValue = nowTimeLong + Math.floor((maxWorkTime + 60 * 1) * 60 * 1000)
      result.yMaxValue = Math.max.apply(null, [result.yMaxValue, result.line1Time, result.line2Time])

      result.dataResult = dataResult

      return result
    },
    getSummaries(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        let num
        if (index === 0) {
          sums[index] = '合计'
          // 只计算最后一列
          // console.log(columns.length - 8);
        } else if (index === columns.length - 1) {
          // console.log("data", data);
          num = 0
          for (let i = 0; i < data.length; i++) {
            num += data[i].expectedWorkTime
          }
          sums[index] = num
        } else if (index === columns.length - 8) {
          // console.log("data", data);
          num = 0
          for (let i = 0; i < data.length; i++) {
            num += data[i].printBreed.printCount1000
            // console.log(num);
          }
          sums[index] = num
        } else if (index === columns.length - 9) {
          // console.log("data", data);
          num = 0
          for (let i = 0; i < data.length; i++) {
            num += data[i].printBreed.psGroupCount
            // console.log(num);
          }
          sums[index] = num
        }
      })
      return sums
    },
    indexMethod(index) {
      return index + 1
    },
    getBillStep(id) {
      const _that = this
      _that.$refs.printStep.idOrder = id
      _that.$refs.printStep.drawer = true
      _that.$refs.printStep.getStep()
    },
    // 施工单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.rowData = row
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idPrintBreed
        _that.$refs.orderMessage.idPrint = row.idPrintBreed
        _that.$refs.orderMessage.idPrintBill = row.idPrintBill;
        _that.$refs.orderMessage.sMessage = ''
        _that.$refs.orderMessage.getList()
      })
    },
    handleDetail(id) {
      const _that = this
      _that.$refs.printbillDetail.idOrder = id
      _that.$refs.printbillDetail.getDetail()
    },
    handleAddBreed(breedMsg) {
      this.memoDrawer = false
      this.rowData.breedMsg = breedMsg
    },
    getMachineTasks(machineDataIndex) {
      // 由于顺序一样,所以直接从serverData里取
      this.listLoadingSort = true
      const queryMachine = this.serverData[machineDataIndex]
      console.log(queryMachine)
      const _that = this

      const params = {
        idMachineInfo: queryMachine.idMachine,
        getDetail: 1
      }
      getInfo(params).then(response => {
        console.log(response)
        _that.activeMachineInfoList = response.data.taskList
        this.listLoadingSort = false
      }).catch(err => {
        _that.$message.error(err)
        this.listLoadingSort = false
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
