<template>
  <!-- 汽车衡预报查询 -->
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px; border-bottom: 1px solid #d5d5d5">
        <el-form
          ref="searchData1"
          :inline="true"
          :model="search"
          :rules="ruleValidateSearch"
          style="padding-left: 12px"
          label-width="70px"
        >
          <el-form-item prop="predictionNo" label="预报编号">
            <el-input
              v-model="search.predictionNo"
              clearable
              size="small"
              style="width: 120px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="carNo" label="车号">
            <el-input
              v-model="search.carNo"
              clearable
              size="small"
              style="width: 120px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="railwayNo" label="火车号">
            <el-input
              type="text"
              size="mini"
              style="width: 120px"
              v-model="search.railwayNo"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="predictionType" label="预报类型">
            <el-select
              v-model="search.predictionType"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="(item, index) in predictionTypeItem"
                :key="index"
                :label="item.predictionType"
                :value="item.predictionType"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="meterTypeName" label="业务类型">
            <el-select
              v-model="search.meterTypeName"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="(item, index) in meterTypeNameItem"
                :key="index"
                :label="item.baseName"
                :value="item.baseName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="contractNo" label="合同号">
            <el-input
              v-model="search.contractNo"
              clearable
              size="small"
              style="width: 120px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="matterNo" label="物资名称">
            <el-select
              v-model="search.matterNo"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 120px"
              :filter-method="getMatterName"
            >
              <el-option
                v-for="item in matterNameItem"
                :key="item.matterNo"
                :label="item.matterName"
                :value="item.matterNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="valueFlag" label="预报状态">
            <el-select
              v-model="search.valueFlag"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="(item, index) in valueFlagItem"
                :key="index"
                :label="item.valueFlag"
                :value="item.valueFlag"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="startTime" label="开始时间">
            <el-date-picker
              class="measure-self-picker"
              v-model="search.startTime"
              clearable
              type="datetime"
              style="width: 120px"
              placeholder="选择日期"
              @change="dateChange(search.startTime, 'startTime')"
              size="small"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime" label="结束时间">
            <el-date-picker
              class="measure-self-picker"
              v-model="search.endTime"
              clearable
              type="datetime"
              style="width: 120px"
              placeholder="选择日期"
              @change="dateChange(search.endTime, 'endTime')"
              size="small"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="searchDatas"
              v-loading.fullscreen.lock="operateLoading"
              v-privilege="activeMenu + 'SEARCH'"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="historySearchData"
              v-loading.fullscreen.lock="operateLoading"
              v-privilege="activeMenu + 'HISTORYSEARCH'"
              >历史查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="24">
          <div style="border-right: 1px solid #d5d5d5">
            <div class="common-title-div">计量预报管理</div>
            <div class="common-table-div">
              <el-table
                v-loading="dataLoading"
                :row-class-name="tableRowClassName"
                ref="dataTable"
                highlight-current-row
                border
                :height="tableHeight"
                :data="table.list"
                :exchangeFilterMap="{
                  valueFlag: {
                    '0': '未配车',
                    '1': '未使用',
                    '2': '已使用',
                    '3': '已作废',
                    '4': '正使用',
                  },
                  predictionType: {
                    '0': '批次预报',
                    '1': '单次预报',
                    '2': '联运预报',
                    '3': '分检预报',
                  },
                  usedType: { '0': '次数', '1': '时间', '2': '总量' },
                }"
                :icore-filter-flag="icoreFilterFlag"
                >>
                <el-table-column
                  type="index"
                  label="序号"
                  fixed="left"
                  align="center"
                ></el-table-column>
                <el-table-column
                  type="selection"
                  width="55"
                  fixed="left"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="valueFlag"
                  label="状态"
                  width="60"
                  min-width="100"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.valueFlag == 0">未配车</span>
                    <span v-else-if="scope.row.valueFlag == 1">未使用</span>
                    <span v-else-if="scope.row.valueFlag == 2">已使用</span>
                    <span v-else-if="scope.row.valueFlag == 3">已作废</span>
                    <span v-else-if="scope.row.valueFlag == 4">正使用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="predictionType"
                  min-width="100"
                  label="预报类型"
                  align="left"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.predictionType == 0">批次预报</span>
                    <span v-else-if="scope.row.predictionType == 1"
                      >单次预报</span
                    >
                    <span v-else-if="scope.row.predictionType == 2"
                      >联运预报</span
                    >
                    <span v-else-if="scope.row.predictionType == 3"
                      >分检预报</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="predictionNo"
                  label="预报编号"
                  min-width="120"
                  align="left"
                ></el-table-column>
                <!-- <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="noticeNo"
                  label="通知单号"
                  min-width="110"
                  align="center"
                ></el-table-column> -->
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="carNo"
                  label="车号"
                  min-width="80"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="trailerNo"
                  label="挂号"
                  min-width="80"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="railwayNo"
                  min-width="100"
                  label="火车车号(集装箱号)"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="matterName"
                  label="物资名称"
                  min-width="120"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="shipmentNum"
                  min-width="100"
                  label="发运数量"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="contractNo"
                  label="合同号"
                  min-width="100"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="batchNo"
                  min-width="110"
                  label="批次号"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="customerSupplierName"
                  min-width="160"
                  label="供应商"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="forwardingUnitName"
                  min-width="160"
                  label="发货单位"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="receivingUintName"
                  min-width="160"
                  label="收货单位"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="materialName"
                  min-width="100"
                  label="材质"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="specName"
                  min-width="100"
                  label="规格"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="shipmentGrossWeight"
                  min-width="100"
                  label="发运毛重"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="shipmentNetWeight"
                  min-width="100"
                  label="发运净重"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="addWeightSum"
                  min-width="100"
                  label="附加重量总和"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="bindCardNo"
                  min-width="200"
                  label="绑定卡号"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="loadPointName"
                  min-width="100"
                  label="卸货地点"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="sampleNo"
                  min-width="160"
                  label="取样编号"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="sampleVoucher"
                  min-width="100"
                  label="取样凭证"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="carrierUnitName"
                  min-width="100"
                  label="承运单位"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="predictionCombination"
                  min-width="300"
                  label="预报组合"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="meterTypeName"
                  min-width="100"
                  label="业务类型"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="usedType"
                  min-width="100"
                  label="可用类型"
                  align="left"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.usedType == 0">次数</span>
                    <span v-else-if="scope.row.usedType == 1">时间</span>
                    <span v-else-if="scope.row.usedType == 2">总量</span>
                  </template>
                </el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="effectiveStartTime"
                  min-width="160"
                  label="有效开始时间"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="effectiveEndTime"
                  min-width="160"
                  label="有效结束时间"
                  align="left"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="effectiveWeight"
                  min-width="100"
                  label="有效总量"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="effectiveNum"
                  min-width="100"
                  label="有效次数"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="meterWeight"
                  min-width="100"
                  label="检斤重量"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="meterNum"
                  min-width="100"
                  label="检斤次数"
                  align="right"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="carAllocationTime"
                  min-width="160"
                  label="配车时间"
                  align="left"
                ></el-table-column>

                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  prop="memo"
                  min-width="200"
                  label="备注"
                  align="left"
                ></el-table-column>
              </el-table>
            </div>
            <div class="common-foot-style">
              <el-pagination
                v-loading="dataLoading"
                @size-change="pageSizeChange"
                @current-change="pageCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[100, 500, 1000]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalPage"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/util.js';
