<!--危化品限载配置管理-->
<template>
  <div class="systemBase common-container-deriction">
    <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-remove-outline" v-loading.fullscreen.lock="operateLoading"
          @click="abolishData" v-privilege="activeMenu + 'ABOLISH'">废除</el-button>
        <el-button size="mini" type="primary" icon="el-icon-check" v-loading.fullscreen.lock="operateLoading"
          @click="recoveryData" v-privilege="activeMenu + 'RECOVERY'">启用</el-button>
      </div>
    </div>
    <div class="common-table-div">
      <el-table v-loading="dataLoading" @row-click="rowChange" ref="dataTable" :row-class-name="tableRowClassName" highlight-current-row
        border :height="tableHeight" @selection-change="handleSelectionChange" :data="table.list" :exchangeFilterMap="{'valueFlag':{'1':'无效','0':'有效'}}"
        :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="80px" prop="matterName" label="物料名称" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="limitTypeName" label="限制类型" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="80px" prop="limitClassName" label="限载种类" align="center"></el-table-column>
        <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="limitWeight" label="限载重量（kg）" 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" prop="valueFlag" min-width="60px" label="状态" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.valueFlag == 1">无效</span>
              <span v-else-if="scope.row.valueFlag == 0">有效</span>
          </template>
        </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" :rules="ruleValidate" :inline="true" :model="baseData">
            <el-form-item prop="matterName" label="物料名称">
              <el-select v-model="baseData.matterName" clearable filterable collapse-tags size="small" style="width:130px" :filter-method="getMatterName">
                  <el-option v-for="(item,index) in metterType" :key="index" :label="item.matterName" :value="item.matterName">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="limitTypeName" label="限载类型">
               <el-select v-model="baseData.limitTypeName" clearable filterable collapse-tags size="small" style="width:130px">
                  <el-option v-for="(item,index) in limitType" :key="index" :label="item.baseName" :value="item.baseName">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="limitClassName" label="限载种类">
               <el-select v-model="baseData.limitClassName" clearable filterable collapse-tags size="small"  style="width:130px" @change="selectTrigger(baseData.limitClassName)">
                  <el-option v-for="(item,index) in limitClassType" :key="index" :label="item.baseName" :value="item.baseName">
                  </el-option>
               </el-select>
            </el-form-item>
             <el-form-item prop="limitWeight" label="限载重量(kg)">
              <el-input v-model="baseData.limitWeight" clearable size="small" style="width:130px" :disabled="isReteValue" :readonly="isReteValue"></el-input>
            </el-form-item>
            <el-form-item prop="memo" label="备注">
              <el-input v-model="baseData.memo" clearable size="small" style="width:130px" placeholder="请输入"></el-input>
            </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
    meterbasematterinfos,
    meterbaselimitchemicals,
    combaseinfos
  } from '../../../utils/api.js';
  import {
    Delete,
    Recovery,
    add,
    modify,
    discard
  } from '../../../utils/httpRequest.js';
  import pinyinUtils from '../../../utils/pinyin/pinyinUtils.js'
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        // limitTypeIndex: 0,
        // limitClassTypeIndex: 0,
        // metterTypeIndex: 0,
        icoreFilterFlag: true,
        isReteValue: false,
        baseData: {
         limitWeight: '',
         memo: '',
         matterName: '',
         limitTypeName: '',
         limitClassName:''
        },
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        limitType: [],
        limitClassType: [],
        metterType: [],
        multipleSelection: [],
        tableHeight: 0,
        ruleValidate: {
          limitWeight: [{
            required: true,
            validator: this.limitWeightIsEmpty,
            trigger: 'change'
          }],
          matterName: [{
            required: true,
            message: '该项不能为空',
            trigger: 'change'
          }],
          limitTypeName: [{
            required: true,
            message: '该项不能为空',
            trigger: 'change'
          }],
          limitClassName: [{
            required: true,
            message: '该项不能为空',
            trigger: 'change'
          }],
        },
        activeMenu: ''
      }
    },
    created () {
      this.tableHeight = (window.innerHeight - 220) > 400 ? window.innerHeight - 220 :400
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.getDataList();
      // this.getMetterTypeList();
      this.getLimitType();
      this.getLimitClassType()
    },
    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.metterType = res.data;
         })
      },
      rowChange (row, column, event) {
        this.baseData = Object.assign ({}, row)
         this.axios.get('pass/systemBase/v1/meterbasematterinfos/noPage'+ '?validFlag=1' + '&matterNo='+ this.baseData.matterNo)
         .then(res => {
           this.metterType = res.data;
         })
        if (row.limitClassName === '跟车重量') {
          this.baseData.limitWeight = '';
          this.isReteValue= true;
          this.ruleValidate.limitWeight[0].required = false;
        } else {
          this.isReteValue= false;
          this.ruleValidate.limitWeight[0].required = true;
        }
      },
      selectTrigger (limitClassName) {
        if (limitClassName === '跟车重量') {
          this.baseData.limitWeight = '';
          this.isReteValue= true;
          this.ruleValidate.limitWeight[0].required = false;
        } else {
          this.isReteValue= false;
          this.ruleValidate.limitWeight[0].required = true;
        }
      },
      limitWeightIsEmpty (rule, value, callback) {
        if (this.baseData.limitClassName === '固定重量' && (this.baseData.limitWeight === '' || this.baseData.limitWeight === null)) {
          return callback(new Error('限载重量不能为空'))
        } else {
          return callback()
        }
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            let baseDataAdd = {};
            baseDataAdd.limitWeight = _this.baseData.limitWeight
            baseDataAdd.memo = _this.baseData.memo
            baseDataAdd.limitTypeName = _this.baseData.limitTypeName;
            baseDataAdd.limitClassName =  _this.baseData.limitClassName;
            baseDataAdd.matterName =   _this.baseData.matterName;
            baseDataAdd.limitTypeNo = _this.getCode(this.baseData.limitTypeName, this.limitType, 'baseName', 'baseCode');
            baseDataAdd.limitClassNo = _this.getCode(this.baseData.limitClassName, this.limitClassType, 'baseName', 'baseCode');
            baseDataAdd.matterNo = _this.getCode(this.baseData.matterName, this.metterType, 'matterName', 'matterNo');
            add(meterbaselimitchemicals, 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.limitTypeNo = _this.getCode(this.baseData.limitTypeName, this.limitType, 'baseName', 'baseCode');
            _this.baseData.limitClassNo = _this.getCode(this.baseData.limitClassName, this.limitClassType, 'baseName', 'baseCode');
            _this.baseData.matterNo = _this.getCode(this.baseData.matterName, this.metterType, 'matterName', 'matterNo');
            modify(meterbaselimitchemicals + _this.baseData.limitChemicalNo + '/', _this.baseData, (e) => {
              _this.operateLoading = false;
              _this.getDataList();
              if (!e) {
                _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
              }
            })
          }
        });
      },
      recoveryData () {
        let _this = this;
        _this.operateLoading = true;
        Recovery(meterbaselimitchemicals + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbaselimitchemicals + 'abolish', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.getDataList();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.getDataList();
      },
      getDataList () {
        this.dataLoading = true;
        this.axios.get(meterbaselimitchemicals + '?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;
          });
      },
      getLimitType () {
         this.axios.get(combaseinfos + 'noPage' +  '?pBaseCode=001015' + '&validFlag=1')
          .then(res => {
            this.limitType = res.data;
            this.baseData.limitTypeName = res.data[0].baseName
          })
      },
      getLimitClassType () {
         this.axios.get(combaseinfos + 'noPage' + '?pBaseCode=001016' + '&validFlag=1')
          .then(res => {
            this.limitClassType = res.data;
            this.baseData.limitClassName = res.data[0].baseName
          })
      },
      //  getMetterTypeList () {
      //   this.axios.get(meterbasematterinfos + 'noPage'+ '?validFlag=1')
      //     .then(res => {
      //       this.metterType = res.data;
      //       this.baseData.matterName = res.data[0].matterName
      //     })
      //  },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (row.valueFlag !== '0') {
          return 'error-row2';
        }
        return '';
      }
     }
  }
</script>

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