<template>
    <view class="approve-list">
        <view class="l-tabs">
            <view @click="tabChange(0)">
                <view :class="['t-txt', tabIdx==0?'active':'']">
                    <text>预约审批</text>
                    <view class="t-label">99</view>
                </view>
            </view>
            <view @click="tabChange(1)">
                <view :class="['t-txt', tabIdx==1?'active':'']">
                    <text>请假审批</text>
                    <view class="t-label">99</view>
                </view>
            </view>
            <view @click="tabChange(2)">
                <view :class="['t-txt', tabIdx==2?'active':'']">
                    <text>换班审批</text>
                    <view class="t-label">99</view>
                </view>
            </view>
        </view>
        <view class="l-bar">
            <view>审核人数:3人</view>
            <view @click="toRecord">审批记录</view>
        </view>
        <view class="l-null" v-if="false">
            <image></image>
            <view>抱歉，没有相关课程订单信息...</view>
        </view>
        <view class="l-list" v-else>
            <view class="l-item">
                <view class="l-content">
                    <view class="c-user">
                        <image></image>
                        <view>胡可课</view>
                    </view>
                    <view class="c-content">
                        <view class="c-name">羽毛球课程(羽毛球课)</view>
                        <view class="c-times">
                            <view v-for="(e, i) in approveList" :key="i">2020-08-22 10:30</view>
                        </view>
                    </view>
                    <view class="c-status">
                        <view class="s-icon" v-if="true"></view>
                        <view class="s-txt s-active" v-else>通过</view>
                    </view>
                </view>
                <view class="l-reason">
                    <view>原因:</view>
                    <view>作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内…</view>
                </view>
                <view class="l-unfold">
                    <view>
                        <text>展开</text>
                        <image mode="aspectFit" src="/static/images/arrow_c874.png"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="l-bot-bar">
            <view class="bb-select">
                <view></view>
                <text>全选</text>
            </view>
            <view class="bb-btns">
                <view hover-class="hover-active">不同意</view>
                <view hover-class="hover-active">同意</view>
            </view>
        </view>
    </view>
</template>

<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util';
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState([ 'storeInfo' ]),
    },
    data(){
        return {
            tabIdx: 0,
            approveList: []
        }
    },
    onLoad(options){
        this.getApproveList();
    },
    methods:　{
        tabChange(i){
            this.tabIdx = i;
        },
        toRecord(){
            util.routeTo(`/pages/approve/record/record`,'nT');
        },
        getApproveList(approve_type = 0){
            let { storeInfo } = this;
            servers.get({
                url: API.approve.getApproveList,
                data: {
                    approve_type,
                    stadium_id: storeInfo.id,
                    is_approve_record: 0
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                let _list = res.list || [];
                this.approveList = _list;
                console.warn('approve list --->', res);
            })
        }
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .approve-list{  
        padding-bottom: 120upx;
        padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
    }
    .l-tabs{
        margin-bottom: 28upx;
        background-color: #fff;
        @include centerFlex(center);
        >view{
            flex-grow: 0;
            width: 33.33%;
            display: flex;
            justify-content: center;
            .t-txt{
                position: relative;
                height: 96upx;
                line-height: 96upx;
                font-size: 28upx;
                color: #333;
                .t-label{
                    position: absolute;
                    right: -34upx;
                    top: 18upx;
                    width: 32upx;
                    height: 32upx;
                    border-radius: 50%;
                    line-height: 32upx;
                    text-align: center;
                    font-size: 20upx;
                    font-weight: 400;
                    color: #fff;
                    background-color: #FF4444;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &.active{
                    font-weight: 600;
                    color: $themeColor;
                    &::after{
                        content: '';
                        position: absolute;
                        display: block;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 8upx;
                        background-color: $themeColor;
                        border-radius: 4upx;
                    }
                }
            }
        }
    }
    .l-bar{
        padding: 0 50upx;
        height: 92upx;
        background-color: yellowgreen;
        @include centerFlex(space-between);
        >view{
            font-size: 28upx;
            line-height: 40upx;
            &:first-child{
                max-width: 60%;
                color: #333;
                @include textHide(1);
            }
            &+view{
                color: $themeColor;
                font-weight: 600;
            }
        }
    }
    .l-list{
        padding: 0 24upx;
        .l-item{
            padding: 24upx;
            background-color: #fff;
            .l-content{
                display: flex;
                justify-content: space-between;
                .c-user{
                    flex-shrink: 0;
                    margin-right: 30upx;
                    >image{
                        margin: 0 auto 8upx;
                        display: block;
                        width: 100upx;
                        height: 100upx;
                        border-radius: 50%;
                        background-color: skyblue;
                    }
                    >view{
                        max-width: 120upx;
                        line-height: 40upx;
                        text-align: center;
                        font-size: 28upx;
                        color: #9a9a9d;
                        @include textHide(1);
                    }
                }
                .c-content{
                    flex-grow: 1;
                    padding-top: 26upx;
                    .c-name,.c-times>view{
                        font-size: 28upx;
                        line-height: 52upx;
                        color: #333;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .c-status{
                    flex-shrink: 0;
                    padding-top: 60upx;
                    .s-icon{
                        width: 36upx;
                        height: 36upx;
                        border: 2upx solid #9a9a9d;
                        border-radius: 50%;
                        >image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .s-txt{
                        font-size: 28upx;
                        line-height: 40upx;
                        color: $themeColor;
                        &.s-active{
                            color: #FF4444;
                        }
                    }
                }
                
            }
            .l-reason{
                padding-top: 14upx;
                border-top: 2upx solid #D8D8D8;
                display: flex;
                >view{
                    &:first-child{
                        flex-shrink: 0;
                        margin-right: 20upx;
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #333;
                    }
                    &+view{
                        flex-grow: 1;
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #9a9a9d;
                    }
                }
            }
            .l-unfold{
                padding: 10upx 0 0;
                @include centerFlex(flex-end);
                >view{
                    font-size: 28upx;
                    line-height: 46upx;
                    color: $themeColor;
                    >image{
                        margin-left: 10upx;
                        width: 24upx;
                        height: 24upx;
                    }
                }
            }
        }
    }
    .l-null{
        padding-top: 94upx;
        >image{
            margin: 0 auto 20upx;
            display: block;
            width: 346upx;
            height: 346upx;
            background-color: skyblue;
        }
        >view{
            text-align: center;
            line-height: 44upx;
            font-size: 32upx;
            color: #9A9A9D;
        }
    }
    .l-bot-bar{
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 10upx 24upx;
        padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        width: 100%;
        background-color: #fff;
        @include centerFlex(space-between);
        .bb-select{
            flex-shrink: 0;
            line-height: 40upx;
            font-size: 28upx;
            color: #333;
            @include centerFlex(flex-start);
            >view{
                margin-right: 14upx;
                width: 36upx;
                height: 36upx;
                border-radius: 50%;
                border: 2upx solid #9a9a9d;
            }
            
        }
        .bb-btns{
            flex-shrink: 0;
            @include centerFlex(flex-end);
            >view{
                width: 220upx;
                height: 88upx;
                line-height: 84upx;
                text-align: center;
                border-radius: 44upx;
                border: 2upx solid $themeColor;
                color: $themeColor;
                &+view{
                    margin-left: 20upx;
                    background-color: $themeColor;
                    color: #fff;
                }
            }
        }
    }
</style>