<template>
    <div class="layout-content-wrap case-detail">
        <div class="navigation-bar flex-row mb-16">
            <img src="../../../assets/image/Link.png"  height="22" alt="">
            <a>/</a>
            <a>案件包列表</a><a>/</a>
            <a>案件列表</a><a>/</a>
            <a>案件详情</a>
        </div>
        <div class="layout-tabs-content-box case-detail-nav flex-row background-color-fff border-radius-4 mb-16 flex-row-center">
            <span :class="navactive == 1 ?'active':''" @click="navactive=1">案件信息</span> 
            <span :class="navactive == 2 ?'active':''" @click="navactive=2">案件材料</span> 
            <span :class="navactive == 3 ?'active':''" @click="navactive=3">案件日志</span>
        </div>
        <div v-if="navactive == 1 " class="layout-tabs-content-box flex-row padding-0  f14">
            <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16" style="width: calc(100% - 370px);">
                <div class="case-detail-title f18">被申请人：<a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></div>
                <div class="flex-column">
                    <div class="case-detail-label f-weight500 f16">基本信息</div>
                    <div class="case-detail-des">
                        <span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
                        <span><a>委案机构：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>委案开始日期：</a><a>{{baseInfo.planStartTime}}</a></span>
                        <span><a>委案到期日期：</a><a>{{baseInfo.planStartTime}}</a></span>
                        <span><a>债务人姓名：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
                        <span><a>债务人手机号码：</a><a>{{ debtorEntityCardNo(baseInfo.debtorEntityList,25).phone }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
                        <span><a>委案期限：</a><a></a></span>
                        <span><a>委案渠道：</a><a></a></span>
                        <span><a>身份证号：</a><a> {{ debtorEntityCardNo(baseInfo.debtorEntityList,25).cardNo }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
                        <span><a>户籍地址：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
                    </div>
                    <div class="case-detail-label f-weight500 f16">债务信息</div>
                    <div class="case-detail-des">
                        <!-- <span><a>委托机构：</a><a>{{baseInfo.financialOrgName}}</a></span> -->
                        <span><a>合同编号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>业务流水号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>金融产品名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>金融机构名称：</a><a>{{baseInfo.financialOrgName}}</a></span>
                        <span><a>合同名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>委托时逾期天数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>借款合同签署时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>贷款笔数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>当前逾期金额：</a><a>{{baseInfo.moneyAmount}}</a></span>
                        <span><a>最低还款额(减免底线)：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>账龄：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>放款金额/借款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>欠款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>总分期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>逾期期数：</a><a>{{baseInfo.overdueTimes}}</a></span>
                        <span><a>未结清期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>逾期开始时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>还款日：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
                        <span><a>备注：</a><a>{{baseInfo.caseDescr}}</a></span>
                    </div>
                    <div class="case-detail-label f-weight500 f16">联系人信息</div>
                    <div class="case-detail-des flex-column">
                        <div>
                            <span><a>联系人：</a><a>李新华</a></span>
                            <span><a>与债务人关系：</a><a>本人</a></span>
                            <span><a>联系人手机：</a><a>15138026046</a></span>
                        </div>
                        <div>
                            <span><a>联系人：</a><a>秦大伟</a></span>
                            <span><a>与债务人关系：</a><a>其他</a></span>
                            <span><a>联系人手机：</a><a>15939186663</a></span>
                        </div>
                    </div>
                    <div class="case-detail-label f-weight500 f16">案件办理信息</div>
                    <div>
                        <el-tabs type="border-card">
                            <el-tab-pane>
                                <span slot="label">调解记录</span>
                                <el-table :data="tableData" :height="300" >
                                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                                    <el-table-column prop="A" label="跟进情况" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="B" label="调解进度" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="C" label="沟通对象" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="D" label="备注" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="E" label="预约回款情况" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="F" label="添加时间" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="G" label="添加人" show-overflow-tooltip ></el-table-column>
                                    <el-table-column  label="操作" width="170">
                                        <template slot-scope="scope">
                                            <div class="flex-row align-items-center">
                                                <el-button size="mini" @click="handleCaseAllocation(scope)">查看录音</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane>
                                <span slot="label"><i class="el-icon-s-flag"></i> 回款计划</span>
                                <el-table :data="tableData1" :height="300" >
                                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                                    <el-table-column prop="A" label="回款类型" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="B" label="约定还款金额" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="C" label="约定还款时间" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="D" label="备注信息" show-overflow-tooltip ></el-table-column>
                                    <el-table-column  label="操作" width="170">
                                        <template slot-scope="scope">
                                            <div class="flex-row align-items-center">
                                                <el-button size="mini" @click="handleCaseAllocation(scope)">编辑</el-button>
                                                <el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane>
                                <span slot="label"><i class="el-icon-s-flag"></i> 回款凭证</span>
                                <span class="f16">总计待还金额：14,289.86元，总计已还金额：0元</span>
                                <el-table :data="tableData2" :height="300" >
                                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                                    <el-table-column prop="A" label="凭证时间" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="B" label="凭证金额" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="C" label="上传者" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="D" label="上传时间" show-overflow-tooltip ></el-table-column>
                                    <el-table-column prop="E" label="备注信息" show-overflow-tooltip ></el-table-column>
                                    <el-table-column  label="操作" width="170">
                                        <template slot-scope="scope">
                                            <div class="flex-row align-items-center">
                                                <el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
            <!-- table -->
            <div class="flex-column" style="width: 350px; margin-left: 20px;">
                <div class="background-color-fff border-radius-4 p-16 flex-column">
                    <div class="case-detail-right-label f-weight500 f16">备注</div>
                    <div class="case-detail-right-des">
                        <span>孟利于2024-12-04 10:04:04备注</span>
                        <el-input class="mt-8" type="textarea" v-model="Qualitydesc" :rows="4"></el-input>
                    </div>
                    <div class="case-detail-label f-weight500 f16">质检评语</div>
                    <div class="case-detail-right-des">
                        <span>孟利于2024-12-04 10:04:04评语</span>
                        <el-input class="mt-8" type="textarea" v-model="Qualitydesc" :rows="4"></el-input>
                        
                    </div>
                </div>
                <div class="background-color-fff border-radius-4 p-16 flex-column mt-16">
                    <div class="flex-column item-trace">
                        <div class="flex-row justify-content-between case-pk-title">
                            <span>案件事项追踪</span>
                        </div>
                        <div class="case-pk-cont">
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:0,title:'短信发送追踪',caseNo:'1'}">
                                <span>短信发送追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:2,title:'视频调解追踪',caseNo:'1'}">
                                <span>视频调解追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:3,title:'文书生成追踪',caseNo:'1'}">
                                <span>文书生成追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:4,title:'文书签字追踪',caseNo:'1'}">
                                <span>文书签字追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:5,title:'文书签章追踪',caseNo:'1'}">
                                <span>文书签章追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:6,title:'文书送达追踪',caseNo:'1'}">
                                <span>文书送达追踪</span><span><a>1</a>/<a>2</a></span>
                            </div>
                            <div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:7,title:'还款凭证登记',caseNo:'1'}">
                                <span>还款凭证登记</span><span><a>1</a>/<a>2</a></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                
            </div>
        </div>
        <div v-if="navactive == 2 " class="layout-tabs-content-box flex-row padding-0  f14">
            <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16 width100" >
                <div class="flex-column">
                    <div class="case-detail-label f-weight500 f16">身份证明材料<a><i class="el-icon-plus"></i>上传材料</a></div>
                    <div class="case-detail-des">
                        <el-table :data="tableData" :height="300" >
                            <el-table-column type="index" label="序号" width="55"></el-table-column>
                            <el-table-column prop="A" label="材料类型" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="文件名称" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="F" label="上传时间" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="G" label="上传人" show-overflow-tooltip ></el-table-column>
                            <el-table-column  label="操作" width="170">
                                <template slot-scope="scope">
                                    <div class="flex-row align-items-center">
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="case-detail-label f-weight500 f16">证据材料<a><i class="el-icon-plus"></i>上传材料</a></div>
                    <div class="case-detail-des">
                        <el-table :data="tableData" :height="300" >
                            <el-table-column type="index" label="序号" width="55"></el-table-column>
                            <el-table-column prop="A" label="材料类型" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="文件名称" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="F" label="上传时间" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="G" label="上传人" show-overflow-tooltip ></el-table-column>
                            <el-table-column  label="操作" width="170">
                                <template slot-scope="scope">
                                    <div class="flex-row align-items-center">
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="case-detail-label f-weight500 f16">案件文书</div>
                    <div class="case-detail-des">
                        <el-table :data="tableData" :height="300" >
                            <el-table-column type="index" label="序号" width="55"></el-table-column>
                            <el-table-column prop="A" label="文书类型" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="文书名称" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="是否签章" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="是否完成签字" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="B" label="签字人" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="F" label="生成时间" show-overflow-tooltip ></el-table-column>
                            <el-table-column prop="G" label="操作人" show-overflow-tooltip ></el-table-column>
                            <el-table-column  label="操作" width="230">
                                <template slot-scope="scope">
                                    <div class="flex-row align-items-center">
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">上传</el-button>
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
                                        <el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="navactive == 3 " class="layout-tabs-content-box flex-row padding-0  f14">
            <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-32 width100" >
                <el-timeline>
                    <el-timeline-item timestamp="2018/4/12" placement="top">
                        <el-card>
                            <p>王小虎 提交于 2018/4/12 20:46</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/3" placement="top">
                        <el-card>
                            <p>王小虎 提交于 2018/4/3 20:46</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                        <el-card>
                            <p>王小虎 提交于 2018/4/2 20:46</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
        <!-- 事项追踪 -->
        <eventTracingDialog v-if="eventTraDialog" :eventTraDialog.sync="eventTraDialog" />
    </div>
