<template>
    <div class="approval">
        <van-sticky>
            <!-- <m-header :isFixed="false" :isNative="false" :backUrl="backUrl" /> -->
            <div class="user-container m-shadow">
                <van-grid :column-num="3" :border="false">
                    <van-grid-item text="需我审批" :badge="upcoming" @click="gotoMyApproval(1)">
                        <template #icon><i class="icon icon1"></i></template>
                    </van-grid-item>
                    <van-grid-item text="我发起的" @click="gotoMyApproval(2)">
                        <template #icon><i class="icon icon3"></i></template>
                    </van-grid-item>
                    <van-grid-item text="我相关的" @click="gotoMyApproval(3)">
                        <template #icon><i class="icon icon2"></i></template>
                    </van-grid-item>
                </van-grid>
            </div>
        </van-sticky>

        <apply-modal v-if="dataShow" :applyList="applyList" />
        <m-empty v-else />
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MEmpty from '@/components/MEmpty'
import { classify, todoCount } from './api'
import ApplyModal from './modal/applyModal'
export default {
    name: 'approval',
    components: { MHeader, ApplyModal, MEmpty },
    data() {
        return {
            applyStatus: false,
            applyList: [],
            dataShow: true,
            upcoming: null,
            backUrl: {
                status: true,
                path: '/home'
            },
        }
    },
    async mounted(){
        document.title = 'OA审批'
        try {
            const res = await todoCount()
            // 我的待审批数
            const result = res.data
            const upcoming = result > 0 ?result : null
            this.upcoming = upcoming && upcoming > 99 ? '99+' : upcoming
        } catch {
            //
        }
        this.onApplyList()
    },
    methods: {
        async onApplyList() {
            try {
                let res = await classify()
                let tempList = res.data || []
                tempList.forEach(e => {
                    e.process_list2 = []
                    // 判断是否有子分类
                    if(e.process_list && e.process_list.length > 0) {
                        e.process_list.forEach(child => {
                            // 父级分类
                            if(child.sub == 0) {
                                e.process_list2.push(child)
                            }
                        })
                    }
                })
                this.applyList = res.data
                this.dataShow = res.data.length > 0 ? true : false
            } catch {
                //
                this.dataShow = false
            }
            this.applyStatus = true
        },
        gotoMyApproval(val){
            this.$router.push({path:"/myApproval",query:{classify:val}})
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
/deep/.van-tab--active {
    color: #EF5A50;
}
/deep/.van-tabs__line {
    background-color: @mColor;
}
.approval {
    min-height: 100vh;
}
.header_block {
    // background: @mColor;
}
.user-container {
    background: @whiteColor;
    padding: .05rem .08rem;
    // margin: 0 .16rem .1rem;
    margin-bottom: .1rem;
    color: @tFontColor;
    font-size: .14rem;
    // border-radius: .05rem;
    .item {
        flex: 1;
        color: #4F4F4F;
        font-size: .14rem;
    }
    .icon {
        display: inline-block;
        width: .34rem;
        height: .35rem;
    }
    .icon1 {
        background: url('./images/a_1.png') no-repeat center;
        background-size: contain;
    }
    .icon2 {
        background: url('./images/a_2.png') no-repeat center;
        background-size: contain;
    }
    .icon3 {
        background: url('./images/a_3.png') no-repeat center;
        background-size: contain;
    }
}

</style>