<template>
  <!-- 收货页面 -->
   <div class="purchasFuelNewMonitor">
    <el-form :inline="true">
      <el-form-item>
        <span>抵达时间：</span>
      <el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="选择日期"
      >
      </el-date-picker>
      <span>至</span>
      <el-date-picker v-model="endTime" type="datetime" placeholder="选择日期">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">产品分类</span>
          <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">车牌号</span>
          <el-input v-model="capacityNumber1" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">收货单位</span>
          <el-input v-model="consigneeCompanyName1" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">承运单位</span>
          <el-input v-model="carrierName" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">门岗名称</span>
        <el-input v-model="gatepostName" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" @click="onclick"><i class="el-icon-search"></i>查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
        @filter-change="filterChange"
        :data="dataTabel"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="orderNumber" label="运输订单号">
        </el-table-column>
        <el-table-column prop="capacityNumber" label="车牌号">
        </el-table-column>
        <el-table-column prop="materialName" label="物资名称">
        </el-table-column>
        <el-table-column prop="materialSpecification" label="规格">
        </el-table-column>
        <el-table-column prop="materialModel" label="型号"> </el-table-column>
        <el-table-column prop="resultNetWeight" label="净重"> </el-table-column>
        <el-table-column prop="resultGrossWeightTime" label="净重时间">
        </el-table-column>
        <el-table-column prop="resultOutGateTime" label="出厂时间">
        </el-table-column>
        <el-table-column prop="outGatepostName" label="出厂门岗">
        </el-table-column>
        <el-table-column prop="carrierName" label="承运商名称">
        </el-table-column>
        <el-table-column prop="deliveryAddress" label="详细收货地址">
        </el-table-column>
        <el-table-column prop="receiveName" label="客户名称"> </el-table-column>
        <el-table-column prop="resultArrivalAddress" label="抵达收货点的地址">
        </el-table-column>
        <el-table-column prop="insertTime" label="抵达作业时间">
        </el-table-column>
        <el-table-column fixed="right" label="照片游览">
          <template slot-scope="scope">
            <el-button
              @click="toPhotoClick(scope.row.orderNumber)"
              type="text"
              size="small"
              style="font-size: 6px"
            >
              抵达满货照片</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination
      v-if="isPagination"
      :layout="layout"
      :current-page="dataCurrentPage"
      :page-sizes="pageSizes"
      :page-size="dataPageSize"
      :total="dataTotal"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
     <vxe-modal width="549px" height="731px" v-model="isShow" show-footer>
        <div class="demo-image__preview">
          <el-image 
            style=" height:731px;text-align:center"
            :src="src" 
            :preview-src-list="srcList">
          </el-image>
        </div>
      </vxe-modal>
  </div>
</template>

