<template>
    <div class="case-repayment-certificate">
        <div class="mb-16 flex-row justify-content-between">
            <span class="f-weight500 f18">还款计划</span>
            <span class="cursor-pointer" v-if="planList.length == 0" @click="updateFlag = true"><i class="el-icon-plus"></i> 添加还款计划</span>
            <span class="cursor-pointer" v-else @click="UpdatePlanClick"><i class="el-icon-plus"></i> 编辑还款计划</span>
        </div>
        
        <div v-if="planList.length >0 && !updateFlag" class="case-detail-des flex-column mb-16 p-16 border-radius-8">
            <div class="flex-column justify-content-between">
                <el-form ref="ruleFormRepayment" 
                    :model="repaymentObj" 
                    :rules="rulesClientRepayment" 
                    label-width="130px">
                    <el-form-item label="还款方式" prop="type">
                        <el-select v-model="repaymentObj.type" class="width100" disabled
                            placeholder="请选择还款方式" size="small">
                            <el-option
                                    v-for="(item,index) in RepaymentOptions"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="还款金额" prop="totalAmount">
                        <el-input class="inputpaddingtop2" disabled
                            size="small"
                            placeholder="请输入还款金额"
                            v-model="repaymentObj.totalAmount"
                            @input="inputChange($event)">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合，部分先还加分期 OTHER :其他 -->
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount">
                        <el-input class="inputpaddingtop2" disabled
                            size="small"
                            placeholder="请输入分期前偿还金额"
                            v-model="repaymentObj.partAmount"
                            @input="inputChange($event)">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate">
                        <el-date-picker class="width100" size="small" disabled
                            v-model="repaymentObj.partDate"
                            type="date"
                            placeholder="选择先还日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            disabled
                            placeholder="分期部分金额"
                            v-model="repaymentObj.moneyAmount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数" prop="stagesNum">
                        <el-input
                            size="small" disabled
                            placeholder="请输入分期期数"
                            v-model="repaymentObj.stagesNum"
                            @input="inputChange($event)">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款金额" prop="stagesAmount">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            disabled
                            placeholder="每期还款金额"
                            v-model="repaymentObj.stagesAmount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款日期" prop="stagesDay">
                        <el-select v-model="repaymentObj.stagesDay" class="width100" disabled
                            placeholder="请选择每期还款日期" size="small">
                            <el-option
                                    v-for="(item, index) in 31"
                                    :key="index"
                                    :label="(index+1)+'日'"
                                    :value="(index+1)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="还款截止日期" prop="paybackDate">
                        <el-date-picker class="width100" size="small" disabled
                            v-model="repaymentObj.paybackDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注说明" prop="remark">
                        <el-input disabled
                            size="small"
                            clearable
                            placeholder="请输入备注说明"
                            v-model="repaymentObj.remark">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-if="updateFlag" class="case-detail-des flex-column mb-16 p-16 border-radius-8">
            <div class="flex-column justify-content-between">
                <el-form ref="ruleFormRepayment" 
                    :model="repaymentObj" 
                    :rules="rulesClientRepayment" 
                    label-width="130px">

                    <el-form-item label="还款方式" prop="type">
                        <el-select v-model="repaymentObj.type" class="width100"
                            placeholder="请选择还款方式" size="small">
                            <el-option
                                    v-for="(item,index) in RepaymentOptions"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="还款金额" prop="totalAmount">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            placeholder="请输入还款金额"
                            v-model="repaymentObj.totalAmount"
                            @input="inputChange($event)">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合，部分先还加分期 OTHER :其他 -->
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            placeholder="请输入分期前偿还金额"
                            v-model="repaymentObj.partAmount"
                            @input="inputChange($event)">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate">
                        <el-date-picker class="width100" size="small"
                            v-model="repaymentObj.partDate"
                            type="date"
                            placeholder="选择先还日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            disabled
                            placeholder="分期部分金额"
                            v-model="repaymentObj.moneyAmount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数" prop="stagesNum">
                        <el-input
                            size="small"
                            placeholder="请输入分期期数"
                            v-model="repaymentObj.stagesNum"
                            @input="inputChange($event)">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款金额" prop="stagesAmount">
                        <el-input class="inputpaddingtop2"
                            size="small"
                            disabled
                            placeholder="每期还款金额"
                            v-model="repaymentObj.stagesAmount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款日期" prop="stagesDay">
                        <el-select v-model="repaymentObj.stagesDay" class="width100"
                            placeholder="请选择每期还款日期" size="small">
                            <el-option
                                    v-for="(item, index) in 31"
                                    :key="index"
                                    :label="(index+1)+'日'"
                                    :value="(index+1)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="还款截止日期" prop="paybackDate">
                        <el-date-picker class="width100" size="small"
                            v-model="repaymentObj.paybackDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注说明" prop="remark">
                        <el-input
                            size="small"
                            clearable
                            placeholder="请输入备注说明"
                            v-model="repaymentObj.remark">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="cancelPlanClick" size="small">取消</el-button>
                        <el-button type="primary" @click="handleSubmitRepayment()" size="small">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
        },
        props: {
            eventDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入分期前偿还金额'));
                } else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)) {
                    callback(new Error('只能输入2位小数金额'));
                } else if (value*1 > this.repaymentObj.totalAmount*1) {
                    callback(new Error('分期前偿还金额不能大于还款金额!'));
                } else {
                    callback();
                }
            };
            var validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择还款截止日期'));
                } else if (this.repaymentObj.partDate != '' && this.repaymentObj.partDate != undefined) {
                    let date1 = new Date(value);//还款截止日期
                    let date2 = new Date(this.repaymentObj.partDate);//分期前偿还日期
                    let timestamp1 = date1.getTime();
                    let timestamp2 = date2.getTime();
                    if(timestamp2 > timestamp1)
                    {
                        callback(new Error('还款截止日期不能小于分期前偿还日期!'));
                    }
                } else {
                    callback();
                }
            };
            return {
                pickerOptions: {
                    disabledDate(v) {
                        return v.getTime() < new Date().getTime() - 86400000;//  - 86400000是否包括当天
                    }
                },
                updateFlag:false,
                repaymentObj:{type:'ALL'},
                RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
                rulesClientRepayment:{
                    type: [
                        { required: true, message: '请选择还款方式', trigger: 'change',},
                    ], 
                    totalAmount: [
                        { required: true, message: '请输入还款金额', trigger: 'change',},
                        { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
                    ], 
                    // paybackDate: [
                    //     { required: true, message: '请选择还款截止日期', trigger: 'change',},
                    // ], 
                    paybackDate: [
                        { required: true, validator: validatePass3, trigger: 'change',},
                    ], 
                    stagesDay: [
                        { required: true, message: '请选择每期还款日期', trigger: 'change',},
                    ], 
                    // partAmount: [
                    //     { required: true, message: '请输入分期前偿还金额', trigger: 'change',},
                    //     { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
                    // ], 
                    partAmount: [
                        { required: true, validator: validatePass2, trigger: 'change'},
                    ], 
                    partDate: [
                        { required: true, message: '请选择分期前偿还日期', trigger: 'change',},
                    ], 
                    stagesNum: [
                        { required: true, message: '请输入分期期数', trigger: 'change',},
                        { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
                    ], 
                },
                planList:[],
                oldrepaymentObj:{},

            };
        },
        mounted () {
            this.getplanlist()
        },
        methods: {
            handleSubmitRepayment(){
                this.$refs.ruleFormRepayment.validate((valid) => {
                    if (valid){
                        this.repaymentObj.caseId = this.eventDialog.caseId
                        api.getcase_payback_save(this.repaymentObj).then(res => {
                            if(!res.code){
                                this.updateFlag = false
                                this.getplanlist()
                            }
                        })
                    }
                })
            },
            getplanlist(){
                api.getcase_payback_planlist({caseId:this.eventDialog.caseId}).then(res => {
                     if(!res.code){
                        this.planList = res
                        if(this.planList.length > 0 ){this.repaymentObj = this.planList[0]}
                     }
                })
            },
            // 输入还款金额 输入分期期数
            inputChange(){
                if(this.repaymentObj.type == 'STAGES')
                {
                    if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
                    {
                        this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
                    }
                }

                if(this.repaymentObj.type == 'MIX')
                {
                    if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
                    {
                        this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1 - this.repaymentObj.partAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
                    }
                }
            },
            // 编辑
            UpdatePlanClick()
            {
                this.updateFlag = true
                this.oldrepaymentObj = JSON.parse(JSON.stringify(this.repaymentObj))
            }, 
            // 取消保存，还原数据
            cancelPlanClick(){
                this.updateFlag = false
                this.repaymentObj = JSON.parse(JSON.stringify(this.oldrepaymentObj))
            }, 
            //  
            handleClose() {
                this.$emit('update:eventTraDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.case-repayment-certificate{
    .case-detail-des{
        border:solid 1px #E5E6EB;
        .el-form-item{    margin-bottom: 12px;}
        .inputpaddingtop2{padding-top:3px}
    }
}
</style>
