<!--复磅配置页面-->
<template>
  <div class="systemBase">
    <el-row>
      <el-col :span="24">
        <div
          style="
            margin-top: 10px;
            border-bottom: 1px solid #d5d5d5;
            padding-left: 12px;
          "
        >
          <el-form ref="searchData" :inline="true" :model="searchForm">
            <el-form-item prop="carNo" label="车号">
              <el-input
                v-model="searchForm.carNo"
                clearable
                size="small"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="matterNo" label="物资名称">
              <el-select
                v-model="searchForm.matterNo"
                clearable
                filterable
                size="mini"
                style="width: 100px"
                :filter-method="matFilter"
              >
                <el-option
                  v-for="item in matList"
                  :key="item.matterNo"
                  :label="item.matterName"
                  :value="item.matterNo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="forwardingUnitNo" label="发货单位">
              <el-select
                v-model="searchForm.forwardingUnitNo"
                clearable
                filterable
                size="mini"
                style="width: 100px"
                :filter-method="
                  (val) => unitFilter(val, 'sdrList', 'forwardingUnitName')
                "
              >
                <el-option
                  v-for="item in unitObj.sdrList"
                  :key="item.customerSupplierNo"
                  :label="item.customerSupplierName"
                  :value="item.customerSupplierNo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="receivingUnitNo" label="收货单位">
              <el-select
                v-model="searchForm.receivingUnitNo"
                clearable
                filterable
                size="mini"
                style="width: 100px"
                :filter-method="
                  (val) => unitFilter(val, 'rcvList', 'receivingUintName')
                "
              >
                <el-option
                  v-for="item in unitObj.rcvList"
                  :key="item.customerSupplierNo"
                  :label="item.customerSupplierName"
                  :value="item.customerSupplierNo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="baseSpotNo" label="计量点">
              <el-select
                v-model="searchForm.baseSpotNo"
                clearable
                filterable
                size="mini"
                style="width: 100px"
              >
                <el-option
                  v-for="item in spotList"
                  :key="item.baseSpotNo"
                  :label="item.baseSpotName"
                  :value="item.baseSpotNo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="20px">
              <el-button
                icon="el-icon-search"
                type="primary"
                size="mini"
                @click="searchActualData(1)"
                v-privilege="activeMenu + 'QUERY'"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item label-width="20px">
              <el-button
                icon="el-icon-circle-plus-outline"
                type="primary"
                size="mini"
                @click="addData"
                v-privilege="activeMenu + 'ADD'"
                >新增复磅记录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" style="border-right: 1px solid #d5d5d5">
        <div>
          <div class="common-title-div"><span style="font-weight: 500; font-size: 18px"
                  >一次计量数据</span></div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading"
            :row-class-name="tableRowClassName"
            @row-click="rowChange"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            :data="table.list"
            :icore-filter-flag="icoreFilterFlag"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="predictionNo"
              label="预报编号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="carNo"
              label="车号"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="matterName"
              min-width="120"
              label="物资名称"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="forwardingUnitName"
              min-width="120"
              label="发货单位"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="receivingUintName"
              min-width="120"
              label="收货单位"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="baseSpotName"
              min-width="120"
              label="计量点"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="meterWeight"
              min-width="120"
              label="计量重量"
              align="left"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              prop="createTime"
              min-width="120"
              label="计量时间"
              align="center"
            ></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="[50, 100, 200, 400]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="border-right: 1px solid #d5d5d5">
          <div class="common-title-div"><span style="font-weight: 500; font-size: 18px"
                  >计量点数据</span></div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading2"
            :row-class-name="tableRowClassName2"
            ref="dataTable"
            highlight-current-row
            border
            :height="tableHeight"
            :data="table.list2"
            @current-change="currentChange2"
            :icore-filter-flag="icoreFilterFlag"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              :show-overflow-tooltip="true"
              min-width="100"
              prop="baseSpotName"
              label="计量点名称"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div
          style="border-right: 1px solid #d5d5d5; border-top: 1px solid #d5d5d5"
        >
          <div class="common-title-div-1">
            <el-form :inline="true">
              <el-form-item label-width="80px"
                ><span style="font-weight: 500; font-size: 18px"
                  >复磅计量数据</span
                ></el-form-item
              >
              <el-form-item prop="baseSpotNo" label="计量点">
                <el-select
                  v-model="recoverForm.baseSpotNo"
                  clearable
                  filterable
                  size="mini"
                  style="width: 100px"
                >
                  <el-option
                    v-for="item in spotList"
                    :key="item.baseSpotNo"
                    :label="item.baseSpotName"
                    :value="item.baseSpotNo"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="valueFlag" label="状态">
                <el-select
                  v-model="recoverForm.valueFlag"
                  clearable
                  filterable
                  size="mini"
                  style="width: 100px"
                >
                  <el-option
                    v-for="item in valueFlagList"
                    :key="item.id"
                    :label="item.val"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="20px">
                <el-button size="mini" type="primary" @click="getRcoverData(1)"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item label-width="20px">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-remove-outline"
                  v-privilege="activeMenu + 'DELETE'"
                  @click="dropData"
                  >废除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="common-table-div">
          <el-table
            v-loading="dataLoading3"
            ref="dataTable"
            highlight-current-row
            :height="tableHeight"
            border
            @row-click="handleSelectionChange3"
            :data="table.list3"
            :icore-filter-flag="icoreFilterFlag"
          >
            <el-table-column
              type="index"
              label="序号"
              fixed="left"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="carNo"
              label="车号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop=""
              label="是否复磅"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{
                  scope.row.valueFlag - 0 === 0
                    ? "未复磅"
                    : scope.row.valueFlag - 0 === 1
                    ? "已复磅"
                    : "作废"
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="matterName"
              label="物资名称"
              :show-overflow-tooltip="true"
              min-width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="forwardingUnitName"
              label="发货单位"
              align="center"
              :show-overflow-tooltip="true"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="receivingUintName"
              label="收货单位"
              align="center"
              :show-overflow-tooltip="true"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="meterWeight"
              label="计量重量"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="baseSpotName"
              label="计量点"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="meterTime"
              label="计量时间"
              :show-overflow-tooltip="true"
              min-width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="recMeterWeight"
              label="复磅重量"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="recBaseSpotName"
              label="复磅计量点"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="recMeterTime"
              :show-overflow-tooltip="true"
              label="复磅计量时间"
              min-width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="操作"
              min-width="120"
              align="center"
              fixed="right"
            >
            <template slot-scope="{ row }">
              <el-button type="primary" size="mini" @click="showMemoDialog(row)">添加备注</el-button>
            </template>
            </el-table-column>
            <!-- <el-table-column
              prop="createManName"
              :show-overflow-tooltip="true"
              label="创建人"
              align="center"
            ></el-table-column> -->
          </el-table>
        </div>
        <div class="common-foot-style">
          <el-pagination
            v-loading="dataLoading3"
            @size-change="pageSizeChange3"
            @current-change="pageCurrentChange3"
            :current-page="page3.pageNum"
            :page-sizes="[100, 200, 400]"
            :page-size="page3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page3.totalPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog @close="closeDialog" :visible.sync="memoDialogFlag" title="添加备注">
      <el-form
        ref="baseData"
        label-width="80px"
        :rules="ruleValidate"
        :model="baseData"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="matName" label="物料">
              <el-input
                v-model="baseData.matName"
                style="width: 100%"
                readonly
                disabled
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="strNo" label="留样仓库">
              <!-- <el-select
                v-model="baseData.strNo"
                filterable
                style="width: 100%"
                collapse-tags
                size="small"
              >
                <el-option
                  v-for="(item, index) in trNameType"
                  :key="index"
                  :label="item.strName"
                  :value="item.strNo"
                >
                </el-option>
              </el-select> -->
              <el-cascader
                size="small"
                :options="options"
                @change="selectChange"
                change-on-select
                :props="props"
                v-model="selectList"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="memo" label="备注">
              <el-input v-model="baseData.memo" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="goon"
          size="mini"
          icon="el-icon-check"
          :loading="addLoading"
          @click="modifyData()"
          >确定</el-button
        >
        <el-button
          size="mini"
          type="goon"
          icon="el-icon-remove-outline"
          @click="closeDialog"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCookie } from '@/utils/util.js';
