<!--车辆配置管理-->
<template>
  <div class="systemBase">
    <div>
      <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="primary"
            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-check"
            v-loading.fullscreen.lock="operateLoading"
            @click="distributeData"
            v-privilege="activeMenu + 'DISTRIBUTION'"
            >分配</el-button
          >
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-remove-outline"
            v-loading.fullscreen.lock="operateLoading"
            @click="separateData"
            v-privilege="activeMenu + 'SEPARATE'"
            >分离</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>
      <el-row>
        <el-col :span="12">
          <div style="margin-top: 4px; border-bottom: 1px solid #d5d5d5">
            <el-form ref="search" :inline="true" :model="search">
              <el-form-item label-width="70px">
                <div style="font-size: 14px; padding: 0px 20px">车辆信息</div>
              </el-form-item>
              <el-form-item prop="carNo" label="车号">
                <el-input
                  v-model="search.carNo"
                  size="small"
                  clearable
                  style="width: 130px"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item prop="valueFlag" label="状态">
                <el-select
                  v-model="search.valueFlag"
                  clearable
                  filterable
                  collapse-tags
                  size="mini"
                  style="width: 130px"
                >
                  <el-option
                    v-for="(item, index) in valueFlag"
                    :key="index"
                    :label="item.name"
                    :value="index"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="20px">
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  size="mini"
                  @click="searchDatas"
                  v-loading.fullscreen.lock="operateLoading"
                  v-privilege="activeMenu + 'SEARCH'"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="common-table-div">
            <el-table
              v-loading="dataLoading"
              :bigDataShow="groupList"
              @row-click="rowChange"
              ref="dataTable1"
              :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="cardNo"
                label="卡编号"
                align="center"
              ></el-table-column>
              <el-table-column
                sortable
                :show-overflow-tooltip="true"
                min-width="80px"
                prop="carNo"
                label="车号"
                align="center"
              ></el-table-column>
              <el-table-column
                sortable
                :show-overflow-tooltip="true"
                min-width="60px"
                prop="valueFlag"
                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>
          </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>
        </el-col>
        <el-col :span="12">
          <div class="common-title-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="handleSelectionChange2"
              :data="table.list2"
              :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="100px"
                prop="cardNo"
                label="卡编号"
                align="center"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                sortable
                min-width="200px"
                prop="memo"
                label="备注"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
          <div class="common-foot-style">
            <el-pagination
              v-loading="dataLoading"
              @size-change="pageSizeChange1"
              @current-change="pageCurrentChange1"
              :current-page="page2.pageNum"
              :page-sizes="[100, 500, 1000]"
              :page-size="page2.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page2.totalPage"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <!-- <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="carNo" label="车号">
            <el-input
              v-model="baseData.carNo"
              size="mini"
              clearable
              placeholder="请输入"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="memo" label="备注">
            <el-input
              v-model="baseData.memo"
              size="mini"
              clearable
              placeholder="请输入"
              style="width: 150px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  meterbasecarcards,
  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,
      icoreFilterFlag: true,
      search: {
        valueFlag: '',
        carNo: ''
      },
      baseData: {
        carNo: '',
        memo: ''
      },
      page: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      page2: {
        pageSize: 500,
        pageNum: 1,
        totalPage: 0
      },
      valueFlag: [
        { id: '0', name: '停役' },
        { id: '1', name: '服役' }
      ],
      table: {
        list: [],
        list2: []
      },
      list: [],
      valueFlag1: '',
      multipleSelection: [],
      multipleSelection2: [],
      multipleSelection3: {},
      tableHeight: 0,
      ruleValidate: {
        carNo: [{
          required: true,
          message: '车号不能为空',
          trigger: 'change'
        }]
      },
      activeMenu: '',
      groupList: [8, 1]
    }
  },
  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()
  },
  methods: {
    rowChange (row, column, event) {
      let row1 = Object.assign({}, row)
      this.baseData = row1;
    },
    searchDatas () {
      this.page.pageNum = 1;
      this.searchData()
    },
    searchData () {
      this.$refs.dataTable1.bodyWrapper.scrollTop = 0;
      this.dataLoading = true;
      this.icoreFilterFlag = false
      this.axios.get(meterbasecarcards + 'like/?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize +
        '&carNo=' + this.search.carNo + '&valueFlag=' + this.search.valueFlag)
        .then(res => {
          if (res.data.list.length < 64) {
            this.groupList = [8]
          } else {
            this.groupList = [8, 1]
          }
          this.dataLoading = false;
          this.table.list = res.data.list;
          this.page.totalPage = res.data.total;
          this.icoreFilterFlag = true
        }).catch(e => {
          this.dataLoading = false;
          this.icoreFilterFlag = true
        });
    },
    addData () {
      let _this = this;
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.operateLoading = true;
          let baseDataAdd = {};
          baseDataAdd.carNo = _this.baseData.carNo;
          baseDataAdd.memo = _this.baseData.memo;
          add(meterbasecarcards, baseDataAdd, (e) => {
            _this.operateLoading = false;
            _this.search.carNo = baseDataAdd.carNo
            // _this.getDataList();
            _this.searchDatas();
            _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(meterbasecarcards + _this.baseData.carCardNo + '/', _this.baseData, (e) => {
            _this.operateLoading = false;
            // _this.getDataList();
            _this.searchDatas();
            _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(meterbasecarcards + 'Recovery', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          // _this.getDataList();
          _this.searchDatas();
        }
      }, '服役成功');
    },
    distributeData () {
      let _this = this;
      if (_this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一条车辆信息数据！');
      } else if (_this.multipleSelection2.length !== 1) {
        this.$message.warning('请选择一条待分配卡数据！');
      } else if (_this.multipleSelection[0].cardNo !== null) {
        this.$message.warning('该车辆已分配卡，请重新选择车辆信息！');
      } else {
        _this.operateLoading = true;
        // _this.multipleSelection3 = {..._this.multipleSelection[0], ..._this.multipleSelection2[0]};
        _this.multipleSelection[0].cardNo = _this.multipleSelection2[0].cardNo
        add(meterbasecarcards + 'allocation', _this.multipleSelection[0], (e) => {
          _this.operateLoading = false;
          if (!e) {
            // _this.getDataList();
            _this.searchDatas();
            _this.getDataList2();
          }
        }, '分配成功')
      }
    },
    separateData () {
      this.$confirm('确定分离选中的车辆信息？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.operateLoading = true;
          discard(meterbasecarcards + 'separate', this.multipleSelection, (e) => {
            this.operateLoading = false;
            if (!e) {
              this.getDataList();
              this.getDataList2();
            }
          }, '分离成功')
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面'
          })
        });
    },
    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 = 1
            } else if (_this.jsonData[j]['状态'] === '停役') {
              _this.valueFlag1 = 0
            }
            _this.list.push({
              valueFlag: _this.valueFlag1,
              carNo: _this.jsonData[j]['车号']
            })
          }
          _this.operateLoading = true;
          upload(meterbasecarcards + 'list', _this.list, (e) => {
            _this.operateLoading = false;
            _this.list = [];
            // _this.getDataList();
            _this.searchDatas();
            if (!e) {
              // _this.getDataList();
              _this.searchDatas();
            }
          });
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    },
    // lossData () {
    //    let _this = this;
    //   _this.operateLoading = true;
    //   loss(meterbasecarcards + 'loss', _this.multipleSelection, (e) => {
    //     _this.operateLoading = false;
    //     if (!e) {
    //       _this.getDataList();
    //     }
    //   });
    // },
    // deleteData () {
    //   this.$confirm('确定删除选中的计量组件信息？', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消'
    //     })
    //     .then(() => {
    //       this.operateLoading = true;
    //       Delete(meterbasecarcards, this.multipleSelection, (e) => {
    //         this.operateLoading = false;
    //         if (!e) {
    //           this.getDataList();
    //         }
    //       })
    //     })
    //     .catch(action => {
    //       this.$message({
    //         type: 'info',
    //         message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面'
    //       })
    //     });
    // },
    abolishData () {
      let _this = this;
      _this.operateLoading = true;
      discard(meterbasecarcards + 'abolish', _this.multipleSelection, (e) => {
        _this.operateLoading = false;
        if (!e) {
          // _this.getDataList();
          _this.searchDatas();
        }
      }, '停役成功');
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleSelectionChange2 (val) {
      this.multipleSelection2 = val;
    },
    getTableHeight (dom) {
      return (window.innerHeight - dom.offsetTop);
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.searchData();
    },

    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.searchData();
    },
    pageSizeChange1 (size) {
      this.page2.pageSize = size;
      this.getDataList2();
    },

    pageCurrentChange1 (index) {
      this.page.pageNum = index;
      this.getDataList2();
    },
    getDataList () {
      this.dataLoading = true;
      this.axios.get(meterbasecarcards + '?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.dataLoading = true;
      this.axios.get(meterbasecards + '?valueFlag=2' + '&pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize)
        .then(res => {
          this.dataLoading = false;
          this.table.list2 = res.data.list;
          this.page2.totalPage = res.data.total;
        }).catch(e => {
          this.dataLoading = false;
        });
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (row.valueFlag !== '1') {
        return 'error-row2';
      }
      return '';
    }
    // myBlur() {
    //   if (this.baseData.customerSupplierName) {
    //     this.baseData.mnemonicCode = pinyinUtils.initial(this.baseData.customerSupplierName);
    //   }
    // }
  }
}
</script>

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