<template>


    <div class="content-text">

        <div class="content-table">
            <h2>
                借条信息
            </h2>
            <table id="content">
                <tr>
                    <th>借条编号：</th>
                    <td>{{loanRecord.loanNo}}</td>
                    <th>借款类型 ：</th>
                    <td>{{this.$enumUtils.toMsg('LoanTypeEnum',loanRecord.loanType)}}</td>
                    <th>借条状态：</th>
                    <td>{{this.$enumUtils.toMsg('LoanStatusEnum',loanRecord.status)}}</td>
                </tr>

                <tr>
                    <th>结转方式：</th>
                    <td>{{this.$enumUtils.toMsg('LoanBackTypeEnum',loanRecord.backType)}}</td>
                    <th>出借人：</th>
                    <td><span v-if="loanRecord.lendCardBean !=null">{{loanRecord.lendCardBean.ownerName}}</span></td>
                </tr>

                <tr>
                    <th>客户编号：</th>
                    <td>{{loanRecord.clientBean.clientNo}}</td>
                    <th>是否来自APP：</th>
                    <td>
                        <span v-if="loanRecord.appSign"
                              style="font-weight: bold;color: #ffa23b;font-size: 20px;">是</span>
                        <span v-if="!loanRecord.appSign"
                              style="font-weight: bold;color: #ff150c;font-size: 20px;">否</span>
                    </td>
                    <th>客户渠道：</th>
                    <td><span style="font-size: 20px;font-weight: bold;color: #ffa23b;"> {{this.$enumUtils.toMsg('ClientOriginTypeEnum', loanRecord.clientBean.originType )}}</span>
                    </td>
                </tr>
                <tr>
                    <th>客户姓名：</th>
                    <td>{{loanRecord.clientBean.clientName}}</td>
                    <th>证件号码：</th>
                    <td>{{loanRecord.clientBean.certNo}}</td>
                    <th>手机号码：</th>
                    <td>{{loanRecord.clientBean.clientCell}}</td>
                </tr>

                <tr>
                    <th>合同金额：</th>
                    <td>{{loanRecord.loanAmt}} 元</td>
                    <th>放款金额：</th>
                    <td>{{loanRecord.backAmt}} 元</td>
                    <th>利息/服务费：</th>
                    <td>{{loanRecord.rateAmt}} / {{loanRecord.serviceAmt}} 元</td>
                </tr>
                <tr>
                    <th>起息日：</th>
                    <td>{{ dateFormatText(loanRecord.startDate) }}</td>
                    <th>还款日：</th>
                    <td>{{dateFormatText(loanRecord.endDate)}}</td>
                    <th>借款期限：</th>
                    <td>{{loanRecord.loanLife}} 天</td>
                </tr>

                <tr>
                    <th>银行名称：</th>
                    <td>
            <span v-if="loanRecord.cardBean !=null">
              {{loanRecord.cardBean.openBankName}}
            </span>
                    </td>
                    <th>银行卡号：</th>
                    <td>
          <span v-if="loanRecord.cardBean !=null">
          {{loanRecord.cardBean.bankAccount}}
          </span>
                    </td>
                    <th>上笔借款转账方式：</th>
                    <td>
          <span v-if="loanRecord.loanBackedBean !=null">
          {{this.$enumUtils.toMsg('BackedTransferTypeEnum', loanRecord.loanBackedBean.transferType)}}
          </span>
                    </td>
                </tr>
                <tr>
                    <th>开户行：</th>
                    <td colspan="3">
           <span v-if="loanRecord.cardBean !=null">
            {{loanRecord.cardBean.openSubBankName}}
           </span>
                    </td>
                    <th>是否签约：</th>
                    <td>
            <span v-if="isCardSign" style="font-weight: bold;color: #ffa23b;font-size: 20px;">
             签约成功
            </span>
                        <span v-if="!isCardSign" style="font-weight: bold;color: #ff150c;font-size: 20px;">
              未签约
            </span>
                    </td>
                </tr>
                <tr>
                    <th>申请地址：</th>
                    <td colspan="3">{{loanRecord.clientBean.applyAddress}}
                    </td>
                </tr>
                <tr>
                    <th>工作地址：</th>
                    <td colspan="3">{{loanRecord.clientBean.workAddress}}
                    </td>
                </tr>
                <tr>
                    <th>备注：</th>
                    <td colspan="2">{{loanRecord.clientBean.memo}}
                    </td>
                </tr>
                <!--<tr>-->
                <!--<th>客户备注：</th>-->
                <!--<td>{{client.memo}}</td>-->
                <!--</tr>-->
            </table>
            <h2>
                服务信息
            </h2>

            <table class="content-table">
                <tr>
                    <th>当前处理人：</th>
                    <td>{{releaseUser}}</td>
                </tr>
                <tr>
                    <th>业务组：</th>
                    <td>{{loanRecord.bizGroup}}
                    </td>
                    <th>所属BD：</th>
                    <td><span v-if="loanRecord.loanExtBean !=null && loanRecord.loanExtBean.salerBean !=null">{{loanRecord.loanExtBean.salerBean.userName}}</span>
                    </td>
                    <th>支持岗操作人 ：</th>
                    <td><span v-if="loanRecord.loanExtBean !=null && loanRecord.loanExtBean.supporterBean !=null">{{loanRecord.loanExtBean.supporterBean.userName}}</span>
                    </td>
                </tr>
                <tr>
                    <th>财务放款人：</th>
                    <td><span v-if="loanRecord.loanExtBean !=null && loanRecord.loanExtBean.financerBean !=null">{{loanRecord.loanExtBean.financerBean.userName}}</span>
                    </td>
                    <th>回款确认人 ：</th>
                    <td><span v-if="loanRecord.loanExtBean !=null && loanRecord.loanExtBean.confirmerBean !=null">{{loanRecord.loanExtBean.confirmerBean.userName}}</span>
                    </td>
                    <th>提醒岗：</th>
                    <td><span v-if="loanRecord.loanExtBean !=null && loanRecord.loanExtBean.reminderBean !=null">{{loanRecord.loanExtBean.reminderBean.userName}}</span>
                    </td>
                </tr>
            </table>


            <div class="btn">
                <el-button @click="loanShowDetial" type="primary">查看借款</el-button>
                <el-button @click="addContact" type="primary">新增小计</el-button>
                <span v-if="isHandle">
          <el-button @click="releaseRecord" type="primary">释放借款</el-button>
          <el-button v-if="loanRecord.status === 'INIT' && $permissionUtils.btnPermission('submitLoan')"
                     @click="postLoanRecord" type="primary">提交审核</el-button>
          <el-button v-if="loanRecord.status === 'SUBMITED' && $permissionUtils.btnPermission('passLoan')"
                     @click="loanCheck" type="primary">审核</el-button>
          <el-button v-if="loanRecord.status === 'AUDITED' && $permissionUtils.btnPermission('settlLoan') "
                     @click="loanDispose" type="primary">贷后处理</el-button>
                    <!--<el-button v-if="loanRecord.status === 'REPAYCONFIRM' && $permissionUtils.btnPermission('confirmLoan') "-->
                    <!--@click="repayConfirm" type="primary">还款确认</el-button>-->
          <el-button
                  v-if="loanRecord.status === 'AUDITED' && $permissionUtils.btnPermission('refuseLoan') && (loanRecord.loanType == 'EXTENSION' || loanRecord.loanType== 'PART_EXT')"
                  @click="refuseLoanRecord"
                  type="primary">驳回修改</el-button>
          <el-button v-if="loanRecord.status === 'OVERDUED' && $permissionUtils.btnPermission('recoverLoan')"
                     @click="recoverLoanRecord"
                     type="primary">逾期追回</el-button>
          <el-button
                  v-if="(loanRecord.status === 'AUDITED' || loanRecord.status === 'SETTLED' ) && $permissionUtils.btnPermission('settlLoan') "
                  @click="overdueLoan" type="primary">逾期</el-button>
          <el-button v-if="loanRecord.status === 'INIT' && $permissionUtils.btnPermission('cancelLoan')"
                     @click="cancelLoanRecord"
                     type="primary">作废借款</el-button>
        </span>
                <el-button v-if="loanRecord.status === 'SETTLED' && loanRecord.backType === 'EXTENSION'"
                           @click="shiftSettle" type="primary">展期转结清
                </el-button>
                <el-button @click="goBack" type="primary">返回</el-button>
            </div>

            <h2>
                联系小计
            </h2>
            <el-scrollbar style="height: 500px;">
                <contactList
                        v-if="ui.contactList.visible"
                        :clientNo="ui.contactList.clientNo">
                </contactList>
            </el-scrollbar>
            <h2>
                还款明细
            </h2>

            <el-scrollbar style="height: 280px;">
                <div class="system-list">
                    <el-table :data="records" stripe style="width: 100%">
                        <el-table-column type="index" width="60"></el-table-column>
                        <el-table-column prop="backedNo" sortable label="还款编号"></el-table-column>
                        <el-table-column prop="loanNo" sortable label="借款编号"></el-table-column>
                        <el-table-column prop="clientNo" sortable label="客户编号"></el-table-column>
                        <el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
                        <el-table-column prop="backedType" sortable label="还款类型"
                                         :formatter=" backedTypeFormat"></el-table-column>
                        <el-table-column prop="transferType" sortable label="还款方式"
                                         :formatter="transferTypeFormat"></el-table-column>
                        <el-table-column prop="bankAccount" sortable label="还款账号"></el-table-column>
                        <el-table-column prop="bankOwner" sortable label="客户名字"></el-table-column>
                        <el-table-column prop="backedDate" sortable label="还款时间"
                                         :formatter="dateFormat"></el-table-column>
                        <el-table-column prop="backedAmt" sortable label="还款金额"></el-table-column>
                        <el-table-column prop="status" sortable label="还款状态"
                                         :formatter="backedStatusFormat"></el-table-column>
                        <el-table-column prop="backMode" sortable label="还款类别"
                                         :formatter="backedModeFormat"></el-table-column>
                        <el-table-column prop="memo" sortable label="备注"></el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
        </div>
        <!--窗口组件-->
        <template>

            <!-- 提交财务 -->
            <loan-info-dialog
                    v-if="ui.loanInfoDialog.visible"
                    :type="ui.loanInfoDialog.type"
                    :loanType="ui.loanInfoDialog.loanType"
                    :client="ui.loanInfoDialog.client"
                    :saler="ui.loanInfoDialog.saler"
                    :loanRecord="ui.loanInfoDialog.loanRecord"
                    :dialogVisible="ui.loanInfoDialog.visible"
                    :dialogVisible.sync="ui.loanInfoDialog.visible">
            </loan-info-dialog>


            <!--放款确认-->
            <loanCheckDialog
                    v-if="ui.loanCheckDialog.visible"
                    :loanRecord="ui.loanCheckDialog.loanRecord"
                    :dialogVisible="ui.loanCheckDialog.visible"
                    :dialogVisible.sync="ui.loanCheckDialog.visible">
            </loanCheckDialog>


            <!--借条操作-->
            <loanInfoDisposeDialog
                    v-if="ui.loanInfoDisposeDialog.visible"
                    :loanRecord="ui.loanInfoDisposeDialog.loanRecord"
                    :dialogVisible="ui.loanInfoDisposeDialog.visible"
                    :dialogVisible.sync="ui.loanInfoDisposeDialog.visible">
            </loanInfoDisposeDialog>

            <!--还款确认-->
            <repayConfirmDialog
                    v-if="ui.repayConfirmDialog.visible"
                    :loanRecord="ui.repayConfirmDialog.loanRecord"
                    :dialogVisible="ui.repayConfirmDialog.visible"
                    :dialogVisible.sync="ui.repayConfirmDialog.visible">
            </repayConfirmDialog>


            <!-- 借条详情 -->
            <loanInfoShowDialog
                    v-if="ui.loanInfoShowDialog.visible"
                    :loanRecord="ui.loanInfoShowDialog.loanRecord"
                    :dialogVisible="ui.loanInfoShowDialog.visible"
                    :dialogVisible.sync="ui.loanInfoShowDialog.visible">
            </loanInfoShowDialog>

            <!--添加联系小计-->
            <contactDialog
                    v-if="ui.contactDialog.visible"
                    :type="ui.contactDialog.type"
                    :loanNo="ui.contactDialog.loanNo"
                    :dialogVisible="ui.contactDialog.visible"
                    :dialogVisible.sync="ui.contactDialog.visible">
            </contactDialog>


            <!-- 作废借条 -->
            <cancelLoanDialog
                    v-if="ui.cancelLoanDialog.visible"
                    :loanNo="ui.cancelLoanDialog.loanNo"
                    :dialogVisible="ui.cancelLoanDialog.visible"
                    :dialogVisible.sync="ui.cancelLoanDialog.visible">
            </cancelLoanDialog>

            <!-- 驳回借条 -->
            <refuseLoanDialog
                    v-if="ui.refuseLoanDialog.visible"
                    :loanNo="ui.refuseLoanDialog.loanNo"
                    :dialogVisible="ui.refuseLoanDialog.visible"
                    :dialogVisible.sync="ui.refuseLoanDialog.visible">
            </refuseLoanDialog>

            <!-- 逾期追回 -->
            <recoverLoanDialog
                    v-if="ui.recoverLoanDialog.visible"
                    :loanNo="ui.recoverLoanDialog.loanNo"
                    :dialogVisible="ui.recoverLoanDialog.visible"
                    :dialogVisible.sync="ui.recoverLoanDialog.visible">
            </recoverLoanDialog>

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

