<!--计量附加重量配置-->
<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="100px"
          prop="addWeightNo"
          label="主键"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          min-width="100px"
          prop="utensilNo"
          label="器具编号"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          min-width="100px"
          prop="utensilName"
          label="器具名称"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          min-width="100px"
          prop="utensilWeight"
          label="器具重量（t）"
          align="right"
        >
          <template slot-scope="scope">
            {{ Math.floor((scope.row.utensilWeight - 0) / 10) / 100 }}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          :show-overflow-tooltip="true"
          min-width="100px"
          prop="utensilUtensilName"
          label="器具属性"
          align="center"
        ></el-table-column>
        <el-table-column
          sortable
          prop="valueFlag"
          :show-overflow-tooltip="true"
          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="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"
        :rules="ruleValidate"
        :inline="true"
        :model="baseData"
      >
        <el-form-item prop="utensilNo" label="器具编号">
          <el-input
            v-model="baseData.utensilNo"
            clearable
            size="small"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="utensilTypeNo" label="器具属性">
          <el-select
            v-model="baseData.utensilTypeNo"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in utensilUtensilNameType"
              :key="index"
              :label="item.baseName"
              :value="item.baseCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="utensilNameNo" label="器具名称">
          <el-select
            v-model="baseData.utensilNameNo"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in utensilNameType"
              :key="index"
              :label="item.baseName"
              :value="item.baseCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="utensilWeight" label="器具重量(kg)">
          <el-input
            v-model="baseData.utensilWeight"
            clearable
            size="small"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="memo" label="备注">
          <el-input
            v-model="baseData.memo"
            clearable
            size="small"
            style="width: 150px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  meterbaseaddweights,
  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,
      icoreFilterFlag: true,
      metterTypeIndex: 0,
      baseData: {
        utensilWeight: '0',
        utensilNo: '',
        utensilTypeNo: '',
        utensilNameNo: '',
        memo: ''
      },
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      table: {
        list: []
      },
      utensilNameType: [],
      utensilUtensilNameType: [],
      metterType: [],
      multipleSelection: [],
      tableHeight: 0,
      ruleValidate: {
        utensilWeight: [{
          required: true,
          message: '器具重量不能为空',
          trigger: 'change'
        }],
        utensilTypeNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
        utensilNameNo: [{
          required: true,
          message: '该项不能为空',
          trigger: 'change'
        }],
        utensilNo: [{
          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.getUtensilName();
    this.getUtensilUtensilName()
  },
  methods: {
    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);
      this.baseData.utensilWeight = Math.floor((this.baseData.utensilWeight - 0) / 10) / 100
    },
    addData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.operateLoading = true;
          let baseDataAdd = {};
          baseDataAdd.utensilWeight = _this.baseData.utensilWeight * 1000
          baseDataAdd.memo = _this.baseData.memo
          baseDataAdd.utensilNo = _this.baseData.utensilNo
          baseDataAdd.utensilNameNo = _this.baseData.utensilNameNo;
          baseDataAdd.utensilTypeNo = _this.baseData.utensilTypeNo;
          baseDataAdd.utensilName = _this.getCode(this.baseData.utensilNameNo, this.utensilNameType, 'baseCode', 'baseName');
          baseDataAdd.utensilUtensilName = _this.getCode(this.baseData.utensilTypeNo, this.utensilUtensilNameType, 'baseCode', 'baseName');
          add(meterbaseaddweights, 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.utensilWeight = _this.baseData.utensilWeight * 1000
          _this.baseData.utensilName = _this.getCode(this.baseData.utensilNameNo, this.utensilNameType, 'baseCode', 'baseName');
          _this.baseData.utensilUtensilName = _this.getCode(this.baseData.utensilTypeNo, this.utensilUtensilNameType, 'baseCode', 'baseName');
          modify(meterbaseaddweights + _this.baseData.addWeightNo + '/', _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(meterbaseaddweights + 'Recovery', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          _this.getDataList();
        }
      });
    },
    abolishData () {
      let _this = this;
      _this.operateLoading = true;
      discard(meterbaseaddweights + 'abolish', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          _this.getDataList();
        }
      });
    },
    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(meterbaseaddweights + '?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;
        });
    },
    getUtensilName () {
      this.axios.get(combaseinfos + 'noPage' + '?pBaseCode=001010' + '&validFlag=1')
        .then(res => {
          this.utensilNameType = res.data;
          this.baseData.utensilNameNo = res.data.length > 0 ? res.data[0].baseCode : ''
        })
    },
    getUtensilUtensilName () {
      this.axios.get(combaseinfos + 'noPage' + '?pBaseCode=001009' + '&validFlag=1')
        .then(res => {
          this.utensilUtensilNameType = res.data;
          this.baseData.utensilTypeNo = res.data.length > 0 ? res.data[0].baseCode : ''
        })
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.valueFlag !== '0') {
        return 'error-row2';
      }
      return '';
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>
