<template>
  <div>
    <br>
    <div class="top">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="客户编号：">
          <el-input placeholder="请输入客户编号" v-model="searchInfo.clientNo"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input placeholder="请输入姓名" v-model="searchInfo.cardOwnerName"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input placeholder="请输入手机号" v-model="searchInfo.clientCell"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input placeholder="请输入身份证号" v-model="searchInfo.certNo"></el-input>
        </el-form-item>
        <el-form-item label="借款编号：">
          <el-input placeholder="请输入借款编号" v-model="searchInfo.loanNo"></el-input>
        </el-form-item>
        <el-form-item label="借款状态">
          <el-select v-model="searchInfo.status" clearable placeholder="全部"  >
            <el-option v-for="item in this.$enumUtils.toValue('LoanSnapStatusEnum')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
       
        <el-form-item label="申请时间：">
          <el-date-picker v-model="searchInfo.gmtCreated" type="daterange"  range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" :clearable="false"></el-date-picker>
        </el-form-item>
        <div class="btn">
          <el-button @click="reset" type="primary">重置</el-button>
          <el-button @click="querySearchRemind" type="primary">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="system-list">
      <el-table :data="tablePlanRemindData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"  :highlight-current-row="true" > 
        <el-table-column prop="loanNo" label="借款编号" ></el-table-column>
        <el-table-column prop="clientNo" label="客户编号" ></el-table-column>
        <el-table-column prop="clientName" label="姓名"  ></el-table-column>
        <el-table-column prop="clientCell" label="手机号"  ></el-table-column>
        <el-table-column prop="certNo" label="身份证号"  ></el-table-column>
        <el-table-column prop="raiseAmt" label="申请金额"  ></el-table-column>
        <el-table-column prop="cardOwnerAccount" label="申请银行卡"  ></el-table-column>
        <el-table-column prop="gmtCreated" label="申请时间" :formatter="dateFormat" sortable ></el-table-column>
        <el-table-column prop="statusStr" label="借款状态"  ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.status =='SUBMITED' ">
                <el-button type="text" size="big" @click="deleteRaise(scope.row)" >作废</el-button>
            </div> 
            <div v-else >
                <el-button type="text" size="small"  disabled >已作废</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    
  
  </div>
</template>

<script>
  import * as moment from "moment";

  export default {
    name: "ByhPlanRemindList",
    data () {
      return {
        flag: false,
        ui:
          {
          },
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        activeName: '',
        searchInfo: {
          gmtCreated: [],
          clientNo: '',
          cardOwnerName: '',
          clientCell: '',
          certNo: '',
          loanNo : '',
          status:'',
        },
        tablePlanRemindData: [],
        record: '',
        allUser: [],
      }

    },

    mounted: function () {
      this.tablePlanRemindData = this.remindData();
    
    },

    methods: {
    
      formatter (row, column) {
        return row.address;
      },
      selected: function(gameName) {
        this.activeName = gameName
      },
      /** 加载数据 */
      remindData (params) {
        var listsData = [];
        this.$$post('/loan/loanPageList', this.buildParam()).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
            listsData = res.data.result.data;
            this.tablePlanRemindData = listsData;
            this.page.total = res.data.result.total;
          
        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });
      },

      handleSizeChange(row){
          this.page.size=row
          this.page.current=1;
          this.remindData();
      },

      // 分配后不刷新页面加载数据
      getMyMarket(msg){
          if(msg){
              this.tablePlanRemindData = this.remindData();
          }
      },

      //搜索查询
      querySearchRemind () {
        this.remindData();
      },



      //作废
      deleteRaise (record) {
        this.$prompt('请输入作废原因：', '借款单作废', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\.*?/,
          inputErrorMessage: '内容不能为空'
        }).then(({ value }) => {
           // 获取输入的意见  value

           this.$$get('/raise/cancelLoan?loanNo='+record.loanNo+"&creater="+localStorage.getItem("userName")+"&memo="+value).then(res => {
              if (res.data.code !=200 ) {
                  this.isShow = false;
                  this.$message.error(res.data.message);
                  return
              } else {
                  // 修改成功后再次加载数据
                  this.$message({message: '操作成功', type: 'success'});
                  this.tablePlanRemindData = this.remindData();
              }

            }).catch(error => {
                
          });

         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消作废'
          });       
        });
          
      },
  
      //参数
      buildParam () {
        var return_hash = {
          size: this.page.size,
          current: this.page.current,
          sort: 'id desc',
        };

        if (this.searchInfo.clientNo != '') {
          return_hash['clientNo'] = this.searchInfo.clientNo
        }
        if (this.searchInfo.loanNo != '') {
          return_hash['loanNo'] = this.searchInfo.loanNo
        }
        if (this.searchInfo.cardOwnerName != '') {
          return_hash['clientName'] = this.searchInfo.cardOwnerName
        }
        if (this.searchInfo.clientCell != '') {
          return_hash['clientCell'] = this.searchInfo.clientCell
        }
        if (this.searchInfo.certNo != '') {
          return_hash['certNo'] = this.searchInfo.certNo
        }
        if (this.searchInfo.status != '') {
          return_hash['status'] = this.searchInfo.status
        }
       
        if (this.searchInfo.gmtCreated != null && this.searchInfo.gmtCreated.length>0) {
          var  end = new Date(this.searchInfo.gmtCreated[1])

          end=end.setDate(end.getDate()+1);
          end=new Date(end);

          return_hash['createdTimeStart'] = this.searchInfo.gmtCreated[0];
          return_hash['createdTimeEnd'] = end

        } 

        return return_hash;
      },

      buildParamRaise (record) {
            var return_hash = {
                creater:localStorage.getItem("userName"),
            };
            if (record.loanNo != '') {
            return_hash['loanNo'] = record.loanNo
            }
            return return_hash;
      },

      //显示日期
      dateFormat: function (row, column) {

        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD");
      },

      //重置
      reset () {
        this.searchInfo.clientNo = '';
        this.searchInfo.loanNo = '';
        this.searchInfo.cardOwnerName = '';
        this.searchInfo.clientCell = '';
        this.searchInfo.certNo = '';
        this.searchInfo.status = '';
        this.searchInfo.gmtCreated = '';
      },

      /** 处理分页操作*/
      handleCurrentChange () {
        this.tablePlanRemindData = this.remindData();
      },
      mergeDate (param1, param2) {
        if (param1 == "") {
          return ""
        }
        var array = new Array();
        array[0] = new Date(param1)
        array[1] = new Date(param2)
        return array;
      },
      getDate (param, num) {
        if (param && param[num] !== '') {
          return moment(param[num]).format("YYYY-MM-DD")
        }
        return ""
      },

    }

  }
</script>

<style>

/* 用来设置当前页面element全局table 选中某行时的背景色*/
.system-list .el-table__body tr.current-row>td{
  background-color: #e0f144 !important;
  /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
}
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.system-list .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #d7f144;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}

</style>