<script>
    import loanInfoDisposeDialog from "./LoanInfoDisposeDialog"
    import repayConfirmDialog from "./RepayConfirmDialog"
    import loanInfoDialog from "./LoanInfoDialog"
    import contactList from "../common/ContactList"
    import contactDialog from "../common/ContactDialog"
    import loanInfoShowDialog from "./LoanInfoShowDialog"
    import loanCheckDialog from "./LoanCheckDialog"
    import cancelLoanDialog from "./CancelLoanDialog"
    import refuseLoanDialog from "./RefuseLoanDialog"
    import recoverLoanDialog from "./RecoverLoanDialog"
    import * as moment from "moment";


    export default {
        name: "ClientInfoDetail",
        components: {
            loanInfoDisposeDialog,
            repayConfirmDialog,
            loanInfoDialog,
            contactList,
            loanInfoShowDialog,
            contactDialog,
            loanCheckDialog,
            cancelLoanDialog,
            recoverLoanDialog,
            refuseLoanDialog
        },
        data() {
            return {
                isCardSign: false,
                isHandle: false,
                records: [],
                releaseUser: '',
                loginName: '',
                clientNo: '',
                client: {},
                loanRecord: {
                    appSign: '',
                    loanNo: '',
                    lendCardBean: {
                        ownerName: ''
                    },
                    clientBean: {
                        clientName: '',
                        certNo: '',
                        clientCell: '',
                        applyAddress: '',
                        workAddress: '',
                        memo: '',
                    },
                    cardBean: {
                        openBankName: '',
                        bankAccount: '',
                        openSubBankName: '',
                    },
                    loanExtBean: {
                        saler: '',
                        bizGroup: '',
                        supporter: '',
                        financer: '',
                        confirmer: '',
                        reminder: '',
                        salerBean: {},

                    },
                    loanBackedBean: {
                        transferType: '',
                    },
                },
                ui:
                    {
                        loanCheckDialog: {
                            visible: false,
                            loanRecord: {}
                        },
                        loanInfoDisposeDialog: {
                            visible: false,
                            loanRecord: {}
                        },
                        repayConfirmDialog: {
                            visible: false,
                            loanRecord: {}
                        },
                        loanInfoDialog: {
                            visible: false,
                            loanType: '',
                            type: '',
                            saler: '',
                            client: {},
                            loanRecord: {}
                        },
                        contactList: {
                            visible: false,
                            clientNo: this.clientNo
                        },
                        loanInfoShowDialog: {
                            visible: false,
                            loanRecord: {}
                        },
                        contactDialog: {
                            visible: false,
                            loanNo: '',
                            type: ''
                        },
                        cancelLoanDialog: {
                            visible: false,
                            loanNo: ''
                        },
                        refuseLoanDialog: {
                            visible: false,
                            loanNo: ''
                        },
                        recoverLoanDialog: {
                            visible: false,
                            loanNo: ''
                        }
                    }
            }
        },
        mounted() {
            this.$$get(`/loanRecord/getInfo/${this.$route.query.name}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    this.loanRecord = res.data.data
                    this.clientNo = this.loanRecord.clientNo
                    this.loanContactList(this.clientNo)
                })
                .catch(err => this.$$msg.err(err))
            this.checkHandle();
            this.$$get(`loanBacked/getLoanBackedList/${this.$route.query.name}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    this.records = res.data.data
                })
                .catch(err => this.$$msg.err(err))



          /*背景*/
          const bg = localStorage.getItem('bg')
          document.getElementById('content').style.background = 'url("' + bg + '") 0 center repeat';

        },
        methods: {
            goBack() {
                this.$router.push({
                    path: 'LoanRecordList',
                    query: {
                        flag: true,
                        clientName: this.$route.query.clientName,
                        certNo: this.$route.query.certNo,
                        loanNo: this.$route.query.loanNo,
                        beginDate1: this.$route.query.beginDate1,
                        beginDate2: this.$route.query.beginDate2,
                        repayDate1: this.$route.query.repayDate1,
                        repayDate2: this.$route.query.repayDate2,
                        loanStatus: this.$route.query.loanStatus,
                        handler: this.$route.query.handler,
                        loanType: this.$route.query.loanType,
                        page: this.$route.query.page
                    }
                })
            },

            addContact() {
                this.ui.contactDialog = {
                    visible: true,
                    type: 'Check',
                    loanNo: this.loanRecord.loanNo
                };
            },

            checkHandle() {
                this.$$get(`/loanRecord/getHandler/${this.$route.query.name}`)
                    .then(res => {
                            if (res.data.code < 1)
                                throw res.data.msg;

                            this.loginName = localStorage.getItem("loginName")
                            if (res.data.data != null) {
                                if (this.loginName === res.data.data.loginName) {
                                    this.isHandle = true;
                                }
                                this.releaseUser = res.data.data.userName
                            }
                        }
                    )
                    .catch(err => this.$$msg.err(err))
            },
            loanShowDetial() {
                this.ui.loanInfoShowDialog = {
                    visible: true,
                    loanRecord: this.loanRecord
                };
            }
            ,
            loanContactList(param) {
                this.ui.contactList = {
                    visible: true,
                    clientNo: param
                };

                this.$$get(`/client/isCardSign/` + param)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.isCardSign = res.data.data;
                    })
                    .catch(err => this.$$msg.err(err))

                this.$$get(`/client/getInfo/` + param)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.client = res.data.data;
                    })
                    .catch(err => this.$$msg.err(err))


            },
            cancelLoanRecord() {
                this.ui.cancelLoanDialog = {
                    visible: true,
                    loanNo: this.loanRecord.loanNo
                };
            },

            refuseLoanRecord() {
                this.ui.refuseLoanDialog = {
                    visible: true,
                    loanNo: this.loanRecord.loanNo
                };
            },
            recoverLoanRecord() {
                this.ui.recoverLoanDialog = {
                    visible: true,
                    loanNo: this.loanRecord.loanNo
                };
            },
            loanCheck() {
                this.ui.loanCheckDialog = {
                    visible: true,
                    loanRecord: this.loanRecord
                };
            }
            ,
            loanDispose() {
                this.ui.loanInfoDisposeDialog = {
                    visible: true,
                    loanRecord: this.loanRecord
                };
            }
            ,
            repayConfirm() {
                this.ui.repayConfirmDialog = {
                    visible: true,
                    loanRecord: this.loanRecord
                };
            },
            postLoanRecord() {
                this.ui.loanInfoDialog = {
                    visible: true,
                    type: "EDIT",
                    loanType: this.loanRecord.loanType,
                    client: this.loanRecord.clientBean,
                    loanRecord: this.loanRecord,
                    saler: this.saler,
                }
            },
            releaseRecord() {
                this.$$get(`/loanRecord/release/${this.$route.query.name}`)
                    .then(res => {

                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.isHandle = false
                        this.releaseUser = ''

                    })
                    .catch(err => this.$$msg.err(err))
            },
            overdueLoan() {
                this.$confirm('确认借款单逾期入催？')
                    .then(_ => {
                        this.postLoan('/loanRecord/overdue')
                    })
                    .catch(_ => {
                    });
            },
            shiftSettle() {
                this.$$get(`/loanRecord/forward/${this.loanRecord.loanNo}`).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.$message({message: '操作成功', type: 'success'});
                    window.location.reload();
                })
            },
            postLoan(url) {
                this.$$post(url, {loanNo: this.$route.query.name, memo: "逾期入催"}).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.$message({message: '操作成功', type: 'success'});
                    window.location.reload();
                })
            },
            backedStatusFormat: function (row, column) {
                var param = row[column.property];
                return this.$enumUtils.toMsg('BackedStatusEnum', param);
            },
            backedModeFormat: function (row, column) {
                var param = row[column.property];
                return this.$enumUtils.toMsg('BackedModeEnum', param);
            },
            backedTypeFormat: function (row, column) {
                var param = row[column.property];
                return this.$enumUtils.toMsg('BackedTypeEnum', param);
            },
            backedTimeFormat: function (row, column) {
                var backedDate = row['backedDate'];
                var backedTime = row['backedTime'];
                return moment(backedDate).format("YYYY-MM-DD") + " " + backedTime;
            },
            transferTypeFormat: function (row, column) {
                var param = row[column.property];
                return this.$enumUtils.toMsg('BackedTransferTypeEnum', param);
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD");
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">



    .content-text {
        width: 95%;
        margin: auto;
    }

    .content-text h2 {
        margin: 10px 0 0.8em;
        padding-bottom: 0.7em;
        border-bottom: 1px solid #ddd;
        color: #47484b;
    }

    .content-table label {
        font-size: 20px;
        color: #64656f;
    }

    .content-table table {
        width: 95%;
        border-spacing: 0px 15px;
    }

    .content-table table th {
        color: #64656f;
        text-align: right;
        font-size: 18px;
    }

    .content-table table td {
        color: #64656f;
        text-align: left;
        font-size: 18px;
    }

</style>
