<template>
  <!-- 万州港作业报表 -->
  <div class="ShipWorkReport">
    <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="searchLoadData"
          style="margin: 10px;"
        >
          <i class="el-icon-search"></i>查询
        </el-button>
      </div>
      <!-- 装车出库详情 -->
      <div class="loadData" style="height:500px;float:left;margin-left:5px">
        <div style="font-size:16px;color:red">港口装车数据:共{{count}}车</div>
        <div class="loadTable" style="height:500px;overflow:scroll;">
             <el-table
          ref="loadTable"
          highlight-current-row
          border
          :data="loadTable"
          :span-method="objectSpanMethod"
          :row-style="{height:'40px'}"
          style="width: 100%;font-size: 18px">
          <el-table-column
          align="center"
            prop="materialName"
            label="物资名"
            width="300px">
          </el-table-column>
          <el-table-column
          align="center"
            prop="resultForeignShipName"
            label="船号"
            width="150px">
          </el-table-column>
           <el-table-column
          align="center"
            prop="num"
            label="装车量"
            width="150px">
          </el-table-column>
        </el-table>
        </div >
      </div>
      <!-- 卸船作业 -->
      <div class="right" style="margin-right=10px:10px;float:right;">
        <div style="font-size:16px;color:red">港口卸船数据</div>
           <el-table
          ref="unLoadTable"
          highlight-current-row
          border
          :data="unLoadTable"
          :row-style="{height:'40px'}"
          style="width: 100%;font-size: 18px">
          <el-table-column
          type="index"
          width="50"
          label="编号"
          align="center"
          fixed="left"
          :resizable="false">
          </el-table-column>
          <el-table-column
          align="center"
            prop="status"
            label="状态"
            width="240px">
          </el-table-column>
          <el-table-column
          align="center"
            prop="num"
            label="数量"
            width="100px">
          </el-table-column>
        </el-table>
    </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
        count:0,
        loadTable:[],
        unLoadTable:[],
        map:{
            input:"",
            startTime:null,
            endTime:null
        },
        spanArr: [], // 用于存放需要合并的行的个数
        spanIndex: 0, // 记录spanArr数组的下标
      
    };
  },
  mounted(){
    this.searchLoadData();
    this.searchUnLoadData();
  },
  methods: {
    //查询装车数据
    searchLoadData(){
      //时间校验
      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/getLoadData',this.map).then((res)=>{
        if(res.data.code == "200"){
          this.getSpanArr(res.data.data);
          this.loadTable=res.data.data;
          this.count=0;
          this.loadTable.forEach((item)=>{
            this.count+=item.num;
          });
        }else {
          this.$message({
              type: "error", 
              message: res.data.data,
          });
        }
      })
    },
    //查询卸船
    searchUnLoadData(){
      this.axios.post('/api/v1/tms/getUnloadData').then((res)=>{
        if(res.data.code == "200"){
          this.unLoadTable=res.data.data;
        }else {
          this.$message({
              type: "error", 
              message: res.data.data,
          });
        }
      })
    },
    //处理数据,得到合并数组
    getSpanArr(data) {
        this.spanArr=[];
        for (let i = 0; i < data.length; i++) {
            if (i == 0) {
                this.spanArr.push(1);
                this.spanIndex = 0;
            } else {
                // 判断当前行与前一行内容是否相同
                if (data[i].materialName == data[i - 1].materialName) {
                    this.spanArr[this.spanIndex] += 1; // 相同的话，当前下标所代表的值加一，例如：第一列的前三行可合并
                    this.spanArr.push(0);// 记录完毕后，再往数组里添加一个元素0，作为下一次合并的初始值
                } else {
                    this.spanArr.push(1); // 否则，依旧是一行
                    this.spanIndex = i;
                }
            }
        }
    },
     //合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex]; // 行数
            const _col = _row > 0 ? 1 : 0; // 列数
            return {
                rowspan: _row,
                colspan: _col
            };
        }
    },
  },
};
</script>
<style lang='scss'>

</style>

