<!--客运车辆管理-->
<template>
  <div class="systemBase">
    <div>
       <div style="margin-top: 7px;  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="cusSupCarNo" label="车号">
              <el-input v-model="search.cusSupCarNo" size="small" clearable style="width:130px" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item prop="valueFlag" label=" 隶属单位">
               <el-select v-model="search.customerSupplierName" clearable filterable collapse-tags size="mini" style="width:130px;margin-right: 10px;">
                 <el-option v-for="(item,index) in customerSupplier" :key="index" :label="item.customerSupplierName"
                   :value="item.customerSupplierName">
                 </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-item label-width="20px">
             <el-button icon="el-icon-circle-plus-outline" type="primary" size="mini" @click="addData"
             v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'ADD'">新增</el-button>
            </el-form-item>
            <el-form-item label-width="20px">
              <el-button icon="el-icon-edit" type="primary" size="mini" v-loading.fullscreen.lock="operateLoading" @click="modifyData" v-privilege="activeMenu + 'UPDATE'">修改</el-button>
            </el-form-item>
            <el-form-item label-width="20px">
             <el-button size="mini" type="danger" plain icon="el-icon-delete" v-loading.fullscreen.lock="operateLoading"
             @click="deleteData" v-privilege="activeMenu + 'DELETE'">删除</el-button>
            </el-form-item>
            <el-form-item label-width="20px">
             <el-button size="mini" type="primary" icon="el-icon-check" v-loading.fullscreen.lock="operateLoading" @click="recoveryData" v-privilege="activeMenu + 'RECOVERY'">服役</el-button>
            </el-form-item>
             <el-form-item label-width="20px">
              <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-form-item>
        </el-form>
      </div>
      <div class="common-table-div">
        <el-table v-loading="dataLoading" @row-click="rowChange" :row-class-name="tableRowClassName" ref="dataTable" highlight-current-row
          border :height="tableHeight" @selection-change="handleSelectionChange" :data="table.list"
          :exchangeFilterMap="{'validFlag':{'0':'服役','1':'停役'}}"
          :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" prop="pkNo" label="主键编号" min-width="120" align="center"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="cusSupCarNo" label="车号" min-width="80" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="mnemonicCode" label="挂号" min-width="80" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="driverName" label="司机姓名" min-width="80" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="idNum" label="身份证号" min-width="150" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="telNum" label="联系电话" min-width="100" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="customerSupplierNo" min-width="120" label="隶属单位编号" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="customerSupplierName" min-width="300" label="隶属单位名称" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="memo" label="备注" min-width="200" align="left"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" prop="validFlag" label="状态" min-width="60" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.validFlag == 1">停役</span>
              <span v-else-if="scope.row.validFlag == 0">服役</span>
            </template>
          </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" label-width="80px"  :inline="true" :rules="ruleValidate" :model="baseData">
              <el-form-item prop="cusSupCarNo" label="车      号">
                <el-input v-model="baseData.cusSupCarNo" clearable size="mini" placeholder="请输入" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item prop="customerSupplierNo" label="隶属单位">
                <el-select v-model="baseData.customerSupplierNo" clearable filterable collapse-tags size="mini"  style="width:160px">
                  <el-option v-for="(item,index) in customerSupplier" :key="index" :label="item.customerSupplierName"
                    :value="item.customerSupplierNo">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="driverName" label="司机姓名">
                <el-input v-model="baseData.driverName" clearable size="mini" placeholder="请输入"  style="width:160px"></el-input>
              </el-form-item>
              <el-form-item prop="idNum" label="身份证号">
                <el-input v-model="baseData.idNum" size="mini" clearable placeholder="请输入"  style="width:160px"></el-input>
              </el-form-item>
              <el-form-item prop="telNum" label="联系电话">
                <el-input v-model="baseData.telNum" size="mini" clearable placeholder="请输入"  style="width:160px"></el-input>
              </el-form-item>
              <el-form-item prop="mnemonicCode" label="挂     号">
                <el-input v-model="baseData.mnemonicCode" size="mini" clearable placeholder="请输入"  style="width:160px"></el-input>
              </el-form-item>
              <el-form-item prop="memo" label="备      注">
                <el-input v-model="baseData.memo" size="mini" clearable placeholder="请输入"  style="width:160px"></el-input>
              </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    meterbasecussupcars,
    meterbasecustomersuppliers
  } from '../../../utils/api.js';
  import {
    discard,
    Recovery,
    add,
    modify,
    Delete
  } from '../../../utils/httpRequest.js';
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        icoreFilterFlag: true,
        customerSupplier: [],
        baseData: {
          cusSupCarNo: '',
          customerSupplierNo: '',
          driverName: '',
          mnemonicCode: '',
          idNum: '',
          telNum: '',
          memo: ''
        },
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        multipleSelection: [],
        tableHeight: 0,
        ruleValidate: {
          cusSupCarNo: [{
            required: true,
            message: '车号不能为空',
            trigger: 'change'
          }],
          driverName: [{
            required: true,
            message: '司机姓名不能为空',
            trigger: 'change'
          }],
          idNum: [{
            required: true,
            message: '身份证号不能为空',
            trigger: 'change'
          },
          {pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, 
          message: '你的身份证格式不正确' }],
          customerSupplierNo: [{
            required: true,
            message: '该项不能为空',
            trigger: 'change'
          }],
          telNum: [
          {validator:function(rule,value,callback){
	            if(/^1[3456789]\d{9}$/.test(value) == false){
	                callback(new Error("请输入正确的手机号"));
	            }else{
	                callback();
	            }
          }, trigger: 'blur',
          required: true,}],
        },
        search: {
          cusSupCarNo: '',
          customerSupplierName: ''
        },
        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();
      this.getDataList2();
    },
    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);
      },
      searchDatas () {
        this.page.pageNum = 1;
        this.searchData()
      },
      searchData () {
        this.dataLoading = true;
        this.axios.get(meterbasecussupcars + 'like/?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize +
            '&customerSupplierName=' + this.search.customerSupplierName + '&cusSupCarNo=' + this.search.cusSupCarNo)
          .then(res => {
            this.dataLoading = false;
            this.table.list = res.data.list;
            this.page.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading = false;
          });
      },
      addData () {
        let _this = this;
        _this.$refs['baseData'].validate((valid) => {
          if (valid) {
            let baseDataAdd = {};
             baseDataAdd.cusSupCarNo = _this.baseData.cusSupCarNo
             baseDataAdd.driverName = _this.baseData.driverName
             baseDataAdd.mnemonicCode = _this.baseData.mnemonicCode
             baseDataAdd.idNum = _this.baseData.idNum
             baseDataAdd.telNum = _this.baseData.telNum
             baseDataAdd.memo = _this.baseData.memo
             baseDataAdd.customerSupplierNo = _this.baseData.customerSupplierNo;
             baseDataAdd.customerSupplierName =  _this.getCode (this.baseData.customerSupplierNo, this.customerSupplier, 'customerSupplierNo', 'customerSupplierName')
            _this.operateLoading = true;
            add(meterbasecussupcars, 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.customerSupplierName = _this.getCode (this.baseData.customerSupplierNo, this.customerSupplier, 'customerSupplierNo', 'customerSupplierName')
            modify(meterbasecussupcars + _this.baseData.pkNo + '/', _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(meterbasecussupcars + 'Recovery', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        }, '服役成功');
      },
      abolishData () {
        let _this = this;
        _this.operateLoading = true;
        discard(meterbasecussupcars + 'abolish', _this.multipleSelection, (e) => {
          _this.operateLoading = false;
          if (!e) {
            _this.getDataList();
          }
        }, '停役成功');
      },
      deleteData () {
        this.$confirm('确定删除选中的客运车辆？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
          .then(() => {
            this.operateLoading = true;
            Delete(meterbasecussupcars, 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.searchData()
      },

      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.searchData()
      },
      getDataList () {
        this.dataLoading = true;
        this.axios.get(meterbasecussupcars + '?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.validFlag !== '0') {
          return 'error-row2';
        }
        return '';
      },
      getDataList2 () {
        this.axios.get('pass/systemBase/v1/meterbasecustomersuppliers/noPage'+ '?validFlag=1')
            .then(res => {
              this.customerSupplier = res.data;
              this.baseData.customerSupplierNo = res.data.length > 0 ? res.data[0].customerSupplierNo : ''
         })
      }
    }
  }
</script>
<style scoped>
</style>
