<template>
    <div>
        <el-dialog :title="eventTraDialog.title" :visible="true" width="1300px" append-to-body :close-on-click-modal="false" 
            @close="handleClose">
            <div class="dialog-content repayment-trace">
                <div class="pt-8 border-b-solid-lighter-1">
                    <div class="height-30 flex-row align-items-center justify-content-between mb-8">
                        <div class="f18 color-text-primary">债务信息</div>
                    </div>
                    <el-collapse-transition>
                        <el-row :gutter="56">
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">当前逾期金额</span>
                                    <el-input v-model.trim="queryParam.pkgName" disabled>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">最低还款额</span>
                                    <el-input v-model.trim="queryParam.pkgName" disabled>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">放款金额/本金</span>
                                    <el-input v-model.trim="queryParam.pkgName" disabled>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">欠款本金</span>
                                    <el-input v-model.trim="queryParam.pkgName" disabled>
                                    </el-input>
                                </div>
                            </el-col>
                            
                            
                            
                        </el-row>
                    </el-collapse-transition>

                    <div class="height-30 flex-row align-items-center justify-content-between mb-8">
                        <div class="f18 color-text-primary">还款方案</div>
                    </div>
                    <el-collapse-transition>
                        <el-row :gutter="56">
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款方式</span>
                                    <el-select v-model="queryParam.repaymethod"
                                            clearable placeholder="请选择还款方式"
                                            class="width100">
                                        <el-option
                                                v-for="item in repaymentTypeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款金额</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期前偿还金额</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">先还日期</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期部分金额</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 0 || queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款日期</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期期数</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">每期还款金额</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">每期还款日期</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                            <el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">第一期还款日期</span>
                                    <el-input v-model.trim="queryParam.pkgName"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </el-collapse-transition>
                    <el-collapse-transition>
                        <el-row :gutter="56">
                            <el-col :span="20">
                                <div class="flex-row-center align-items-center height-40 mb-8">
                                    <span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">备注说明</span>
                                    <el-input v-model.trim="queryParam.pkgName">
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="flex-row align-items-center justify-content-end">
                                    <el-button type="primary" @click="handleSearch">保存</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-collapse-transition>
                    
                </div>
                <!-- table -->
                <div class="pt-8">
                    <div class="height-56 flex-row align-items-center justify-content-between">
                        <div class="f22 color-text-primary">还款计划列表</div>
                        <div class="flex-row">
                            
                        </div>
                    </div>
                    
                    <div class="case-table">
                        <el-table :data="tableData" :height="`${contentHeight}`" >
                            <el-table-column type="index" label="序号" width="55"></el-table-column>
                            <el-table-column prop="pkgName" label="回款类型" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="planStartTime" label="回款策略" show-overflow-tooltip >
                                <template slot-scope="scope">
                                    <span >{{ scope.row.planStartTime }}
                                        一次还清
                                        全部分期：还款金额、分期期数、每期还款金额、每期还款日期、还款截止日期
                                        部分先还加分期：还款金额、分期钱偿还金额、先还日期、分期部分金额、分期期数、每期还款金额、每期还款日期、还款截止日期
                                        其他：还款金额
                                    </span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="entrustingAgencyName" label="约定还款金额" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="channel" label="约定还款日期" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="channel" label="备注" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="channel" label="操作人" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="planStartTime" label="操作时间" show-overflow-tooltip >
                                <template slot-scope="scope">
                                    <span >{{ scope.row.planStartTime | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column  label="操作" width="120">
                                <template slot-scope="scope">
                                    <div class="flex-row align-items-center">
                                        <el-button size="mini" @click="handleDelete(scope)">编辑</el-button>
                                        <el-button size="mini" @click="handleBackCase(scope)">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            
                        </el-table>
                    </div>
                   
                    <div class="text-center pt-16">
                        <el-pagination
                            @size-change="getCaseInfoList"
                            @current-change="getCaseInfoList"
                            :current-page="queryParam.current"
                            :page-size="queryParam.size"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
        },
        props: {
            eventTraDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
            
                queryParam:{},
                tableData:[],
                total:0,
                repaymentTypeOptions:[{label:'一次还清',value:'0'},{label:'全部分期',value:'1'},{label:'部分先还加分期',value:'2'},{label:'其他',value:'3'}]

            };
        },
        mounted () {
            console.log(this.eventTraDialog,'eventTraDialog')
        },
        methods: {
            
            handleClose() {
                this.$emit('update:eventTraDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.repayment-trace{
    padding: 0px 20px 16px 20px;
    max-height:800px
}
.repayment-width{width: 120px;}

</style>