<template>
    <div class="main">
        <div class="container">
            <el-tabs tab-position="top" @tab-click="tabClick">
                <el-tab-pane label="备用金申请总览">
                    <examine-petty @setTagNumbers="setTagNumbers" tag="overview" ref="eaxmine"></examine-petty>
                </el-tab-pane>
                <el-tab-pane :lazy="true">
                    <span slot="label" class="petty-data-simple">
                        <span v-if="tagNumbers.approvalPending"><el-badge :value="tagNumbers.approvalPending" :max="99" class="badges">备用金待审批
                        </el-badge></span>
                        <span v-else>备用金待审批</span>
                    </span>
                    <examine-petty @setTagNumbers="setTagNumbers" tag="unapprove"></examine-petty>
                </el-tab-pane>
                <!-- <el-tab-pane :lazy="true">
                    <span slot="label" class="petty-data-simple">
                        <el-badge :value="tagNumbers.approvalPending" :max="99" class="badges">备用金已审批
                        </el-badge>
                    </span>
                    <examine-petty @setTagNumbers="setTagNumbers" pettyApproval="1"></examine-petty>
                </el-tab-pane> -->
                <el-tab-pane :lazy="true">
                    <span slot="label" class="petty-data-simple">
                        <span v-if="tagNumbers.repaymentCount"><el-badge :value="tagNumbers.repaymentCount" :max="99" class="badges">还款待审批
                        </el-badge></span>
                        <span v-else>还款待审批</span>
                    </span>
                    <examine-repay @setTagNumbers="setTagNumbers"></examine-repay>
                </el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>
<script>
import ExaminePetty from "./components/examinePetty"
import ExamineRepay from "./components/examineRepay.vue"
export default {
    components: {
        ExaminePetty,
        ExamineRepay
    },
    
    data() {
        return {
            tagNumbers: {
                approvalPending: 0,
                repaymentCount: 0
            },
            
            drawerVisible: true

        }
    },
    methods: {
        setTagNumbers(data){
            this.tagNumbers = {...this.tagNumbers,...data}
        },
        tabClick(tab, event){
            if(parseInt(tab.index) === 0){
                this.$refs.eaxmine.getexamineList(false)
            }
        }
    }
    
}
</script>
<style scoped lang="scss">
.main {
    padding: 15px;

    .footer {
        text-align: right;
    }

    .drawerHeader,
    .drawerContainer {
        padding: 15px 15px 0;
    }
}
</style>