
<!--计量卡管理-->
<template>
  <div class="systemBase">
    <div class="common-container-deriction">
      <div class="common-title-div">计量卡管理
        <div class="common-operation-unload-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="warning" plain icon="el-icon-remove-outline" v-loading.fullscreen.lock="operateLoading"
          @click="lossData"  v-privilege="activeMenu + 'LOSS'">挂失</el-button>
          <el-button size="mini" type="success" plain icon="el-icon-check" v-loading.fullscreen.lock="operateLoading"
          @click="recoveryData"  v-privilege="activeMenu + 'RECOVERY'">启用</el-button>
          <!-- <el-button size="mini" type="primary" icon="el-icon-download">导入</el-button> -->
          <div style="margin-left: 2px">
          <el-upload
          class="upload"
          action=""
          :multiple="false"
          :show-file-list="false"
          accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          :http-request="httpRequest">
          <el-button size="mini" type="primary" icon="el-icon-download"  v-privilege="activeMenu + 'IMPORT'">导入</el-button>
          </el-upload>
          </div>
        </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':'报废', '2':'待使用','3':'已使用'}}"
        :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 :show-overflow-tooltip="true" sortable min-width="120px" prop="cardNo" label="卡编号" align="center"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable prop="valueFlag" min-width="70px" label="状态" 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>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable min-width="200px" prop="memo" label="备注" align="center"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable min-width="80px" prop="createManName" label="创建人" align="center"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable min-width="160px" prop="createTime" label="创建时间" align="center"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable min-width="80px" prop="updateManName" label="修改人" align="center"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" sortable 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="cardNo" label="卡编号">
                <el-input v-model="baseData.cardNo" clearable size="mini" placeholder="请输入" style="width:150px;"></el-input>
              </el-form-item>
              <el-form-item prop="memo" label="备注">
                <el-input v-model="baseData.memo" clearable size="mini" placeholder="请输入" style="width:150px;"></el-input>
              </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    meterbasecards
  } from '../../../utils/api.js';
  import {
    Delete,
    Recovery,
    add,
    modify,
    discard,
    loss,
    upload
  } from '../../../utils/httpRequest.js';
  import pinyinUtils from '../../../utils/pinyin/pinyinUtils.js'
  import XLSX from 'xlsx'
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        baseData: {
          cardNo: '',
          memo: ''
        },
        icoreFilterFlag: true,
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        list: [],
        valueFlag1: '',
        multipleSelection: [],
        tableHeight: 0,
        ruleValidate: {
          cardNo: [{
            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.tableHeight = this.getTableHeight(this.$refs['dataTable'].$el) - 80;
      this.getDataList();
    },
    methods: {
      rowChange (row, column, event) {
        let row1 = Object.assign ({}, row)
        this.baseData = row1;
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            let baseDataAdd = {};
            baseDataAdd.cardNo = _this.baseData.cardNo;
            baseDataAdd.memo = _this.baseData.memo;
            add(meterbasecards, baseDataAdd, (e) => {
              _this.operateLoading = false;
              _this.getDataList();
              _this.baseData.cardNo = '';
              _this.baseData.memo = '';
              if (!e) {
                _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
              }
            })
          }
        });
      },
      modifyData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            _this.operateLoading = true;
            modify(meterbasecards + _this.baseData.cardNo + '/', _this.baseData, (e) => {
              _this.operateLoading = false;
              _this.getDataList();
              _this.baseData.cardNo = '';
              _this.baseData.memo = '';
              _this.baseData.updateManName = '';
              if (!e) {
                _this.$refs['baseData'].resetFields && _this.$refs['baseData'].resetFields();
              }
            })
          }
        });
      },
      recoveryData () {
        let _this = this;
        _this.operateLoading = true;
        Recovery(meterbasecards + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      lossData () {
         let _this = this;
        _this.operateLoading = true;
        loss(meterbasecards + 'loss', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        });
      },
      httpRequest (e) {
      let file = e.file // 文件信息
      if (!file) {
          // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据自己需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }
        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          let _this = this;
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary' // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0] // 取第一张表
            _this.jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
            for (var j = 0; j < _this.jsonData.length; j++) {
              // 按照生成jsonData 的数据格式 处理 生成所需表格
               if (_this.jsonData[j]['状态'] === '报废') {
                  _this.valueFlag1 = 0
                } else if (_this.jsonData[j]['状态'] === '挂失') {
                  _this.valueFlag1 = 1
                } else if (_this.jsonData[j]['状态'] === '待使用') {
                  _this.valueFlag1 = 2
                } else if (_this.jsonData[j]['状态'] === '已使用') {
                  _this.valueFlag1 = 3
                }
              _this.list.push({
                valueFlag: _this.valueFlag1,
                memo: _this.jsonData[j]['备注']
              })
            }
            _this.operateLoading = true;
            upload(meterbasecards + 'list', _this.list, (e) => {
              _this.operateLoading = false;
              _this.list = [];
              _this.getDataList();
              if (!e) {
                _this.getDataList();
              }
            });
          } catch (e) {
            return false
          }
      }
      fileReader.readAsBinaryString(file)
     },
       abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbasecards + '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(meterbasecards + '?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;
          });
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (row.valueFlag === '0') {
          return 'error-row2';
        } else if (row.valueFlag === '1') {
          return 'loss-row';
        } else if (row.valueFlag === '2') {
          return 'wait-row';
        }
        return '';
      }
      // myBlur() {
      //   if (this.baseData.customerSupplierName) {
      //     this.baseData.mnemonicCode = pinyinUtils.initial(this.baseData.customerSupplierName);
      //   }
      // }
    }
  }
</script>
<style scoped>
  .el-select {
    width: 100%;
  }
</style>