import { cookieUserId, cookieUserName } from '@/config/config.js';
import { MessageBox } from 'element-ui'

export default {
  data () {
    return {
      icoreFilterFlag: true,
      dataLoading: false,
      dataLoading2: false,
      dataLoading3: false,
      multipleSelection: {},
      multipleSelection2: {},
      multipleSelection3: {},
      table: {
        list: [],
        list2: [],
        list3: []
      },
      searchForm: {
        carNo: '',
        matterNo: '',
        forwardingUnitNo: '',
        receivingUnitNo: '',
        baseSpotNo: ''
      },
      page: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      page3: {
        pageSize: 100,
        pageNum: 1,
        totalPage: 0
      },
      recoverForm: {
        baseSpotNo: '',
        valueFlag: ''
      },
      activeMenu: '',
      orgTree: [],
      multipleSelection1: [],
      //  默认配置数据对应项
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      selectedData: {},
      groupListU: [8],
      groupListL: [8],
      groupListG: [8],
      matList: [], // 物资名称
      unitObj: {
        sdrList: [],
        rcvList: []
      }, // 单位数据
      allMatList: [], // 所有物资数据
      allUnitList: [], // 所有单位数据
      userNo: '',
      userName: '',
      spotList: [],
      valueFlagList: [
        {
          id: '0',
          val: '未复磅'
        },
        {
          id: '1',
          val: '已复磅'
        },
        {
          id: '2',
          val: '已作废'
        }
      ],
      memoDialogFlag: false,
      addLoading: false,
      selectedRow: {
        memo: ''
      }
    }
  },
  async created () {
    this.userNo = getCookie(cookieUserId)
    this.userName = getCookie(cookieUserName)
    this.tableHeight = (window.innerHeight - 290) / 2 > 250 ? (window.innerHeight - 290) / 2 : 250
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
  },
  mounted () {
    this.searchDatas()
  },
  methods: {
    // 分别查询三张表的数据
    async searchDatas () {
      this.searchActualData(1)
      this.searchPointData(1)
      this.getRcoverData(1)
      this.matQuery();
      this.unitQuery();
    },
    // 分页一次计量数据
    searchActualData (flag) {
      this.dataLoading = true
      if (flag === 1) {
        this.page.pageNum = 1
      }
      this.searchForm.valueFlag1 = '1'
      this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&carNo=' + this.searchForm.carNo
        + '&baseSpotNo=' + this.searchForm.baseSpotNo + '&matterNo=' + this.searchForm.matterNo + '&valueFlag=9'
        + `&forwardingUnitNo=${this.searchForm.forwardingUnitNo}&receivingUnitNo=${this.searchForm.receivingUnitNo}`)
        .then(res => {
          this.dataLoading = false;
          this.table.list = res.data.list;
          if (res.data.list.length < 64) {
            this.groupList = [20]
          } else {
            this.groupList = [20, 2]
          }
          this.page.totalPage = res.data.total;
          if (res.data.list.length > 0) {
            let firstRow = res.data.list[0]
            this.$refs.dataTable.setCurrentRow(firstRow)
          }
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    // 物资数据
    async matQuery () {
      this.axios.get('pass/systemBase/v1/meterbasematterinfos/noPage' + '?validFlag=1')
        .then(res => {
          this.allMatList = [...res.data]
          this.matList = [...this.allMatList].slice(0, 200)
        })
    },
    // 收发货单位
    async unitQuery () {
      const { data: res } = await this.axios.get('pass/systemBase/v1/meterbasecustomersuppliers/like/?pageNum=1&pageSize=100000&checkFlag=1&validFlag=1');
      this.allUnitList = [...res.list];
      this.unitObj.sdrList = [...res.list].slice(0, 200);
      this.unitObj.rcvList = [...res.list].slice(0, 200);
    },
    // 新增复磅记录
    async addData () {
      if (!this.multipleSelection || JSON.stringify(this.multipleSelection) === "{}") {
        return this.$message.error('请选择一次计量数据')
      }
      if (!this.multipleSelection2 || JSON.stringify(this.multipleSelection2) === "{}") {
        return this.$message.error('请选择磅点数据')
      }
      // 拼接参数对象
      let param = {
        ...this.multipleSelection,
        meterTime: this.multipleSelection2.createTime,
        createManNo: this.multipleSelection2.baseSpotNo,
        createManName: this.multipleSelection2.baseSpotName
      }
      const res = await this.axios.post('pass/systemBase/v1/meterworkcarrecovers/insert', param, { individualType: 'json' })
      if (res.status = 'succeed') {
        this.$message.success('新增成功')
        this.searchActualData(1)
        this.searchPointData(1)
        this.getRcoverData(1)
      } else {
        this.$message.error('新增失败')
      }
    },
    // 显示添加备注弹窗
    showMemoDialog (row) {
      this.memoDialogFlag = true
    },
    // 关闭添加备注弹窗
    closeDialog () {
      this.memoDialogFlag = false
    },
    // 给复磅记录添加备注
    async modifyData () {
      // 拼接参数对象
      let param = {
        ...this.multipleSelection,
        meterTime: this.multipleSelection2.createTime,
        createManNo: this.multipleSelection2.baseSpotNo,
        createManName: this.multipleSelection2.baseSpotName
      }
      const res = await this.axios.post('pass/systemBase/v1/meterworkcarrecovers/doUpadte', param, { individualType: 'json' })
      if (res.status = 'succeed') {
        this.$message.success('添加备注成功')
        this.searchActualData(1)
        this.searchPointData(1)
        this.getRcoverData(1)
      } else {
        this.$message.error('添加备注成功')
      }
    },
    // 分页查询卸货地点数据
    searchPointData (flag) {
      this.dataLoading2 = true
      if (flag === 1) {
        this.page2.pageNum = 1
      }
      this.axios.get('pass/systemBase/v1/meterbasespotinfos/?pageNum=1&pageSize=500&spotTypeName=汽车衡')
        .then(res => {
          this.dataLoading2 = false;
          this.table.list2 = res.data.list;
          this.page2.totalPage = res.data.total;
          this.spotList = [...res.data.list]
        }).catch(e => {
          this.dataLoading2 = false;
        });
    },
    // 分页查询人员和卸货地点数据
    async getRcoverData (flag) {
      this.dataLoading3 = true;
      if (flag === 1) {
        this.page3.pageNum = 1
      }
      const { data: res } = await this.axios.get(`pass/systemBase/v1/meterworkcarrecovers/?valueFlag=${this.recoverForm.valueFlag}&baseSpotNo=${this.recoverForm.baseSpotNo}&pageNum=${this.page3.pageNum}&pageSize=${this.page3.pageSize}`)
      if (res && res.list) {
        this.table.list3 = [...res.list]
        this.page3.totalPage = res.total;
      } else {
        this.table.list3 = []
      }
      this.dataLoading3 = false
    },
    rowChange (val) {
      this.multipleSelection = val
    },
    // 作废一条复磅记录数据
    dropData () {
      if (!this.multipleSelection3 || JSON.stringify(this.multipleSelection3) === "{}") {
        return this.$message.error('请选择要作废的复磅记录数据')
      }
      if (this.multipleSelection3.valueFlag - 0 === 2) {
        return this.$message.warning('选中的数据已经作废，不允许重复作废')
      }
      MessageBox.confirm('确认要作废该条复磅记录数据吗？', '提示信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.multipleSelection3.valueFlag = '2'
        let res = await this.axios.post('pass/systemBase/v1/meterworkcarrecovers/doUpadte', { ...this.multipleSelection3 }, { individualType: 'json' })
        if (res.status === 'succeed') {
          this.$message.success('作废成功')
          this.multipleSelection3 = {}
          this.searchActualData();
          this.searchPointData();
          this.getRcoverData()
        }
      }).catch(e => { })
    },
    // 卸货地点数据表格多选回调
    currentChange2 (val) {
      this.multipleSelection2 = { ...val }
    },
    // 关联数据多选回调
    handleSelectionChange3 (val) {
      this.multipleSelection3 = { ...val }
    },
    // 作废数据
    abolishData () {
      let ids = ''
      this.axios.delete(`pass/systemBase/v1/meterbaseloaduserloadinfos/${ids}`).then(res => {
        // console.log(res, '删除的返回结果')
        if (res.succeed) {
          this.$message.success(res.message);
          this.searchDatas()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    unitFilter (val, name, valName) {
      if (val) {
        let list = this.allUnitList.filter(item => {
          if (item.customerSupplierName.indexOf(val) !== -1) {
            return true
          }
        })
        this.unitObj[name] = [...list]
      } else {
        this.unitObj[name] = [...this.allUnitList].slice(0, 200)
      }
    },
    // 物资筛选
    matFilter (val) {
      if (val) {
        let list = this.allMatList.filter(item => {
          if (item.matterName.indexOf(val) !== -1) {
            return true
          }
        })
        this.matList = [...list].slice(0, 200)
      } else {
        this.matList = [...this.allMatList]
      }
    },
    // 页大小变化回调
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchUserData(1);
    },
    // 页跳转变化回调
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchUserData();
    },
    // 页大小变化回调
    pageSizeChange3 (size) {
      this.page2.pageSize = size;
      this.getUnloadRoleData(1);
    },
    // 页跳转变化回调
    pageCurrentChange3 (index) {
      this.page2.pageNum = index;
      this.getUnloadRoleData();
    },
    // 根据行属性设置行样式
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.validFlag == '0') {
        return 'error-row2';
      }
      return '';
    },
    // 根据行属性设置行样式
    tableRowClassName2 ({
      row,
      rowIndex
    }) {
      if (row.validFlag == '0') {
        return 'error-row2';
      }
      return '';
    }
  }
}
</script>
<style scoped>
.common-title-div-1 {
  font-size: 14px;
  padding: 10px 10px 0px 10px;
  border-bottom: 1px solid #d5d5d5;
  position: relative;
}
</style>