</template>
<script>
import api from "@/services/caseManagement";
import { stubString } from "lodash";
import { subtract } from "lodash";
    export default {
        components: {
            eventTracingDialog: () => import('../../event-tracing/index.vue'),//事项追踪
        },
        data() {
            return {
                eventTraDialog:null,
                navactive:1,
                Qualitydesc:'结清应还金额：16776.74逾期未还费用：2486.88',
                tableData:[{A:'一次性全部还款',B:'承诺账户',C:'钟华丽-本人-188****2929',D:'CS',E:'回款金额:14289.86,回款时间:2024-12-05',F:'2024-12-05 09:13:29',G:'孟利'}],
                tableData1:[{A:'一次性全部回款',B:'14,289.86元',C:'2024-12-05',D:'无',E:'',F:'',G:'',H:''}],
                tableData2:[{A:'2024-12-05 00:00:00',B:'14,289.86元',C:'孟利',D:'2024-12-05 14:13:56',E:'',F:'',G:'',H:''}],
                caseId:'',
                baseInfo:{},



            }
        },
        computed:{
            // 获取抽屉drawer的内容高度
            drawerContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-200
            }
            
        },
        async created() {

            if (this.$route.query.caseId != undefined) {
                this.caseId = this.$route.query.caseId;
                this.getCaseInfoById();//获取详情
            }
        },
        methods: {
            debtorEntityCardNo(datalist,len){
                let datacardno=''
                let dataphone=''
                datalist.forEach((item,index) =>{
                    if(index == 0){
                        datacardno = item.cardNo
                        dataphone = item.phone
                    }
                    else{
                        datacardno += ','+item.cardNo
                        dataphone += ','+item.phone
                    }
                })
                
                return {cardNo:datacardno.substring(0,len),phone:dataphone.substring(0,len)};
            },
             // 获取详情
             getCaseInfoById(){ 
                let _that = this
                api.getCaseInfoById(this.caseId).then(res => {
                    console.log(res,'res')
                    if(!res.code){
                        this.baseInfo=res
                        
                        // 材料
                        // console.log('获取图片',res.caseFileEntityList)
                        let caseFileEntityList = []
                        res.caseFileEntityList.forEach((item)=>{
                            caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
                        })
                        _that.fileList = caseFileEntityList

                    }
                    
                })
            },
        }

    }
