<template>
    <div class="layout-content-wrap">
        <el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="调解通话情况" name="mediateCalls"></el-tab-pane> -->
            <el-tab-pane label="调解员业绩" name="mediatorPerformance"></el-tab-pane>
            <el-tab-pane label="金融案件统计" name="financialCase"></el-tab-pane>
            <el-tab-pane label="对账报表" name="reconciliationReport"></el-tab-pane>
        </el-tabs>
        <components :is="activeName"></components>
    </div>
</template>
<script>
    export default {
        components: {
            // mediateCalls: () => import('./components/mediateCalls'), // 调解通话情况
            mediatorPerformance: () => import('./components/mediatorPerformance'), // 调解员业绩
            reconciliationReport: () => import('./components/reconciliationReport'), // 对账报表
            financialCase: () => import('./components/financialCase'), //金融案件统计

        },
        data() {
            return {
                activeName: 'mediatorPerformance'
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>