<template>
  <!-- 万州港卸船作业报表 -->
  <div class="ShipWorkReport" style="width:100%;">
    <div style="height:100%;width:100%">
      <div class="search" style="display:flex;margin: 10px;">
        <el-input
          placeholder="请输入"
          v-model="map.input"
          style="margin: 10px; width:10%"
          clearable
        ></el-input>
       <el-date-picker style="margin: 10px;" v-model="map.startTime" type="datetime" placeholder="起始日期"></el-date-picker>
      <el-date-picker style="margin: 10px;" v-model="map.endTime" type="datetime" placeholder="结束日期"></el-date-picker>
        <el-button
          type="primary"
          class="btn"
          @click="searchUnLoadData"
          style="margin: 10px;"
        >
          <i class="el-icon-search"></i>查询
        </el-button>
        <el-button
          type="primary"
          class="btn"
          @click="exportToExcel('卸船作业统计.xlsx')"
          style="margin: 10px;"
        >
          <i class="el-icon-download"></i>导出excel
        </el-button>
      </div>
      <!-- 装车出库详情 -->
      <div ref="unloadData" style="height:500px;width:100%;float:left;margin-left:5px">
        <div style="font-size:16px;color:red">港口卸船数据</div>
        <div class="loadTable" style="height:500px;width:100%;overflow:scroll;">
             <el-table
          ref="loadTable"
          highlight-current-row
          border
          fit
          :data="unLoadTable"
          :row-style="{height:'40px'}"
          style="width: 100%;font-size: 18px">
          <el-table-column
          align="center"
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
          align="center"
            prop="num"
            label="数量">
          </el-table-column>
        </el-table>
        </div >
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
import {getCookie} from "@/utils/util.js";
import FileSaver from "file-saver";
export default {
  components: { PageTitle },
  data() {
    return {
        count:0,
        loadTable:[],
        unLoadTable:[],
        map:{
            input:"",
            startTime:null,
            endTime:null
        },
        spanArr: [], // 用于存放需要合并的行的个数
        spanIndex: 0, // 记录spanArr数组的下标
      
    };
  },
  mounted(){
    this.searchUnLoadData();
  },
  methods: {
    //查询卸船
    searchUnLoadData(){
        //时间校验
      if(this.map.startTime && this.map.endTime){
        if(this.map.startTime>=this.map.endTime){
            this.$message({
                message:"结束日期必须大于起始日期!",
                type:"warning",
                duration:2000
            });
            return;
        }
        this.map.startTime=sjTime(this.map.startTime);
        this.map.endTime=sjTime(this.map.endTime);
      }else if((this.map.startTime && !this.map.endTime) || (!this.map.startTime && this.map.endTime)){
        this.$message({
            message:"起止日期错误!",
            type:"warning",
            duration:2000
        });
        return;
      }
      this.axios.post('/api/v1/tms/getUnloadData',this.map).then((res)=>{
        if(res.data.code == "200"){
          this.unLoadTable=res.data.data;
        }else {
          this.$message({
              type: "error", 
              message: res.data.data,
          });
        }
      })
    },
    //   点击按钮  导出excel表格：
    exportToExcel(tableTitle) {
        let tables = this.$refs.unloadData;
        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
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
        }
        return table_write;
    },
  },
};
</script>
<style lang='scss'>

</style>