<script>
import { sjTime } from '@/utils/sharedJsFile';
export default {
  name: "homeworkPath",
  data() {
    return {
      inputValue:"",
      consigneeCompanyName1:"",
      exceptionType:"全部类型",
      selectOrderNumber:"",
      capacityNumber1:"",
      carrierName:"",
       gatepostName:"",
       spanArr: [],
      dataTabel: [],
      // 自己的数据总条数
      dataTotal: 0,
      // 自己的每页显示条目个数
      dataPageSize: 10,
      // 每页显示个数选择器的选项设置
      pageSizes: [10, 20, 50, 100, 200, 1000, 50000],
      layout: "total, prev, pager, next, sizes, jumper",
      // 自己的当前页面数
      dataCurrentPage: 1,
      // 是否启用分页器
      isPagination: true,
      restaurants: [],
      input: "",
      srcList:[],
       src:"",
       isShow:false,
      startTime: null,
      endTime: null,
      // 表格请求数据的地址
      requestUrl: "/api/v1/otms/getReceiptResult?apiId=470",
      beforeRow: 0,
      thatrowspan: 1,
      option: {
        pageSize: 10,
        pageNum: 1
      }
    };
  },
   mounted() {
    this.requestData(this.option);
  },
  created(){
   
  },
  methods: {
     //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].orderNumber === data[i - 1].orderNumber) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 7 ||
        columnIndex == 8 ||
        columnIndex == 9 ||
        columnIndex == 10 ||
        columnIndex == 11 ||
        columnIndex == 12 ||
        columnIndex == 13 ||
        columnIndex == 14
      ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
    filterChange(filters) {
      let value = {};
      for (const key in filters) {
        value[key] = filters[key].length > 0 ? filters[key] : undefined;
      }
      // 每次筛选时，都默认将页面改为第一页，避免数据过少时，显示没有数据
      this.currentChange(1, false);
      this.setDataRequestQuery(value);
    },
    // current-page 改变时会触发
    currentChange(val, isRequest = true) {
      if (isRequest) {
        this.requestData({ pageNum: val });
      }
      // 最后通知父节点页面改变
      this.dataCurrentPage = val;
      this.$emit("update:current-page", val);
    },
    // pageSize 改变时会触发
    sizeChange(val) {
      this.dataPageSize = val;
      this.requestData({});
      this.$emit("update:size-change", val);
    },
    // 通过请求获取数据
    requestData(options) {
      let pageNum = undefined;
      let pageSize = undefined;

      if (options) {
        pageNum = options.pageNum;
        pageSize = options.pageSize;
      }
      console.log(this.requestUrl);
      if (this.requestUrl) {
        // 处理请求地址逻辑
        let url;
        if (this.requestUrl.indexOf("//") > -1) {
          url = this.requestUrl;
        } else {
          url = this.requestUrl;
        }
        // 判断是否需要在请求体中放入参数
        if (this.requestQuery) {
          this.dataRequestQuery = this.requestQuery;
          // console.log(this.dataRequestQuery.resultBreakId)
        }
        let data = undefined;
        for (const key in this.dataRequestQuery) {
          const val = this.dataRequestQuery[key];
          console.log(val);
          if (val || val == 0) {
            if (!data) data = {};
            data[key] = val;
          }
        }
        //判断是否是带分页查询
        if (this.isKuang) {
          // 发送请求
          this.axios
            .post(url,  {"startTime":sjTime(this.startTime),
                      "endTime": sjTime(this.endTime),
                      "materialNames": this.inputValue,
                      "capacityNumbers": this.capacityNumber1,
                      "carrierNames":this.carrierName,
                      "outGatepostNames":this.gatepostName,
                      "receiveNames": this.consigneeCompanyName1}, {
              // 请求地址 中
              params: {
                pageNum: 1,
                pageSize: pageSize || this.dataPageSize
              }
            })
            .then(response => {
              let d = response.data.data;
              this.dataTabel = d.list;
              this.getSpanArr(this.dataTabel);
              this.dataTotal = d.total;
              //执行成功的回调
              this.$emit("func", response.data.data);
              this.refreshColumnData(d.columnData);
            });
        } else {
          // 发送请求
          this.axios
            .post(url,  {"startTime":sjTime(this.startTime),
                      "endTime": sjTime(this.endTime),
                      "materialNames": this.inputValue,
                      "capacityNumbers": this.capacityNumber1,
                      "carrierNames":this.carrierName,
                      "outGatepostNames":this.gatepostName,
                      "receiveNames": this.consigneeCompanyName1}, {
              // 请求地址 中
              params: {
                pageNum: pageNum || this.dataCurrentPage,
                pageSize: pageSize || this.dataPageSize
              }
            })
            .then(response => {
              let d = response.data.data;
              this.dataTabel = d.list;
              this.dataTotal = d.total;
              this.getSpanArr(this.dataTabel);
              //执行成功的回调
              this.$emit("func", response.data.data);
              this.refreshColumnData(d.columnData);
            });
        }
      } else {
        console.warn("requestUrl 参数不能为 null");
      }
    },
    // 刷新表头显示数据
    refreshColumnData(columnData) {
      // 表头只赋值一次(在查出全部数据的情况下才只赋值一次)
      if (this.dataColumnData.length > 0) {
        return;
      }
      // 如果前端有写表头，则加在后端表头前面
      const d = this.columnData.concat(columnData);
      // 把操作列拼接到最后一列
      this.dataColumnData = d;
      this.dataDropColumn = [].concat(this.dataColumnData);
    },
     toPhotoClick(orderNumber){
      this.axios
       .post("/api/v1/otms/getReceivingPhotoByUrl?orderNumber="+orderNumber)
       .then((res)=>{
        if(res.data.code==200){
          console.log(res.data.data);
          this.isShow=true;
          this.srcList=[];
          this.src=res.data.resultSignedNotePhoto;
          this.srcList.push(res.data.resultSignedNotePhoto);
          this.srcList.push(res.data.resultEmptyContainerPhoto);
          if(res.data.resultReceiveNotePhoto!=null){
             this.srcList.push(res.data.resultReceiveNotePhoto);
          }
          if(res.data.otherPhoto1!=null){
             this.srcList.push(res.data.otherPhoto1);
          }
          if(res.data.otherPhoto2!=null){
             this.srcList.push(res.data.otherPhoto2);
          }
          if(res.data.otherPhoto3!=null){
             this.srcList.push(res.data.otherPhoto3);
          }
        }else{
           this.$message.warning(res.data.message);
        }
       });
       
    },
    onclick() {
      let startTime = null;
      let endTime = null;
      if(this.startTime){
        startTime = sjTime(this.startTime);
      }
      if(this.endTime){
        endTime = sjTime(this.endTime);
      }
      if(startTime && endTime){
        if(startTime < endTime){
          this.requestUrl = '/api/v1/otms/getReceiptResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
           this.requestData(this.option);
       }else{
          this.startTime = null;
          this.endTime = null;
          this.$message.warning('开始时间要比结束时间早')
        }
      }else{
        // console.log(startTime && endTime)
        //  this.requestUrl = '/api/v1/otms/getReceiptResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
        // this.requestData(this.option);
      }
    },
   }
};
</script>
<style lang='scss' scoped>
.el-input {
    width: 150px;
    margin-left: 5px;
}
span.el-form-item__span {
    float: left;
    margin-top: 7px;
}
.purchasFuelNewMonitor {
  .frameCalculation {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .el-date-editor{
      margin: 20px;
    }
    .el-input {
      width: 20%;
      margin-right: 1.25rem;
    }
  }
}
</style>