<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.idCard}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">手机号码：{{loanRemindDetails.basicInfo.phone}}</div>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                   
              <el-collapse-item title="申请信息" name="3">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">申请日期：{{dateFormatText(loanRemindDetails.applyVo.gmtCreated)}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">放款日期：{{dateFormatText(loanRemindDetails.applyVo.raiseDate)}}
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">放款银行卡：{{loanRemindDetails.applyVo.cardBankAccount}}
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">合同金额：{{ loanRemindDetails.applyVo.loanAmt }}</div>
                        </el-col>
                        
                        
                    </el-row>
                    <el-row :gutter="20">
                        
                        <el-col :span="6">
                            <div class="grid-content bg-purple">放款金额：{{loanRemindDetails.applyVo.raiseAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">总服务费：{{loanRemindDetails.applyVo.serviceAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">总利息：{{loanRemindDetails.applyVo.rateAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">期数：{{loanRemindDetails.applyVo.loanLimit}}</div>
                        </el-col>
                    </el-row>
                    
                </el-collapse-item>

                <el-collapse-item title="还款计划" name="4">
                    <div>
                        <el-table :data="loanBackedList" stripe style="width: 100%">
                            <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" ></el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item> 

                 <el-collapse-item title="还款情况" name="5">
                    <div>
                        <el-table :data="loanCountBackList" stripe style="width: 100%">
                            <el-table-column prop="backedNo" label="还款编号" ></el-table-column>
                            <el-table-column prop="planIndex" label="期数" ></el-table-column>
                            <el-table-column prop="backedAmt" label="还款金额"></el-table-column>
                            <el-table-column prop="derateAmt" label="减免金额" ></el-table-column>
                            <el-table-column prop="backedTypeStr" label="还款方式" ></el-table-column>
                            <el-table-column prop="statusStr" label="还款单状态" ></el-table-column>
                            <el-table-column prop="cardOwnerName" label="银行账号户主名称"  ></el-table-column>
                            <el-table-column prop="cardOwnerMobile" label="银行账号户主电话"></el-table-column>
                            <el-table-column prop="cardBankAccount" label="银行账户" ></el-table-column>
                            <el-table-column prop="bankOwner" label="还款银行账户" ></el-table-column>
                            <el-table-column prop="bankAccount" label="还款银行账号" ></el-table-column>
                            <el-table-column prop="backedDate" label="还款时间"  :formatter="dateFormat" ></el-table-column>
                            <el-table-column prop="resultStr" label="还款结果"  ></el-table-column>
                            <el-table-column prop="creator" label="创建人"  ></el-table-column>
                            <el-table-column prop="memo" label="备注"  ></el-table-column>

                        </el-table>
                    </div>
                </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: ""
                    },
                    backedVo:{
                        backedAmt: "",
                        backedDate: "",
                        backedNo: "",
                        backedTime: "",
                        backedType: "",
                        backedTypeStr: "",
                        bankAccount: "",
                        bankOwner: "",
                        bindNo: "",
                        bizNo: "",
                        bizType: "",
                        bizTypeStr: "",
                        cardBankAccount: "",
                        cardBankCode: "",
                        cardBankName: "",
                        cardCertNo: "",
                        cardOwnerMobile: "",
                        cardOwnerName: "",
                        clientNo: "",
                        confirmDesc: "",
                        confirmer: "",
                        creator: "",
                        gmtConfirm: "",
                        gmtCreated: "",
                        memo: "",
                        result: "",
                        resultStr: "",
                        status: "",
                        statusStr: ""
                    },
                    planVo:{
                        backedBen: "",
                        backedFu: "",
                        backedXi: "",
                        certNo: "",
                        clientCell: "",
                        clientName: "",
                        clientNo: "",
                        handler: "",
                        loanNo: "",
                        orderNo: "",
                        planAmt: "",
                        planBen: "",
                        planDate: "",
                        planFu: "",
                        planIndex: "",
                        planNo: "",
                        planXi: "",
                        remainAmt: "",
                        remindDate: "",
                        status: "",
                        statusStr: ""

                    },
                    applyVo:{
                        bankAccount: "",
                        clientNo: "",
                        gmtCreated: "",
                        loanAmt: "",
                        loanLimit: "",
                        loanNo: "",
                        raiseDate: "",
                        rateAmt: "",
                        serviceAmt: "",
                        contractAmt:""
                    }
                 
                },
                byhLoan:{
                    loanAmt:'',
                    raiseAmt:'',
                    rateAmt:'',
                    serviceAmt:'',
                },
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                loanBackedList:[],
                loanCountBackList:[],
            }
        },
        created() {
            //还款详情
            // this.remindData(this.$route.query.clientNo)
            this.$$get('/detail/plan/'+this.$route.query.planNo)
                .then(res => {
                    if (res.data.code == 200){
                        if(res.data.result.basicInfo != null){
                            this.loanRemindDetails.basicInfo = res.data.result.basicInfo;
                            this.loanCountBackList = res.data.result.backedVo;
                            this.loanBackedList = res.data.result.planVo;
                            this.loanRemindDetails.applyVo = res.data.result.applyVo;
                            // 合同金额

                            this.loanRemindDetails.applyVo.contractAmt = this.accAdd(this.accAdd(this.loanRemindDetails.applyVo.loanAmt,this.loanRemindDetails.applyVo.serviceAmt),this.loanRemindDetails.applyVo.rateAmt)

                        }

                    }
                }).catch(error => {
                    this.$Message.error(error || '系统异常');
                });
        },
        // mounted: function () {
        //     this.tablePlanRemindData = this.remindData(params);
        // },
        methods: {

            //返回
            goBack() {
                    this.$router.push({
                    path: 'ByhApplyMoney',
                        query: {
                            flag: true,
                            current: this.$route.query.current,
                            planIndex: this.$route.query.planIndex,
                            loanNo: this.$route.query.loanNo,
                            clientNo: this.$route.query.clientNo,
                            planNo: this.$route.query.planNo,
                            planDateStart: this.$route.query.planDateStart,
                            planDateEnd: this.$route.query.planDateEnd,
                        }
                    })
               
            },
            /** 加载数据 */
            remindData (params) {
               
            },
            //折叠情况
            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")
            },

             // 计算小数
            accAdd(arg1,arg2){
                var r1,r2,m;
                try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
                try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
                m=Math.pow(10,Math.max(r1,r2))
                return (arg1*m+arg2*m)/m
            },

            //还款类型
            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>
