<template>
    <div>
        <el-dialog :visible="true" width="1300px" class="dialog-case-record" :close-on-click-modal="false"
            @close="handleClose()">
            
            <div class="dialog-content dialog-case-trace">
                <el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleTabClick">
                    <el-tab-pane name="1">
                        <span slot="label"><span>短信发送记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="2">
                        <span slot="label"><span>电话呼叫记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="3">
                        <span slot="label"><span>视频调解记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="4">
                        <span slot="label"><span>文书生成记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="5">
                        <span slot="label"><span>文书签字记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="6">
                        <span slot="label"><span>文书送达记录</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="7">
                        <span slot="label"><span>还款计划</span></span>
                    </el-tab-pane>
                    <el-tab-pane name="8">
                        <span slot="label"><span>还款凭证</span></span>
                    </el-tab-pane>
                </el-tabs>
                
                 <div class=" case-trace-cont">
                    <!-- 短信发送追踪明细 -->
                    <smsDialogDetail v-if="activeName == '1'" :DialogDetail="eventTraDialog" />
                    <!-- 呼叫记录 -->
                    <CalllogDialog v-if="activeName == '2'" :eventTraDialog.sync="eventTraDialog" />
                    <!-- 视频调解追踪 -->
                    <voideDialog v-if="activeName == '3'" :eventTraDialog="eventTraDialog" />
                    <!-- 文书生成追踪明细 -->
                    <officeDialogDetail v-if="activeName == '4'" :DialogDetail="eventTraDialog" />
                    <!-- 文书签字追踪明细 -->
                    <!-- <officeWDialogDetail v-if="activeName == '5'" :DialogDetail="eventTraDialog" /> -->
                     <!-- 文书签字追踪 -->
                     <officeWriteDialog v-if="activeName == '5'" :eventTraDialog="eventTraDialog" />

                    <!-- 文书送达追踪明细 -->
                    <officeDeliveryDialogDetail v-if="activeName == '6'" :DialogDetail="eventTraDialog" />
                    <!-- 还款计划 -->
                    <!-- <RepaymentDialog v-if="activeName == '7'" :eventTraDialog.sync="repaymentDialog" /> -->
                    <!-- eventDialog:{caseId:this.$route.query.caseId}, -->
                    <RepaymentSchedule v-if="activeName == '7'" :eventDialog.sync="eventTraDialog" class="mt-16" />

                    <!-- 还款凭证 -->
                    <RepaymentRecordDialog v-if="activeName == '8'" :eventTraDialog.sync="eventTraDialog" />
                </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: {
            // eventTracingDialog: () => import('../../event-tracing/index.vue'),//事项追踪
            RepaymentSchedule: () => import('../../mediation-page/components/RepaymentSchedule.vue'),//还款计划
            RepaymentRecordDialog: () => import('./RepaymentRecordDialog.vue'),//还款凭证


            smsDialogDetail: () => import('../../event-tracing/dtraceDetail/smsDialogDetail.vue'),//短信发送追踪明细
            CalllogDialog: () => import('./CalllogDialog.vue'),//呼叫记录

            voideDialog: () => import('../../event-tracing/components/voideDialog.vue'),//视频调解追踪
            officeDeliveryDialogDetail: () => import('../../event-tracing/dtraceDetail/officeDeliveryDialogDetail.vue'),//文书送达追踪明细
            officeDialogDetail: () => import('../../event-tracing/dtraceDetail/officeDialogDetail.vue'),//文书生成追踪明细
            officeWDialogDetail: () => import('../../event-tracing/dtraceDetail/officeWDialogDetail.vue'),//文书签字追踪明细
            officeWriteDialog: () => import('../../event-tracing/components/officeWriteDialog.vue'),//文书签字追踪

        },
        props: {
            eventTraDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                calllogDialog:null,//呼叫记录
                activeName:'1',
                queryParam:{},
                tableData:[],
                total:0,

            };
        },
        mounted () {
            this.activeName = this.eventTraDialog.activeName
        },
        methods: {
            // tab切换
            handleTabClick(tab){
                // if(tab.name == '1'){
                //     eventTraDialog = {caseNo:'123'}
                // }else if(tab.name == '2'){
                //     calllogDialog = {title:'电话呼叫记录',caseNo:'123'}
                // }else if(tab.name == '3'){
                //     eventTraDialog = {title:'视频调解记录',caseNo:'123'}
                // }else if(tab.name == '4'){
                //     eventTraDialog = {title:'文书生成记录',caseNo:'123'}
                // }else if(tab.name == '5'){
                //     eventTraDialog = {title:'文书签字记录',caseNo:'123'}
                // }else if(tab.name == '6'){
                //     eventTraDialog = {title:'文书送达记录',caseNo:'123'}
                // }else if(tab.name == '7'){
                //     repaymentDialog = {title:'还款计划',caseNo:'123'}
                // }else if(tab.name == '8'){
                //     eventTraDialog = {title:'还款凭证',caseNo:'123'}
                // }else {
                    
                // }
            },
            handleClose() {
                this.$emit('update:eventTraDialog', null)
                this.$emit('RefreshClickList', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-case-record{
    .el-dialog .el-dialog__header{background-color: #C66A5B;}
    .el-dialog__header{background-color: #C66A5B;}
}
.dialog-case-trace{
    padding: 16px 20px;
    min-height:500px
}
.dialog-case-trace .zd-el-tabs-custom{
    margin-top: -61px ;
    margin-right: 25px;
}
.dialog-case-trace .zd-el-tabs-custom span{
    font-size: 16px;
    font-weight: 400;
    
}
.dialog-case-trace .case-trace-cont
{
    min-height: 500px;
}
</style>
<style  lang="scss">
.dialog-case-record{
    .el-dialog .el-dialog__header {
        background-color: #C66A5B;
        height: 43px !important;
        line-height: 50px !important;
    }
    .el-tabs__item{color: #FFFFFFB2;}
    .zd-el-tabs-custom .el-tabs__item.is-active {
        color: #fff !important;
    }
    .zd-el-tabs-custom .el-tabs__active-bar{
        background-color: #fff !important;
    }
    .el-tabs__nav-wrap::after {
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #fff !important;
    }
}

</style>
