<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.clientName"></el-input>
        </el-form-item>
        <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.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('LoanRemindStatusEnum')" :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.planDate" 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>
          <br/><br/>
          <el-button @click="PlanBackExportList()" 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="planIndex" label="还款期数"  ></el-table-column>
        <el-table-column prop="statusStr" label="计划还款状态"  ></el-table-column>
        <el-table-column prop="planAmt" label="计划应还金额" ></el-table-column>
        <el-table-column prop="planDate" label="计划还款时间" :formatter="dateFormat" sortable ></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>

     <!--窗口组件-->
    <template>

        <!--  导出数据 -->
      <PlanBackExportList
        v-if="ui.PlanBackExportList.visible"
        :dialogVisible.sync="ui.PlanBackExportList.visible"
      ></PlanBackExportList>


    </template>
  
  </div>
</template>

<script>
  import * as moment from "moment";
  import PlanBackExportList from "./finance/PlanBackExportList";


  export default {
    name: "ByhPlanRemindList",
    components: {
      PlanBackExportList,
    },
    data () {
      return {
        flag: false,
        ui:
          {
            PlanBackExportList: {
              visible: false,
            },
          },
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        activeName: '',
        searchInfo: {
          planDate: [],
          loanNo: '',
          status: '',
          clientNo: '',
          clientName: '',
        },
        tablePlanRemindData: [],
        record: '',
        allUser: [],
      }

    },

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

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

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

      // 分配后不刷新页面加载数据
      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) {
        console.log(record)
          this.$router.push({
            path: 'ByhPlanRemindDetails',
            query: {
              clientNo: record.clientNo,
              clientName: record.clientName,
              loanNo: record.loanNo,
              planIndex: record.planIndex,
              planNo: record.planNo,
              current: this.page.current,
            }
          })
      },
      /* 逾期期数 */
      planIndexFormat: function (row) {
        var planIndex = row.planIndex
        var allIndex = row.allIndex
        if (planIndex == undefined || allIndex == undefined) {
          return ''
        }
        return planIndex + '/' + allIndex
      },
      handleSizeChange(row){
          this.page.size=row
          this.page.current=1;
          this.remindData();
      },

      //参数
      buildParam () {
        var return_hash = {
          size: this.page.size,
          current: this.page.current,
        };
        if (this.searchInfo.loanNo != '') {
          return_hash['loanNo'] = this.searchInfo.loanNo
        }
        if (this.searchInfo.clientNo != '') {
          return_hash['clientNo'] = this.searchInfo.clientNo
        }
        if (this.searchInfo.clientName != '') {
          return_hash['clientName'] = this.searchInfo.clientName
        }
        if (this.searchInfo.status != '') {
          return_hash['status'] = this.searchInfo.status
        }
        if (this.searchInfo.hangUp != '') {
          return_hash['hangUp'] = this.searchInfo.hangUp
        }
        if (this.searchInfo.planDate != null && this.searchInfo.planDate.length>0) {

          return_hash['planDateStart'] = this.searchInfo.planDate[0];
          return_hash['planDateEnd'] = this.searchInfo.planDate[1]

        } 

        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.planDate = '';
        this.searchInfo.loanNo = '';
        this.searchInfo.clientNo = '';
        this.searchInfo.clientName = '';
        this.searchInfo.status = '';
      },

      /** 处理分页操作*/
      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 '未挂起';
        }
      },

      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>