</script>
<style scoped lang="scss">
.case-detail{
    .case-detail-nav{
        span{ width: 100px;font-size: 18px; color: #86909C;cursor: pointer;}
        span:hover{ color: #C66A5B;}
        span.active{ color: #C66A5B;}
    }
    .case-detail-title{
        border-bottom: solid 2px #C66A5B99;
    }
    .case-detail-label{
        margin: 15px 0;
        a{
            font-size: 14px;
            color: #C66A5B;
            font-weight: 400;
            cursor: pointer;
            margin-left: 20px;
        }
    }
    
    .case-detail-des{
        background-color: #F7F8FA;
        padding: 10px 15px;
        color:#86909C;
        span{
            width: 25%;
            display: inline-block;
            margin: 5px 0;
        }
        span a:first-child{width: 160px;display: inline-block;}
        span a:last-child{color:#1D2129;}
    }
    .case-detail-right-label{margin: 0px 0 15px 0;}
    .case-detail-right-des{background-color: #F7F8FA;padding:10px;}

    .item-trace{
        border-radius: 8px;
        .case-pk-title{
            span:first-child{
                font-size: 18px;
                color:#1D2129;
                font-weight: 500;
            }
        }
        .case-pk-cont{
            padding: 10px 0 0px 0;
            position: relative;
            .resultplan{
                font-size: 32px;
                position: absolute;
                left: 115px;
                top: 130px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 165px;
                text-align: center;
            }
            div{
                margin-top:5px;
                margin-bottom:10px;
                color: #4E5969;
                background-color:#F7F8FA ;
                padding: 12px;
                border-radius: 2px;
                a{
                    font-weight: 600;
                }
                a:first-child{
                    color: #E8535A;
                }
            }
        }
    }
}

.el-badge{
    top: 3px;
}


</style>
<style  lang="scss">
    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
        color: #C66A5B;
    }
    .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover{
        color: #C66A5B !important;
    }
    .el-tabs--border-card > .el-tabs__header .el-tabs__item i{
        color:red !important;
    }
</style>
