<template>
    <el-dialog class="common-dialog"
               title="借条处理" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">

        <div class="content-table">
            <table>
                <tr>
                    <th>借条编号：</th>
                    <td>{{loanRecord.loanNo}}</td>
                    <th>类型 ：</th>
                    <td>{{this.$enumUtils.toMsg('LoanTypeEnum',loanRecord.loanType)}}</td>
                    <th>借条状态：</th>
                    <td><span
                            style="color:red;font-weight: bold;">{{this.$enumUtils.toMsg('LoanStatusEnum',loanRecord.status)}}</span>
                    </td>
                </tr>
                <tr>
                    <th>出借人：</th>
                    <td><span v-if="loanRecord.lendCardBean!=null">{{loanRecord.lendCardBean.ownerName}}</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>{{loanRecord.loanExtBean.dutyDesc}}</td>
                    <th>业务组：</th>
                    <td><span style="color:red;font-weight: bold;">{{loanRecord.bizGroup}}</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="5">{{loanRecord.memo}}</td>
                </tr>
                <tr>
                    <th>客户资料：</th>
                    <td colspan="5">
                        <template v-for="userAttach in userAttachs">
                            <a :href="userAttach.attachUrl" target="_blank">
                                <img :src="userAttach.attachUrl" width="150px" height="200px"/>
                            </a>
                        </template>
                    </td>
                </tr>
                <tr>
                    <th>借款资料：</th>
                    <td colspan="5">
                        <template v-for="loanAttach in loanAttachs">
                            <a :href="loanAttach.attachUrl" target="_blank">
                                <img :src="loanAttach.attachUrl" width="150px" height="200px"/>
                            </a>
                        </template>
                    </td>
                </tr>

            </table>

            <h2>
                还款操作
            </h2>

            <table>
                <tr>
                    <th>还款方式：</th>
                    <td>
                        <el-radio v-model="radio" label="1" @change="backedTypeChg()">线下转账</el-radio>
                        <el-radio v-if="isCardSign" v-model="radio" label="2" @change="backedTypeChg()">协议代扣</el-radio>
                    </td>
                    <th>还款金额：</th>
                    <td>
                        <el-input placeholder="还款总金额" v-model="repayAmt"></el-input>
                    </td>
                </tr>
                <tr v-show="isOpen">
                    <th>还款账户：</th>
                    <td><span v-if="loanRecord.lendCardBean!=null"> {{loanRecord.lendCardBean.ownerName}}</span></td>
                    <th>还款银行卡：</th>
                    <td colspan="3">
                        <el-select v-model="bankAccount" filterable default-first-option placeholder="回款银行卡"
                                   @change="selectChange()">
                            <el-option v-for="item in bankAccounts" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </td>

                </tr>
                <tr v-show="isOpen">
                    <th>还款日期：</th>
                    <td>
                        <el-date-picker type="date" v-model="repayDate" placeholder="还款日期"/>
                    </td>
                    <th>还款时间：</th>
                    <td>
                        <el-time-picker v-model="repayTime" placeholder="还款时间"/>
                    </td>
                </tr>
            </table>


            <h2 v-show="isOpen">
                还款凭证
            </h2>
            <el-upload
                    list-type="picture-card"
                    :multiple="true"
                    :action="oss.action"
                    :data="oss.data"
                    accept=".jpeg,.jpg,.png"
                    :before-upload="handleBeforeUpload"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <h2>
                操作意见
            </h2>
            <el-input type="textarea" v-model="memo"></el-input>

        </div>


        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="closeLoan">结清</el-button>
            <el-button type="primary" @click="continueLoan">续贷</el-button>
            <el-button type="primary" @click="standLoan">展期</el-button>
            <el-button type="primary" @click="subStandLoan">展期减额</el-button>
            <el-button type="primary" @click="aheadSettle">提前结清</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">

    import * as moment from "moment";

    export default {
        name: 'LoanInfoDisposeDialog',
        props: {
            dialogVisible: {
                type: Boolean
            },
            loanRecord: {
                type: Object
            }
        },
        data() {
            return {
                isOpen: false,
                radio: '1',
                isCardSign: false,
                visible: this.$props.dialogVisible,
                value: {},
                repayAmt: '',
                principalAmt: '0',
                repayDate: new Date(),
                repayTime: '',
                bankAccount: '',
                bankOwner: '',
                memo: '',
                bankAccounts: [],
                loanBackUrl: '',
                loanBackImgs: [],
                userAttachs: [],
                loanAttachs: [],
                oss: {
                    action: '',
                    data: {},
                },
            }
        },

        mounted: function () {
            //  初始化 银行卡列表
            this.$$get(`/card/backList/${this.loanRecord.bizGroup}`)
                .then(res => {
                    if (res.data.code < 1)
                        throw res.data.msg;
                    var array = []
                    res.data.data.forEach((item, index) => {
                        var value = item.ownerName + '_' + item.bankAccount
                        array[index] = {value: value, lable: item.bankAccount}
                    })
                    this.bankAccounts = array;
                })
                .catch(err => this.$$msg.err(err))


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


            for (var i in  this.loanRecord.userAttachList) {
                this.userAttachs[this.userAttachs.length] = {attachUrl: this.loanRecord.userAttachList[i].attachUrl}
            }

            for (var i in  this.loanRecord.loanAttachList) {
                this.loanAttachs[this.loanAttachs.length] = {attachUrl: this.loanRecord.loanAttachList[i].attachUrl}
            }

            for (var i in  this.loanRecord.raiseAttachList) {
                this.loanAttachs[this.loanAttachs.length] = {attachUrl: this.loanRecord.raiseAttachList[i].attachUrl}
            }

            for (var i in  this.loanRecord.backAttachList) {
                this.loanAttachs[this.loanAttachs.length] = {attachPath: this.loanRecord.backAttachList[i].attachPath}
            }

            this.backedTypeChg();

        },
        methods: {
            backedTypeChg() {

                if (this.radio == '1') {
                    this.isOpen = true;
                } else {
                    this.isOpen = false;
                }

            },

            handleBeforeUpload(file) {
                var attachType = 'LOAN_BACK'
                return this.$$get(`/oss/signature/` + attachType + "/" + file.name).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    const result = res.data.data;
                    const data = {};
                    const tempOss = {};
                    data.OSSAccessKeyId = result.accessId;
                    data.policy = result.policy;
                    data.Signature = result.signature;
                    data.key = result.dir;
                    tempOss.action = result.host;
                    tempOss.data = data;
                    this.oss = tempOss;
                    this.loanBackImgs[this.loanBackImgs.length] = {attachPath: result.dir, attachName: file.name}
                });
            },

            handleSuccess(res, file, fileList) {
                this.$notify({title: '成功', message: file.name + ",上传成功", type: 'success'});
            },

            handleRemove(res, file, fileList) {
                var array = []
                var num = 0;
                for (var imgNum in this.loanBackImgs) {
                    if (this.loanBackImgs[imgNum] != res.response.data) {
                        array[num] = this.loanBackImgs[imgNum]
                        num = num + 1
                    }
                }
                this.loanBackImgs = array
            },
            closeLoan() {
                if (moment(this.loanRecord.startDate).format("YYYY-MM-DD")!=moment(new Date()).format("YYYY-MM-DD")){
                    if (this.isOpen) {
                        this.postLoan('/loanRecord/remind/settl')
                    } else {
                        this.postLoan('/loanRecord/protocol/settl')
                    }
                }else {
                    this.$confirm('当前日期就是案件起息日, 是否继续处理?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if (this.isOpen) {
                            this.postLoan('/loanRecord/remind/settl')
                        } else {
                            this.postLoan('/loanRecord/protocol/settl')
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            continueLoan() {
                if (moment(this.loanRecord.startDate).format("YYYY-MM-DD")!=moment(new Date()).format("YYYY-MM-DD")){
                    if (this.isOpen) {
                        this.postLoan('/loanRecord/remind/continued')
                    } else {
                        this.postLoan('/loanRecord/protocol/continued')
                    }
                }else {
                    this.$confirm('当前日期就是案件起息日, 是否继续处理?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if (this.isOpen) {
                            this.postLoan('/loanRecord/remind/continued')
                        } else {
                            this.postLoan('/loanRecord/protocol/continued')
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            standLoan() {
                if (this.isOpen) {
                    this.postLoan('/loanRecord/remind/extension')
                } else {
                    this.postLoan('/loanRecord/protocol/extension')
                }
            },
            subStandLoan() {
                if (this.isOpen) {
                    this.postLoan('/loanRecord/remind/partExt')
                } else {
                    this.postLoan('/loanRecord/protocol/partExt')
                }
            },
            aheadSettle() {
                if (this.isOpen) {
                    this.postLoan('/loanRecord/remind/ahead')
                } else {
                    this.postLoan('/loanRecord/protocol/ahead')
                }
            },

            postLoan(url) {
                this.$$post(url, this.buildPostParam()).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.$message({message: '操作成功', type: 'success'});
                    this.handleClose();
                    window.location.reload();
                })
            },
            selectChange() {
                this.bankOwner = this.bankAccount.split("_")[0];
                this.bankAccount = this.bankAccount.split("_")[1];
            },

            /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 100);
            },
            buildPostParam() {
                return {
                    loanNo: this.loanRecord.loanNo,
                    memo: this.memo,
                    backedDate: this.repayDate,
                    backedTime: moment(this.repayTime).format('HH:mm:ss'),
                    backedAmt: this.repayAmt,
                    cutAmt: this.principalAmt,
                    bankAccount: this.bankAccount,
                    bankOwner: this.bankOwner,
                    backAttachList: this.loanBackImgs,

                }
            },
            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD");
            },
            dateFormatTimeText: function (param) {
                return moment(param).format("HH:mm:ss");
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">

    .common-dialog {
        .input {
            width 80%
            margin auto
        }
    }

</style>
