<template>
    <div>
        <el-button type="text"  @click="goBack">返回</el-button>
        <!--还款计划详情-->
        <div class="content-text">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="用户基本信息" name="1">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">银行账号户主名称：{{loanRemindDetails.basicInfo.name}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">手机号码：{{loanRemindDetails.basicInfo.phone}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">身份证号：{{loanRemindDetails.basicInfo.idCard}}</div>
                        </el-col>
                    </el-row>
                </el-collapse-item>


                <el-collapse-item title="还款信息" name="2">

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款编号：{{loanRemindDetails.planAndBackVo.backedNo}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">借款编号：{{loanRemindDetails.planAndBackVo.bizNo}}
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">客户编号：{{loanRemindDetails.planAndBackVo.clientNo}}
                            </div>
                        </el-col>
                       
                    </el-row>

                     <el-row :gutter="20">

                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款日期：{{loanRemindDetails.planAndBackVo.backedDate | dateFilter}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款账号：{{loanRemindDetails.planAndBackVo.bankAccount}}
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款账户：{{loanRemindDetails.planAndBackVo.bankOwner}}</div>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">

                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款金额：{{loanRemindDetails.planAndBackVo.backedAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款类型：{{loanRemindDetails.planAndBackVo.backedTypeStr}}
                            </div>
                        </el-col>
                       
                    </el-row>

                </el-collapse-item>
                   
                <el-collapse-item title="还款明细" name="3">

                    <el-table :data="loanBackedList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"  :highlight-current-row="true" > 
                        <el-table-column prop="planIndex" label="还款期数" ></el-table-column>
                        <el-table-column prop="planAmt" label="计划还款金额" ></el-table-column>
                        <el-table-column prop="planBen" label="计划还款本金"  ></el-table-column>
                        <el-table-column prop="planFu" label="计划还款服务费"  ></el-table-column>
                        <el-table-column prop="planXi" label="计划还款利息"  ></el-table-column>
                        <el-table-column prop="planDate" label="计划还款时间" :formatter="dateFormat" sortable ></el-table-column>
                        <el-table-column prop="backedAmt" label="还款金额"  ></el-table-column>
                        <el-table-column prop="backedBen" label="本金"  ></el-table-column>
                        <el-table-column prop="backedFu" label="服务费"  ></el-table-column>
                        <el-table-column prop="backedXi" label="利息"  ></el-table-column>
                        <el-table-column prop="derateAmt" label="减免金额"  ></el-table-column>
                        <el-table-column prop="statusStr" label="还款状态"  ></el-table-column>
                    </el-table>

                    
                </el-collapse-item>

                <el-collapse-item title="还款计划" name="4">

                    <el-table :data="loanCountBackList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"  :highlight-current-row="true" > 
                        <el-table-column prop="planIndex" label="还款期数" ></el-table-column>
                        <el-table-column prop="planNo" 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="planAmt" label="计划还款金额"  ></el-table-column>
                        <el-table-column prop="planBen" label="计划还款本金"  ></el-table-column>
                        <el-table-column prop="planFu" label="计划还款服务费"  ></el-table-column>
                        <el-table-column prop="planXi" label="计划还款利息"  ></el-table-column>
                        <el-table-column prop="statusStr" label="还款计划状态"  ></el-table-column>
                        <el-table-column prop="planDate" label="计划还款时间" :formatter="dateFormat" sortable ></el-table-column>

                    </el-table>

                    
                </el-collapse-item>
               
            </el-collapse>

        </div>

      

    </div>
</template>

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

    export default {
        name: "ByhPlanRemindDetails",
        data() {
            return {
                flag: false,
                activeNames: ['1', '2', '3', '4', '5','6'],
                dialogVisible: false,
                loanRemindDetails: {
                    basicInfo:{
                        companyAddress: "",
                        companyName: "",
                        firstName: "",
                        firstPhone: "",
                        houseAddress: "",
                        idCard: "",
                        name: "",
                        phone: ""
                    },
                    planAndBackVo:{
                        backedBen: "",
                        backedFu: "",
                        backedXi: "",
                        backedNo: "",
                        certNo: "",
                        clientCell: "",
                        clientName: "",
                        clientNo: "",
                        handler: "",
                        loanNo: "",
                        orderNo: "",
                        planAmt: "",
                        planBen: "",
                        planDate: "",
                        planFu: "",
                        planIndex: "",
                        planXi: "",
                        remainAmt: "",
                        remindDate: "",
                        status: "",
                        statusStr: "",
                        result: "",
                        resultStr: ""

                    },
                 
                },
                byhLoan:{
                    loanAmt:'',
                    raiseAmt:'',
                    rateAmt:'',
                    serviceAmt:'',
                },
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                loanBackedList:[],
                loanCountBackList:[],
            }
        },
         filters: {

            dateFilter: function (row) {
                var date = row
                if ( typeof(date)==undefined  || typeof(date)==null) {
                return ''
                }
                return moment(date).format("YYYY-MM-DD")
            },

        },
        created() {
                //还款详情
                this.$$get(`/detail/back/${this.$route.query.backedNo}`)
                .then(res => {
                    if (res.data.code != 200 ){
                        throw res.data.message;
                    }
                    if(res.data.result.basicInfoVo != null){
                        this.loanRemindDetails.basicInfo = res.data.result.basicInfoVo ;
                    }

                    if(res.data.result.backVo != null){
                        this.loanRemindDetails.planAndBackVo = res.data.result.backVo ;
                    }
                    // 还款明细
                    if(res.data.result.backAndPlanVo != null){
                        this.loanBackedList = res.data.result.backAndPlanVo ;
                    }
                    // 还款计划
                    if(res.data.result.planVo != null){
                        this.loanCountBackList = res.data.result.planVo ;
                    }
                    
                
                })

        },
        methods: {

            //返回
            goBack() {
                this.$router.push({
                    path: 'ByhPagePlanList',
                    query: {
                        flag: true,
                        current: this.$route.query.current,
                    }
                })
            },

  

            //折叠情况
            handleChange(val) {
            },

            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD");
            },

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

            //还款类型
            typyFormat: function (row, column) {
                var status = row['backedType'];
                return this.$enumUtils.toMsg('BackedTransferTypeEnum', status);
            },
            //还款单状态
            statusFormat: function (row, column) {
                var status = row['status'];
                return this.$enumUtils.toMsg('XmRaiseBackedStatus', status);
            },
            //结果状态
            resultFormat: function (row, column) {
                var status = row['result'];
                return this.$enumUtils.toMsg('SuccessAndFail', status);
            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.loanBackedList = this.backedData()
            },

            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                    bizNo: this.bizNo
                };
                return return_hash;
            },

            getStatus(value) {
                if (value === 'BACKING') {
                    return '回款中';
                } else if (value === 'SETTLED') {
                    return '已结清';
                } else if (value === 'OVERDUED') {
                    return '已逾期';
                }
            },

        }
    }
</script>

<style scoped>

</style>
