<template>
    <div>
        <!--逾期详情-->
        <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">姓名：{{loanCollectDetails.clientInfo.clientName}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">身份证号：{{loanCollectDetails.clientInfo.certNo}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">电话号码：{{loanCollectDetails.clientByhModel.clientCell}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">客户编号：{{loanCollectDetails.clientInfo.clientNo}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">住宅地址：{{loanRemindDetails.basicInfo.houseAddress ? loanRemindDetails.basicInfo.houseAddress : ''}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">邮箱：{{loanRemindDetails.basicInfo.email ? loanRemindDetails.basicInfo.email :''}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">客户单位名称：{{loanRemindDetails.companyInfo.companyName}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">客户单位地址：{{loanRemindDetails.companyInfo.companyAddress}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">第一联系人姓名：{{loanRemindDetails.basicInfo.firstName  ? loanRemindDetails.basicInfo.firstName :''}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">第一联系人电话：{{loanRemindDetails.basicInfo.firstPhone ? loanRemindDetails.basicInfo.firstPhone :''}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">第二联系人姓名：{{loanRemindDetails.basicInfo.secondName ? loanRemindDetails.basicInfo.secondName :''}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">第二联系人电话：{{loanRemindDetails.basicInfo.secondPhone ? loanRemindDetails.basicInfo.secondPhone :''}}</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">借款编号：{{loanCollectDetails.bizNo}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">本期计划还款时间：{{dateFormatText(loanCollectDetails.planDate)}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">合同金额：{{byhLoan.loanAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">放款金额：{{byhLoan.raiseAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">服务费：{{byhLoan.serviceAmt}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">利息：{{byhLoan.rateAmt}}</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">案件编号：{{loanCollectDetails.collNo}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期时间：{{dateFormatText(loanCollectDetails.collDate)}}</div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">案件状态：{{this.$enumUtils.toMsg('CollectStatusEnum', loanCollectDetails.status)}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期未还本金：{{loanCollectDetails.remainBen}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期未还利息：{{loanCollectDetails.remainXi}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期未还罚息：{{loanCollectDetails.overdueXi}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期未还服务费：{{loanCollectDetails.remainFu}}</div></el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">逾期未还款总金额：{{loanCollectDetails.totalAmt}}</div></el-col>
                    </el-row>
                     <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">减免金额：{{loanCollectDetails.derateAmt ?loanCollectDetails.derateAmt : 0}}</div></el-col>
                    </el-row>
                    <br/>
                    <el-row>
                        <el-button type="primary" round @click="goBack">返回</el-button>
                        <el-button type="primary" round @click="collectLog">跟踪信息</el-button>
                        <!-- 减免单 -->
                        <el-button type="primary"  round
                                    @click="moneyBackedApply"  :disabled="loanCollectDetails.status === 'SETTLED'" >申请减免
                         </el-button>
                        <!--<el-button type="primary" v-if="$permissionUtils.btnPermission('backedApply')" round
                                   @click="createCollectBacked" :disabled="loanCollectDetails.status === 'BACKED'">创建还款单
                        </el-button>-->
                        <!--<el-button type="primary" round
                                   @click="transferBacked" :disabled="loanCollectDetails.status === 'BACKED'">线下转账</el-button>-->
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="还款计划" name="4">
                    <div>
                        <el-table :data="loanLoanRemiandList" stripe style="width: 100%">
                            <el-table-column prop="planIndex" label="还款期数" :formatter="planIndexFormat" width="100"></el-table-column>
                            <el-table-column prop="planNo" label="还款计划编号" width="160"></el-table-column>
                            <el-table-column prop="clientName" label="客户姓名" width="100"></el-table-column>
                            <el-table-column prop="clientCell" label="客户手机号" width="100"></el-table-column>
                            <el-table-column prop="certNo" label="证件号"  width="160"></el-table-column>
                            <el-table-column prop="planAmt" label="计划还款金额" width="100"></el-table-column>
                            <el-table-column prop="planBen" label="计划还款本金" width="100"></el-table-column>
                            <el-table-column prop="planFu" label="计划还款服务费" width="100"></el-table-column>
                            <el-table-column prop="planXi" label="计划还款利息" width="100"></el-table-column>
                            <el-table-column prop="status" label="还款计划状态" :formatter="getStatus" width="135"></el-table-column>
                            <el-table-column prop="planDate" label="计划还款时间" :formatter="dateFormatPlanDate" width="135"></el-table-column>
                            <el-table-column label="操作">
                                <template scope="scope">
                                    <el-button type="text" size="medium" @click="transferBacked(scope.row)" :disabled="scope.row.status === 'SETTLED'">线下转账</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="还款情况" name="5">
                    <div>
                        <el-table :data="loanBackedList" stripe style="width: 100%">
                            <el-table-column prop="backedNo" label="还款编号" width="160"></el-table-column>
                            <el-table-column prop="bizNo" label="还款计划编号" width="160"></el-table-column>
                            <el-table-column prop="backedAmt" label="还款金额" width="100"></el-table-column>
                            <el-table-column prop="backedType" label="还款类型" :formatter="typyFormat" width="100"></el-table-column>
                            <el-table-column prop="status" label="还款单状态" :formatter="statusFormat" width="100"></el-table-column>
                            <el-table-column prop="cardOwnerName" label="银行账号户主名称" width="140"></el-table-column>
                            <el-table-column prop="cardOwnerMobile" label="银行账号户主电话号码" width="160"></el-table-column>
                            <el-table-column prop="cardBankAccount" label="银行账号" width="160"></el-table-column>
                            <el-table-column prop="bankAccount" label="还款银行账户" width="160"></el-table-column>
                            <el-table-column prop="bankOwner" label="还款银行账号" width="160"></el-table-column>
                            <el-table-column prop="result" label="还款结果" :formatter="resultFormat" width="100"></el-table-column>
                            <el-table-column prop="gmtCreated" label="还款时间"  :formatter="dateFormat" width="160"></el-table-column>
                            <el-table-column prop="creator" label="创建人" width="120"></el-table-column>
                            <el-table-column prop="confirmDesc" label="确认意见"></el-table-column>
                        </el-table>
                        <div class="page">
                            <el-pagination
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="page.current"
                                    :page-size="page.size"
                                    layout="prev, pager, next"
                                    :total="page.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <template>
            <!--创建逾期还款单-->
            <collectBackedDialog
                    v-if="ui.collectBackedDialog.visible"
                    :dialogVisible="ui.collectBackedDialog.visible"
                    :backedAmt="ui.collectBackedDialog.backedAmt"
                    :loanNo="ui.collectBackedDialog.loanNo"
                    :creator="ui.collectBackedDialog.creator">
            </collectBackedDialog>

            <!--跟踪信息-->
            <loanCollectLogDailog
                    v-if="ui.loanCollectLogDailog.visible"
                    :dialogVisible="ui.loanCollectLogDailog.visible"
                    :collNo="ui.loanCollectLogDailog.collNo">
            </loanCollectLogDailog>

            <!--创建转账还款单-->
            <transferByhBackedDialog
                    v-if="ui.transferByhBackedDialog.visible"
                    :dialogVisible="ui.transferByhBackedDialog.visible"
                    :loanNo="ui.transferByhBackedDialog.loanNo"
                    :orderNo="ui.transferByhBackedDialog.orderNo"
                    :periodNo="ui.transferByhBackedDialog.periodNo">
            </transferByhBackedDialog>
            
        </template>
    </div>
</template>

<script>
    import * as moment from "moment";
    import collectBackedDialog from "./CollectBackedDialog";
    import loanCollectLogDailog from "./LoanCollectLogDailog";
    import transferByhBackedDialog from "../TransferByhBackedDialog";
    export default {
        components: {
            collectBackedDialog,
            loanCollectLogDailog,
            transferByhBackedDialog,
        },
        name: "ByhLoanCollectDetails",

        data(){
            return {
                flag: false,
                activeNames: ['1','2','3','4','5'],
                dialogVisible: false,
                queryModel: {
                    type: Object
                },
                loanCollectDetails:{
                    collNo: '',
                    bizType: '',
                    bizNo: '',
                    planNo: '',
                    clientNo: '',
                    collDate: '',
                    remainBen: '',
                    remainXi: '',
                    remainFu: '',
                    overdueXi: '',
                    collUser: '',
                    collCoop: '',
                    overdueDays: '',
                    status: '',
                    planIndex: '',
                    planDate: '',
                    totalAmt: '',
                    clientInfo: {
                        clientNo: '',
                        clientName: '',
                        certNo: '',
                    },
                    clientByhModel:{
                        clientCell:''
                    }
                },
                loanLoanRemiandList:[],
                ui: {
                    collectBackedDialog: {
                        visible: false,
                        backedAmt: '',
                        loanNo: '',
                        creator: '',
                    },
                    loanCollectLogDailog:{
                        visible: false,
                        collNo: '',
                    },
                  
                    transferByhBackedDialog:{
                        visible: false,
                        orderNo:'',
                        periodNo:'',
                    },
                },
                loginName: '',
                collNo:'',
                bizNo:'',
                planNo:'',
                clientNo:'',
                collUser:'',
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                loanBackedList:[],
                byhLoan:{
                    loanAmt:'',
                    raiseAmt:'',
                    rateAmt:'',
                    serviceAmt:'',
                },
                loanRemindDetails: {
                    basicInfo:{
                        email: '',
                        firstName: '',
                        firstPhone: '',
                        houseAddress: '',
                        idCard: '',
                        name: '',
                        phone: '',
                        secondName: '',
                        secondPhone: '',
                    },
                    companyInfo:{
                        companyAddress: '',
                        companyName: '',
                    },
                    identifyInfo:{
                        address: '',
                        backFile: '',
                        frontFile: '',
                        issuedBy: '',
                        natureFile: '',
                    },
                },
                orderNo:'',
                periodNo:'',
                clientNoCell:'',
            }
        },

        mounted() {
            this.collNo = this.$route.query.collNo;
            this.bizNo = this.$route.query.bizNo;
            this.clientNo = this.$route.query.clientNo;
            this.planNo = this.$route.query.planNo;
            this.certNo = this.$route.query.certNo;
            this.clientCell = this.$route.query.clientPhone;
            this.clientName = this.$route.query.clientName;
            this.loanNo=this.$route.query.bizNo
            this.periodNo=this.$route.query.planIndex
            

            //借款详情
            this.$$get(`/repayRemind/getLoanDetail/${this.loanNo}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    this.byhLoan = res.data.data;
                    this.orderNo=this.byhLoan.orderNo
                })
                .catch(err => this.$$msg.err(err));

            //逾期详情
            this.$$get(`/collect/getDetail/${this.$route.query.collNo}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    this.loanCollectDetails = res.data.data;
                })
                .catch(err => this.$$msg.err(err));

            //根据借款编号获取还款计划
            this.$$get(`/repayRemind/getPlanByLoanNoByh/${this.loanNo}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    this.loanLoanRemiandList = res.data.data;
                    
                })
                .catch(err => this.$$msg.err(err));

            //查询客户基本信息

            this.$$get(`/repayRemind/getByhRemindDetail/${this.clientNo}/${this.planNo}`)
            .then(res => {
                if (res.data.code < 1)
                    throw res.data.msg;
                if(res.data.data.basicInfo !=''){
                    this.loanRemindDetails = res.data.data;
                }
            })
            .catch(err => this.$$msg.err(err));
               

            //还款日志
            this.loanBackedList = this.backedData();
            this.loginName = localStorage.getItem("loginName");
        },

        methods: {
            /** 加载数据 */
            backedData(params) {
                this.$$post('/repayRemind/getByhBackedList', this.buildParam()).then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.loanBackedList = res.data.data.records;
                    this.page.total = res.data.data.total;
                }).catch(error => {
                    this.$Message.error(error || '系统异常');
                });
            },

            //创建还款单
            // createCollectBacked() {
            //     this.ui.collectBackedDialog = {
            //         visible: true,
            //         backedAmt: this.loanCollectDetails.totalAmt,
            //         loanNo: this.loanCollectDetails.loanNo,
            //         creator:this.loginName,
            //     };
            // },

            collectLog(){
                this.ui.loanCollectLogDailog = {
                    visible: true,
                    collNo: this.collNo,
                };
            },

            //线下转账
            transferBacked(record){
                this.ui.transferByhBackedDialog = {
                    visible: true,
                    orderNo: this.orderNo,
                    periodNo:record.planIndex
                };
            },

            //返回
            goBack() {
                this.$router.push({
                    path: 'ByhLoanCollectList',
                    query: {
                        flag: true,
                        current: this.$route.query.current,
                        status: this.$route.query.status,
                        collUser:this.$route.query.collUser,
                        clientCell: this.$route.query.clientCell,
                        name: this.$route.query.name,
                        startDate: this.$route.query.startDate,
                        endDate: this.$route.query.endDate,
                    }
                })
            },

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

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

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

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

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

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

            //还款类型
            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()
            },

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

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

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


</script>

<style scoped>

</style>
