<!--计量卸货时间管理-->
<template>
  <div class="systemBase">
    <div>
      <div class="common-title-div">
        计量卸货时间管理
        <div class="common-operation-button-div">
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="mini"
            v-loading.fullscreen.lock="operateLoading"
            @click="addData"
            v-privilege="activeMenu + 'ADD'"
            >新增</el-button
          >
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="mini"
            v-loading.fullscreen.lock="operateLoading"
            @click="modifyData"
            v-privilege="activeMenu + 'UPDATE'"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            plain
            icon="el-icon-delete"
            v-loading.fullscreen.lock="operateLoading"
            @click="deleteData"
            v-privilege="activeMenu + 'DELETE'"
            >删除</el-button
          >
        </div>
      </div>
      <div class="common-table-div">
        <el-table
          v-loading="dataLoading"
          @row-click="rowChange"
          ref="dataTable"
          highlight-current-row
          border
          :height="tableHeight"
          @selection-change="handleSelectionChange"
          :data="table.list"
          :icore-filter-flag="icoreFilterFlag"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            align="center"
          ></el-table-column>
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="matterNo"
            label="物资编码"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="matterName"
            label="物资名称"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="baseSpotNo"
            label="计量点编号"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="baseSpotName"
            label="计量点名称"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="loadPointNo"
            label="卸货点编号"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="loadPointName"
            label="卸货点名称"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="100px"
            prop="loadTime"
            label="间隔时间（M）"
            align="right"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="200px"
            prop="memo"
            label="备注"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="80px"
            prop="createManName"
            label="创建人"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="160px"
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="80px"
            prop="updateManName"
            label="修改人"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            :show-overflow-tooltip="true"
            min-width="160px"
            prop="updateTime"
            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="[100, 500, 1000]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalPage"
        >
        </el-pagination>
      </div>
      <!-- <div ref="editTitle" class="common-title-div" style="border-top: 1px solid #d5d5d5;">编辑区
      </div> -->
      <div
        ref="editDiv"
        class="commom-edit-div"
        style="border-top: 1px solid #d5d5d5; margin-top: 10px"
      >
        <el-form
          ref="baseData"
          :inline="true"
          :rules="ruleValidate"
          :model="baseData"
        >
          <el-form-item prop="baseSpotNo" label="计量点">
            <el-select
              v-model="baseData.baseSpotNo"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 160px"
            >
              <el-option
                v-for="(item, index) in meteringPoint"
                :key="index"
                :label="item.baseSpotName"
                :value="item.baseSpotNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="matterNo" label="物资名称">
            <el-select
              v-model="baseData.matterNo"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 120px"
            >
              <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="loadPointNo" label="卸货点">
            <el-select
              v-model="baseData.loadPointNo"
              clearable
              filterable
              collapse-tags
              size="small"
              style="width: 160px"
            >
              <el-option
                v-for="(item, index) in balancePoint"
                :key="index"
                :label="item.loadPointName"
                :value="item.loadPointNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="loadTime" label="间隔时间(M)">
            <el-input
              v-model="baseData.loadTime"
              clearable
              size="small"
              placeholder="请输入"
              style="width: 120px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="memo" label="备注">
            <el-input
              v-model="baseData.memo"
              clearable
              size="small"
              placeholder="请输入"
              style="width: 160px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  meterbasespotinfos,
  meterbaseloadpoints,
  meterbaseunloadtimes
} from '../../../utils/api.js';
import {
  add,
  modify,
  Delete
} from '../../../utils/httpRequest.js';
export default {
  data () {
    return {
      dataLoading: false,
      operateLoading: false,
      icoreFilterFlag: true,
      meteringPointIndex: 0,
      balancePointIndex: 0,
      meteringPoint: [],
      balancePoint: [],
      baseData: {
        loadTime: '',
        memo: '',
        loadPointNo: '',
        baseSpotNo: '',
        matterNo: '',
        matterName: ''
      },
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      table: {
        list: []
      },
      multipleSelection: [],
      tableHeight: 600,
      ruleValidate: {
        loadTime: [{
          required: true,
          message: '间隔时间不能为空',
          trigger: 'change'
        }],
        loadPointNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
        baseSpotNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
        matterNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }]
      },
      activeMenu: '',
      matList: []
    }
  },
  created () {
    this.tableHeight = (window.innerHeight - 220) > 400 ? window.innerHeight - 220 : 400;
    this.activeMenu = window.top.localStorage.getItem('activeMenu')
  },
  mounted () {
    // this.tableHeight = this.getTableHeight(this.$refs['dataTable'].$el) - 80;
    this.getDataList();
    this.getDataList2();
    this.getDataList3();
    this.getMatterNameItem();
  },
  methods: {
    getMatterNameItem () {
      this.axios.get('pass/systemBase/v1/meterbasematterinfos/noPage' + '?validFlag=1')
        .then(res => {
          this.matList = res.data;
        })
    },
    getCode (code, arr, codeKey, nameKey) {
      if (!code) {
        return '';
      }
      let targetRow = arr.find(item => {
        return item[codeKey] === code;
      });
      return targetRow ? targetRow[nameKey] : '';
    },
    rowChange (row, column, event) {
      this.baseData = Object.assign({}, row);
    },
    addData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          let baseDataAdd = {};
          baseDataAdd.loadTime = _this.baseData.loadTime,
            baseDataAdd.memo = _this.baseData.memo,
            baseDataAdd.baseSpotNo = _this.baseData.baseSpotNo;
          baseDataAdd.loadPointNo = _this.baseData.loadPointNo;
          baseDataAdd.baseSpotName = _this.getCode(this.baseData.baseSpotNo, this.meteringPoint, 'baseSpotNo', 'baseSpotName');
          baseDataAdd.loadPointName = _this.getCode(this.baseData.loadPointNo, this.balancePoint, 'loadPointNo', 'loadPointName');
          baseDataAdd.matterName = _this.getCode(this.baseData.matterNo, this.matList, 'matterNo', 'matterName');
          baseDataAdd.matterNo = this.baseData.matterNo
          _this.operateLoading = true;
          add(meterbaseunloadtimes, baseDataAdd, (e) => {
            _this.operateLoading = false;
            _this.getDataList();
            if (!e) {
              _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
            }
          })
        }
      });
    },
    modifyData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.operateLoading = true;
          _this.baseData.baseSpotName = _this.getCode(this.baseData.baseSpotNo, this.meteringPoint, 'baseSpotNo', 'baseSpotName');
          _this.baseData.loadPointName = _this.getCode(this.baseData.loadPointNo, this.balancePoint, 'loadPointNo', 'loadPointName');
          _this.baseData.matterName = _this.getCode(this.baseData.matterNo, this.matList, 'matterNo', 'matterName');
          modify(meterbaseunloadtimes + _this.baseData.unloadTimeNo + '/', _this.baseData, (e) => {
            _this.operateLoading = false;
            _this.getDataList();
            if (!e) {
              _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
            }
          })
        }
      });
    },
    deleteData () {
      this.$confirm('确定删除选中的数据吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.operateLoading = true;
          Delete(meterbaseunloadtimes, this.multipleSelection, (e) => {
            this.operateLoading = false;
            if (!e) {
              this.getDataList();
            }
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面'
          })
        });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    getTableHeight (dom) {
      return (window.innerHeight - dom.offsetTop);
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.getDataList();
    },

    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.getDataList();
    },
    getDataList () {
      this.dataLoading = true;
      this.axios.get(meterbaseunloadtimes + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize)
        .then(res => {
          this.dataLoading = false;
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    getDataList2 () {
      this.axios.get(meterbasespotinfos + 'noPage' + '?validFlag=1&spotTypeName=汽车衡')
        .then(res => {
          this.meteringPoint = res.data;
          this.baseData.baseSpotNo = res.data.length > 0 ? res.data[0].baseSpotNo : ''
        });
    },
    getDataList3 () {
      this.axios.get(meterbaseloadpoints + 'noPage' + '?validFlag=1')
        .then(res => {
          this.balancePoint = res.data;
          this.baseData.loadPointNo = res.data.length > 0 ? res.data[0].loadPointNo : ''
        });
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>
