<template>
  <div class="steelTransportReport">
    <div class="top">
      <el-form :inline="true">
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >订单日期：</label
          >
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="选择日期"
            style="width:140px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <!-- <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="选择日期"
            style="width:140px"
            :picker-options="pickerOptions1"
          >
          </el-date-picker> -->
          <el-button type="primary" class="btn" @click="onclick">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportToExcel('钢材运输情况统计表')"
            >下载Excel</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main" id="excelDom">
      <table class="title">
        <th>{{ titleTXT }}钢材运输情况统计表</th>
      </table>
      <div class="null"></div>
      <el-table
        :data="tableData"
        id="tableRef"
        ref="tableRef"
        border
        :row-style="{ height: '30px' }"
      >
        <el-table-column
          prop="carrierDirection"
          label="承运方向"
          align="center"
          width="100"
          column-key="carrierDirection"
          key="carrierDirection"
        >
        </el-table-column>
        <el-table-column
          prop="carrierLine"
          label="承运线路"
          width="300"
          align="center"
          column-key="carrierLine"
          key="carrierLine"
        >
        </el-table-column>
        <el-table-column
          prop="carrier"
          label="承运商"
          align="center"
          width="100"
          column-key="carrier"
          key="carrier"
        >
        </el-table-column>
        <el-table-column
          prop="noUploadPlanTruckNumber"
          label="待审核计划"
          align="center"
          column-key="noUploadPlanTruckNumber"
          width="110"
          key="noUploadPlanTruckNumber"
        >
        </el-table-column>
        <el-table-column
          prop="processPlanTruckNumber"
          label="已审核计划"
          align="center"
          column-key="processPlanTruckNumber"
          width="90"
          key="processPlanTruckNumber"
        >
        </el-table-column>
        <el-table-column
          prop="unArragePlanTruckNumber"
          label="未派发"
          align="center"
          column-key="unArragePlanTruckNumber"
          key="unArragePlanTruckNumber"
          width="80"
        >
        </el-table-column>
        <el-table-column label="安排运力" align="center">
          <el-table-column
            prop="arrageTruckNumber"
            label="已安排"
            align="center"
            column-key="arrageTruckNumber"
            key="arrageTruckNumber"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="dispatchOrderEd"
            label="未接收"
            align="center"
            column-key="dispatchOrderEd"
            key="dispatchOrderEd"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="receivedOrder"
            label="已接单"
            align="center"
            column-key="receivedOrder"
            key="receivedOrder"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="queueOrder"
            label="排队中"
            align="center"
            column-key="queueOrder"
            key="queueOrder"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="outBoundEd"
            label="已出库"
            align="center"
            column-key="outBoundEd"
            key="outBoundEd"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="finishEd"
            label="已完成(签收)"
            align="center"
            column-key="finishEd"
            key="finishEd"
            width="80"
          >
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column
          prop="remark"
          label="备注"
          align="center"
          column-key="remark"
          key="remark"

        >
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script>
import { sjTime } from '@/utils/sharedJsFile'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      startTime: new Date(),
      // endTime: new Date(),
      titleTXT: null,
      tableData: [],
      sumList: [
        'noUploadPlanTruckNumber',
        'processPlanTruckNumber',
        'arrageTruckNumber',
        'unArragePlanTruckNumber',
        'finishEd',
        'outBoundEd',
        'dispatchOrderEd',
        'receivedOrder',
        'queueOrder'
      ],
      spanArr: [],
      mergeList: ['carrierDirection', 'carrier']
    }
  },
  created() {
    this.titleTXT = `${this.startTime.getFullYear()}年${this.startTime.getMonth() +
      1}月${this.startTime.getDate()}日08:00 - ${new Date(
      sjTime(this.startTime) + 86400000
    ).getFullYear()}年${new Date(sjTime(this.startTime) + 86400000).getMonth() +
      1}月${new Date(sjTime(this.startTime) + 86400000).getDate()}日08:00`
    this.steelTransportReport()
  },
  watch: {
    startTime() {
      this.titleTXT = `${this.startTime.getFullYear()}年${this.startTime.getMonth() +
        1}月${this.startTime.getDate()}日08:00 - ${new Date(
        sjTime(this.startTime) + 86400000
      ).getFullYear()}年${new Date(
        sjTime(this.startTime) + 86400000
      ).getMonth() + 1}月${new Date(
        sjTime(this.startTime) + 86400000
      ).getDate()}日08:00`
      this.steelTransportReport()
    }
    // tableData: {
    //   immediate: true,
    //   handler() {
    //     this.$nextTick(() => {
    //       const tds = this.$refs.tableRef.$el
    //         .querySelector('.el-table__footer-wrapper')
    //         .querySelector('.el-table__footer')
    //       console.log(tds)
    //       let cell = tds.rows[0].cells
    //       cell[1].style.display = 'none'
    //       cell[2].style.display = 'none'
    //       console.log(cell, 'cell')
    //       cell[0].colSpan = '3'
    //     })
    //   }
    // }
  },
  mounted() {
    this.showSummariesPosition()
  },
  methods: {
    showSummariesPosition() {
      // const table = document.querySelector('.main')
      // const footer = document.querySelector('.main .el-table__footer-wrapper')
      // const footerTable = document.querySelector(
      //   '.main .el-table__footer-wrapper .el-table__footer .has-gutter'
      // )
      // console.log(footerTable, 'footerTable')
      // console.log(footer, 'foo')
      // footer.style.border = '1px,solid,#000'
      // footer.style.fontWeight = 700
      // console.log(footer.style, 'foo')
      // table.removeChild(footer); // 移除表格最下方的合计行
      // table.insertBefore(footer, body); // 把合计行插入到表格body的上面
    },
    onclick() {
      this.titleTXT = `${this.startTime.getFullYear()}年${this.startTime.getMonth() +
        1}月${this.startTime.getDate()}日08:00 - ${new Date(
        sjTime(this.startTime) + 86400000
      ).getFullYear()}年${new Date(
        sjTime(this.startTime) + 86400000
      ).getMonth() + 1}月${new Date(
        sjTime(this.startTime) + 86400000
      ).getDate()}日08:00`
      this.steelTransportReport()
    },
    exportToExcel(tableTitle = '表格标题') {
      let tables = document.getElementById('tableRef') //此处是拿表格document元素,也可以取父div的ref
      let table_book = XLSX.utils.table_to_book(tables)
      var table_write = XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          tableTitle + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    },

    steelTransportReport() {
      this.axios
        .post(
          '/api/v1/tms/oYeSteelTransportReport?startTime=' +
            sjTime(this.startTime) +
            '&endTime=' +
            sjTime(this.startTime)
        )
        .then(res => {
          let summaryRow = {
            carrierDirection: '合计',
            finishEd: 0,
            outBoundEd: 0,
            queueOrder: 0,
            receivedOrder: 0,
            dispatchOrderEd: 0,
            arrageTruckNumber: 0,
            unArragePlanTruckNumber: 0,
            processPlanTruckNumber: 0,
            noUploadPlanTruckNumber: 0
          }
          res.data.data.forEach(item => {
            summaryRow.finishEd += item.finishEd
            summaryRow.outBoundEd += item.outBoundEd
            summaryRow.enFactoryEd += item.enFactoryEd
            summaryRow.queueOrder += item.queueOrder
            summaryRow.receivedOrder += item.receivedOrder
            summaryRow.dispatchOrderEd += item.dispatchOrderEd
            summaryRow.arrageTruckNumber += item.arrageTruckNumber
            summaryRow.unArragePlanTruckNumber += item.unArragePlanTruckNumber
            summaryRow.processPlanTruckNumber += item.processPlanTruckNumber
            summaryRow.noUploadPlanTruckNumber += item.noUploadPlanTruckNumber
          })
          this.tableData = res.data.data
          this.tableData.push(summaryRow)
        })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { border: '1px,solid,#000' }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        console.log(column, index)
        //如果索引值为0,则展示‘合计’
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1) {
          return
        }
        if (this.sumList.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index]
            // console.log("sums");
            // console.log(sums[index]);
          } else {
            sums[index] = 'N/A'
          }
        }
        //遍历数组,找到符合条件的列
      })
      return sums
    }
  }
}
</script>
<style lang="scss" scoped>
.steelTransportReport {
  .top {
    margin-left: 20px;
    margin-top: 20px;
  }
  .main {
    .title {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-left: 40px;
      font-size: 30px;
      font-weight: 700;
      color: #000;
    }

    // /deep/ .el-table__body {
    //   overflow-y: auto;
    //   position: absolute !important;
    //   tr:hover > td {
    //     background-color: #fff;
    //   }
    // }

    /deep/ .el-table__row > td {
      // overflow-y: auto;
      // position: absolute !important;

      border: 1px, solid, #000 !important;
    }

    .null {
      height: 20px;
    }
  }
}
</style>
