<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.backedNo"></el-input>
        </el-form-item>
        <el-form-item label="还款方式">
          <el-select v-model="searchInfo.backedType" clearable placeholder="全部"  >
            <el-option v-for="item in this.$enumUtils.toValue('BackMoneyList')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="还款结果">
          <el-select v-model="searchInfo.result" clearable placeholder="全部"  >
            <el-option v-for="item in this.$enumUtils.toValue('BackStatusMoneyList')" :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.backedDate" 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="backedNo" label="还款编号" ></el-table-column>
        <el-table-column prop="clientNo" label="客户编号" ></el-table-column>
        <el-table-column prop="cardBankAccount" label="银行卡号"  ></el-table-column>
        <el-table-column prop="cardOwnerName" label="姓名"  ></el-table-column>
        <el-table-column prop="backedTypeStr" label="还款方式"  ></el-table-column>
        <el-table-column prop="backedAmt" label="还款金额"  ></el-table-column>
        <el-table-column prop="backedDate" label="还款时间" :formatter="dateFormat" sortable ></el-table-column>
        <el-table-column prop="channelName" label="支付渠道"  ></el-table-column>
        <el-table-column prop="resultStr" label="还款结果"  ></el-table-column>
        <el-table-column prop="confirmDesc" label="备注"  ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="checkDetails(scope.row)">查看详情</el-button>
          </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: {
          backedDate: [],
          backedNo: '',
          clientNo: '',
          clientName: '',
          planIndex: '',
          backedType : '',
          backedTypeStr :'',
          result:'',
        },
        tablePlanRemindData: [],
        record: '',
        allUser: [],
      }

    },

    created () {
      if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
        this.flag = this.$route.query.flag;
        this.searchInfo.backedNo = this.$route.query.backedNo;
        this.searchInfo.clientNo = this.$route.query.clientNo;
        this.searchInfo.clientName = this.$route.query.clientName;
        this.searchInfo.backedType = this.$route.query.backedType;
        this.page.current = parseInt(this.$route.query.current);
        this.searchInfo.backedDate = this.mergeDate(this.$route.query.planDateStart, this.$route.query.planDateEnd);
      }
    },

    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('/back/getBackPageList', this.buildParam()).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          if(res.data.result.data != null ){
            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();
      },

      /*提醒期数*/
      planIndexFormat: function (row, column) {
        var planIndex = row[column.property]
        if (planIndex == undefined) {
          return ''
        }
        return planIndex + '/3'
      },

      //查看详情
      checkDetails (record) {
          // 取当前已经选择的时间
          var  end = new Date(this.searchInfo.backedDate[1])

          end=end.setDate(end.getDate()+1);
          end=new Date(end);
        
          this.$$get(`/detail/back/${record.backedNo}`)
            .then(res => {
              if (res.data.code != 200)
                throw res.data.msg;
            })
            .catch(err => this.$$msg.err(err))
          this.$router.push({
            path: 'ByhPlanRemindDetailNew',
            query: {
              backedNo: record.backedNo,
              current: this.page.current,
            }
          })
      },
      /* 逾期期数 */
      planIndexFormat: function (row) {
        var planIndex = row.planIndex
        var allIndex = row.allIndex
        if (planIndex == undefined || allIndex == undefined) {
          return ''
        }
        return planIndex + '/' + allIndex
      },

      //参数
      buildParam () {
        var return_hash = {
          size: this.page.size,
          current: this.page.current,
        };
        if (this.searchInfo.backedNo != '') {
          return_hash['backedNo'] = this.searchInfo.backedNo
        }
        // 修改手机号查询为客户编号查询
        if (this.searchInfo.clientNo != '') {
          return_hash['clientNo'] = this.searchInfo.clientNo
        }
        if (this.searchInfo.clientName != '') {
          return_hash['clientName'] = this.searchInfo.clientName
        }
        if (this.searchInfo.backedType != '') {
          return_hash['backedType'] = this.searchInfo.backedType
        }
        if (this.searchInfo.result != '') {
          return_hash['result'] = this.searchInfo.result
        }
       
        if (this.searchInfo.backedDate != null && this.searchInfo.backedDate.length>0) {
          var  end = new Date(this.searchInfo.backedDate[1])

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

          return_hash['gmtCreatedStart'] = this.searchInfo.backedDate[0];
          return_hash['gmtCreatedEnd'] = end

        } 

        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.backedDate = '';
        this.searchInfo.backedNo = '';
        this.searchInfo.clientNo = '';
        this.searchInfo.clientName = '';
        this.searchInfo.backedType = '';
        this.searchInfo.backedTypeStr = '';
        this.searchInfo.result = '';
      },

      /** 处理分页操作*/
      handleCurrentChange () {
        this.tablePlanRemindData = this.remindData();
      },

      getStatus (row) {
        let value = row.status;
        if (value === 'BACKING') {
          return '回款中';
        } else if (value === 'SETTLED') {
          return '已结清';
        } else if (value === 'OVERDUED') {
          return '已逾期';
        }
      },
      hangUpStatus (row) {
        let value = row.hangUp;
        if (value === 'UP') {
          return '已挂起';
        } else if (value === 'DOWN') {
          return '未挂起';
        }
      },

      loanChannelStatus: function (row, column) {
        var status = row['channelSign'];
        return this.$enumUtils.toMsg('loanChannel', status);
      },

      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>