export default {
  data () {
    return {
      dataLoading: false,
      operateLoading: false,
      actualFirst: {},
      meterTypeNameItem: [],
      matterNameItem: [],
      valueFlagItem: [
        { valueFlag: '未配车' },
        { valueFlag: '未使用' },
        { valueFlag: '已使用' },
        { valueFlag: '已作废' },
        { valueFlag: '正使用' }
      ],
      predictionTypeItem: [
        { id: '0', predictionType: '批次预报' },
        { id: '1', predictionType: '单次预报' },
        { id: '2', predictionType: '联运预报' },
        { id: '3', predictionType: '分检预报' }
      ],//预报类型
      icoreFilterFlag: true,
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      table: {
        list: [],
        list2: []
      },
      multipleSelection: [],
      tableHeight: 0,
      search: {
        predictionNo: '',
        carNo: '',
        meterTypeName: '',
        matterNo: '',
        valueFlag: '',
        predictionType: '',
        startTime: '',
        endTime: '',
        contractNo: '',
        railwayNo: ''
      },
      ruleValidateSearch: {},
      activeMenu: ''
    }
  },
  created () {
    this.tableHeight = (window.innerHeight - 220) > 200 ? (window.innerHeight - 220) : 200
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
  },
  mounted () {
    this.searchData();
    this.getMeterTypeNameItem();//业务类型
  },
  methods: {
    getCode (code, arr, codeKey, nameKey) {
      if (!code) {
        return '';
      }
      let targetRow = arr.find(item => {
        return item[codeKey] === code;
      });
      return targetRow ? targetRow[nameKey] : '';
    },
    getMatterName (val) {
      this.axios.get('pass/systemBase/v1/meterbasematterinfos/noPage' + '?validFlag=1' + '&matterName=' + val)
        .then(res => {
          this.matterNameItem = res.data;
        })
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchData();
    },
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchData();
    },
    searchDatas () {
      this.page.pageNum = 1;
      this.searchData()
    },
    searchData (val) {
      this.$refs['searchData1'].validate((valid) => {
        if (valid) {
          this.dataLoading = true;
          this.search.valueFlag1 = this.search.valueFlag === '未配车' ? 0 : this.search.valueFlag === '未使用' ? 1 : this.search.valueFlag === '已使用' ? 2 : this.search.valueFlag === '已作废' ? 3 : this.search.valueFlag === '正使用' ? 4 : ''
          this.search.predictionType1 = this.search.predictionType === '批次预报' ? 0 : this.search.predictionType === '单次预报' ? 1 : this.search.predictionType === '联运预报' ? 2 : this.search.predictionType === '分检预报' ? 3 : ''
          this.axios.get('pass/systemBase/v1/pretrackscales/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&carNo=' + this.search.carNo + '&predictionNo=' + this.search.predictionNo
            + '&predictionType=' + this.search.predictionType1 + '&meterTypeName=' + this.search.meterTypeName + '&matterNo=' + this.search.matterNo + '&valueFlag=' + this.search.valueFlag1 +
            `&startTime=${this.search.startTime}&endTime=${this.search.endTime}&contractNo=${this.search.contractNo}&railwayNo=${this.search.railwayNo}`)
            .then(res => {
              this.dataLoading = false;
              this.table.list = res.data.list;
              this.page.totalPage = res.data.total;
              if (!val) {
                if (res.data.list.length > 0) {
                  let firstRow = res.data.list[0]
                  this.$refs.dataTable.setCurrentRow(firstRow)
                  this.getDataList2(firstRow)
                }
              }
            }).catch(e => {
              this.dataLoading = false;
            });
        }
      })
    },
    dateChange (val, name) {
      if (val) {
        this.search[name] = formatDate(val)
      } else {
        this.search[name] = ''
      }
    },
    historySearchData () {
      this.$refs['searchData1'].validate((valid) => {
        if (valid) {
          this.dataLoading = true;
          this.search.valueFlag1 = this.search.valueFlag === '未配车' ? 0 : this.search.valueFlag === '未使用' ? 1 : this.search.valueFlag === '已使用' ? 2 : this.search.valueFlag === '已作废' ? 3 : this.search.valueFlag === '正使用' ? 4 : ''
          this.search.predictionType1 = this.search.predictionType === '批次预报' ? 0 : this.search.predictionType === '单次预报' ? 1 : this.search.predictionType === '联运预报' ? 2 : this.search.predictionType === '分检预报' ? 3 : ''
          this.axios.get('pass/systemBase/v1/pretrackscales/selectView' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&carNo=' + this.search.carNo + '&predictionNo=' + this.search.predictionNo
            + '&predictionType=' + this.search.predictionType1 + '&meterTypeName=' + this.search.meterTypeName + '&matterNo=' + this.search.matterNo + '&valueFlag=' + this.search.valueFlag1 + `&startTime=${this.search.startTime}&endTime=${this.search.endTime}`)
            .then(res => {
              this.dataLoading = false;
              this.table.list = res.data.list;
              this.page.totalPage = res.data.total;
              if (res.data.list.length > 0) {
                let firstRow = res.data.list[0]
                this.$refs.dataTable.setCurrentRow(firstRow)
                this.getDataList2(firstRow)
              }
            }).catch(e => {
              this.dataLoading = false;
            });
        }
      })
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.valueFlag === '3') {
        return 'error-row2';
      }
      return '';
    },
    getMeterTypeNameItem () {
      this.axios.get('pass/systemBase/v1/combaseinfos/noPage' + '?pBaseCode=001006' + '&validFlag=1')
        .then(res => {
          this.meterTypeNameItem = res.data;
        })
    },
  }
}
</script>
<style>
.measure-self-picker .el-input__inner {
  padding: 0px 0px 0px 4px !important;
}

.measure-self-picker .el-icon-time {
  display: none;
}
</style>