<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">银行账号户主名称：{{loanBackedDetails.basicInfoVo.name}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">手机号码：{{loanBackedDetails.basicInfoVo.phone}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">身份证号：{{loanBackedDetails.basicInfoVo.idCard}}</div>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="计划还款情况" name="4">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划编号：{{loanBackedDetails.planAndBackVo.planNo}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款期数：第{{loanBackedDetails.planAndBackVo.planIndex}}期</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款时间：{{dateFormatText(loanBackedDetails.planAndBackVo.planDate)}}
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款状态：{{getStatus(loanBackedDetails.planAndBackVo.status)}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">应还金额：{{loanBackedDetails.planAndBackVo.planAmt}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款本金：{{loanBackedDetails.planAndBackVo.planBen}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款利息：{{loanBackedDetails.planAndBackVo.planXi}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">计划还款服务费：{{loanBackedDetails.planAndBackVo.planFu}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">已还本金：{{loanBackedDetails.planAndBackVo.backedBen}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">已还利息：{{loanBackedDetails.planAndBackVo.backedXi}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">已还服务费：{{loanBackedDetails.planAndBackVo.backedFu}}</div>
                        </el-col>
                    </el-row>
                     <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">已减免金额：{{loanBackedDetails.planAndBackVo.derateAmt ? loanBackedDetails.planAndBackVo.derateAmt : 0}}</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">还款编号：{{loanBackedDetails.backVo.backedNo}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">借款编号：{{loanBackedDetails.backVo.bizNo}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">客户编号：{{loanBackedDetails.backVo.clientNo}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款日期：{{dateFormatText(loanBackedDetails.backVo.gmtCreated)}}
                            </div>
                        </el-col>
                         <el-col :span="6">
                            <div class="grid-content bg-purple">还款账号：{{loanBackedDetails.backVo.bankAccount}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款账户：{{loanBackedDetails.backVo.bankOwner}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                       <el-col :span="6">
                            <div class="grid-content bg-purple">还款金额：{{loanBackedDetails.backVo.backedAmt}} 元</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款类型：{{this.$enumUtils.toMsg('BackedTransferTypeEnum', loanBackedDetails.backVo.backedType)}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款单创建人：{{loanBackedDetails.backVo.creator}}</div>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="还款凭证" name="3">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content bg-purple"><img :src="loanBackedDetails.backVo.attach" style="width: 120px;height: 120px" v-if="loanBackedDetails.backVo.attach!=null" @click="changeImage"></div>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="还款结果" name="4">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">还款单状态：{{this.$enumUtils.toMsg('XmRaiseBackedStatus', loanBackedDetails.backVo.statusStr)}}</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">处理结果：{{(loanBackedDetails.backVo.result==null?"未处理":this.$enumUtils.toMsg('SuccessAndFail', loanBackedDetails.backVo.result))}}</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">确认人：{{loanBackedDetails.backVo.confirmer}}</div>
                        </el-col>
                    </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div class="grid-content bg-purple">线下转账备注：{{loanBackedDetails.backVo.memo}}</div>
                    </el-col>
                  </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">确认描述：{{loanBackedDetails.backVo.confirmDesc}}</div>
                        </el-col>
                    </el-row>
                    <br/>
                    <el-row>
                        <el-button type="primary" @click="confirmBacked" round 
                                   :disabled = "loanBackedDetails.backVo.status !== 'SUBMITED'" >确认还款单</el-button>
                        <el-button type="primary" @click="refuseBacked" round 
                                   :disabled = "loanBackedDetails.backVo.status !== 'SUBMITED'">驳回还款单</el-button>
                        <el-button type="primary" round @click="goBack">返回</el-button>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </div>
        <template>
            <!--转账还款单确认驳回-->
            <confirmRefuseDailog
                    v-if="ui.confirmRefuseDailog.visible"
                    :dialogVisible.sync="ui.confirmRefuseDailog.visible"
                    :btnType="ui.confirmRefuseDailog.btnType"
                    :backedNo="ui.confirmRefuseDailog.backedNo">
            </confirmRefuseDailog>

            <!--图片放大-->
            <imageDailog
                    v-if="ui.imageDailog.visible"
                    :dialogVisible.sync="ui.imageDailog.visible"
                    :img="ui.imageDailog.img">
            </imageDailog>
        </template>
    </div>
</template>

<script>
    import * as moment from "moment";
    import confirmRefuseDailog from "./ByhConfirmRefuseDailog";
    import imageDailog from "../common/ImageDailog";
    export default {
        name: "ByhLoanBackedDetails",
        components: {
            confirmRefuseDailog,
            imageDailog,
        },
        data() {
            return {
                activeNames: ['1', '2', '3','4'],
                ui: {
                    confirmRefuseDailog:{
                        visible: false,
                        backedNo:'',
                        btnType:'',
                    },
                    imageDailog:{
                        visible: false,
                        img:'',
                    },
                },
                loanBackedDetails: {
                    basicInfoVo:{
                        companyAddress: "",
                        companyName: "",
                        firstName: "",
                        firstPhone: "",
                        houseAddress: "",
                        idCard: "",
                        name: "",
                        phone: ""
                    },
                    backVo:{
                        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: ""
                    },
                    planAndBackVo:{
                        backedBen: "",
                        backedFu: "",
                        backedXi: "",
                        certNo: "",
                        clientCell: "",
                        clientName: "",
                        clientNo: "",
                        handler: "",
                        loanNo: "",
                        orderNo: "",
                        planAmt: "",
                        planBen: "",
                        planDate: "",
                        planFu: "",
                        planIndex: "",
                        planNo: "",
                        planXi: "",
                        remainAmt: "",
                        remindDate: "",
                        status: "",
                        statusStr: ""

                    },
                },
            }
        },

        mounted() {
            //获取还款单详情
            this.$$get(`/detail/transfer?backNo=${this.$route.query.backedNo}`+'&clientNo='+this.$route.query.clientNo)
                .then(res => {
                    if (res.data.code !=200 )
                        throw res.data.message;
                    if(res.data.result.basicInfoVo != null ){
                        
                        this.loanBackedDetails.basicInfoVo = res.data.result.basicInfoVo ;
                    }
                    if(res.data.result.planAndBackVo !=null){
                        this.loanBackedDetails.planAndBackVo = res.data.result.planAndBackVo ;
                    }
                    if( res.data.result.backVo !=null){
                        this.loanBackedDetails.backVo = res.data.result.backVo ;
                    }

                })
                .catch(err => this.$$msg.err(err));
            this.loginName = localStorage.getItem("loginName")
        },

        methods: {

            //确认还款单
            confirmBacked(){
                this.ui.confirmRefuseDailog = {
                    visible: true,
                    backedNo: this.loanBackedDetails.backVo.backedNo,
                    btnType: 'CONFIRM'
                }
            },

            //驳回还款单
            refuseBacked(){
                this.ui.confirmRefuseDailog = {
                    visible: true,
                    backedNo: this.loanBackedDetails.backVo.backedNo,
                    btnType: 'REFUSE'
                }
            },

            //放大图片
            changeImage(){
                this.ui.imageDailog = {
                    visible: true,
                    img: this.loanBackedDetails.backVo.attach,
                }
            },

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

            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD HH:mm:ss");
            },
            getStatus(value) {
                if (value === 'BACKING') {
                    return '回款中';
                } else if (value === 'SETTLED') {
                    return '已结清';
                } else if (value === 'OVERDUED') {
                    return '已逾期';
                }
            },

            goBack() {
                this.$router.push({
                    path: 'ByhLoanBackedList',
                    query: {
                        flag: true,
                        bizNo: this.$route.query.bizNo,
                        status: this.$route.query.status,
                        bankAccount: this.$route.query.bankAccount,
                        gmtCreatedStart: this.$route.query.gmtCreatedStart,
                        gmtCreatedEnd: this.$route.query.gmtCreatedEnd,
                        current: this.$route.query.current,
                    }
                })
            },

        }
    }
</script>
<style scoped>

</style>
