<template>
    <div class="attendance">
        <!-- <m-header /> -->

        <div class="section">
            <h2>{{ classGroupName }}</h2>
            <div class="att">
                <div class="circel">
                    <van-circle
                        v-model="currentRate"
                        :rate="dataInfo.rate"
                        :speed="100"
                        color="#01c1b5"
                        :stroke-width="65"
                        layer-color="#EEEEEE">
                        <p><span>{{ dataInfo.alreadyInClass[0] }}</span>/{{ dataInfo.alreadyInClass[1] }}</p>
                        <p>已上课时</p>
                    </van-circle>
                    <p class="current-time">{{ dataInfo.classDate }} {{ dataInfo.classTime }}</p>
                </div>
                <div class="ite">
                    <span>{{ dataInfo.studentNum }}</span> 学生(人)
                </div>
                <div class="ite">
                    <span>{{ dataInfo.leagueNum }}</span> 退团(人)
                </div>
            </div>
        </div>

        <div class="section">
            <h2>考勤统计</h2>
        </div>
        <van-list v-model="loading"  v-if="show" key="records"
                    :finished="finished"
                    finished-text="- 没有更多数据了 -"
                    @load="statisticsList">
            <div class="stu_info" v-for="(item, index) in dataList" :key="index">
                <van-cell :center="true">
                    <template slot="icon">
                        <img class="logo" src="@/assets/images/icon_student.png" alt="">
                    </template>
                    <template slot="default">到课(天):{{ item.normalDay }}<br/>旷课(天):{{ item.truantDay }}<br/>请假(天):{{ item.leaveDay }}</template>
                    <template slot="title">
                        <div :class="item.truant ? 'truant' : ''">
                            {{ item.studentName }}<van-tag v-if="item.truant" type="danger" size="medium">连续旷课</van-tag>
                        </div>
                    </template>
                    <template slot="label">{{ item.subjectName | joinArray }}</template>
                </van-cell>
                <div class="stu-detail">
                    <div class="item" v-for="(i, id) in item.list" :key="id">
                        <p>{{ formatDate(i.classDate) }}<br/>{{ i.classWeek }}</p><p :class="i.status">{{ i.status | clockingIn }}</p>
                    </div>
                </div>
                
            </div>
        </van-list>
        <m-empty v-else key="records" />
    </div>
</template>
<script>
import MEmpty from '@/components/MEmpty'
import { statisticsInfo, statisticsList } from '@/api/teacher'
export default {
    name: 'attendance',
    components: { MEmpty },
    data() {
        return {
            currentRate: 0, // 图表的进度
            classGroupName: this.$route.query.classGroupName,
            classGroupId: this.$route.query.classGroupId,
            dataInfo: {
                alreadyInClass: [0, 0],
                rate: 0,
            }, // 基本数据
            show: true,
            loading: false,
            finished: false,
            params: {
                groupId: this.$route.params.groupId,
                page: 1,
                rows: 10,
                classGroupId: this.$route.query.classGroupId
            },
            dataList: []
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        window.document.title = '历史考勤统计'

        this.__init()
    },
    methods: {
        __init() {
            statisticsInfo({
                classGroupId: this.classGroupId
            }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.dataInfo = result.data
                    let aic = result.data.alreadyInClass
                    aic = aic ? aic.split('/') : [0, 0]
                    this.dataInfo.alreadyInClass = aic
                    this.dataInfo.rate = aic[0] ? (aic[0] / aic[1] * 100) : 0
                }
            })
        },
        statisticsList() {
            let params = this.params
            statisticsList(params).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.dataList = this.dataList.concat(result.data.rows)
                    this.loading = false
                    if(params.page >= Math.ceil(result.data.total / params.rows)) {
                        this.finished = true
                    }
                    params.page++
                } else {
                    this.finished = true
                }
                if(this.dataList.length <= 0) {
                    this.show = false
                }
            })
        },
        formatDate(value) {
            let temp = new Date(value.replace(/-/ig, '/'))
            let month = (temp.getMonth() + 1) >= 10 ? temp.getMonth() + 1 : '0' + (temp.getMonth() + 1)
            let day = (temp.getDate() + 1) >= 10 ? temp.getDate() + 1 : '0' + (temp.getDate() + 1)
            return month + '-' + day
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.attendance {
    min-height: 100vh;
}
.section {
    background-color: @whiteColor;
    margin-top: .02rem;
    margin-bottom: .08rem;
    &:nth-child(3n) {
        margin-bottom: 0;
    }
    h2 {
        position: relative;
        color: @mFontColor;
        font-size: .16rem;
        padding: .06rem .16rem .06rem .28rem;
        position: relative;
        border-bottom: 1px solid #f5f5f5;
        &::after {
            content: " ";
            position: absolute;
            left: .16rem;
            top: .1rem;
            width: .04rem;
            height: .15rem;
            background: @mColor;
            border-radius: .02rem;
        }
    }
}
.att {
    display: flex;
    align-items: center;
    min-height: 1.54rem;
    font-size: .12rem;
    color: @tFontColor;
    .circel {
        padding: 0 .23rem;
    }
    span {
        color: @mColor;
        font-size: .22rem;
        line-height: .3rem;
    }
    .ite {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 1.54rem;
        border-left: 1px solid #f5f5f5;
        span {
            display: block;
        }
    }

    .van-circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: @mFontColor;
        margin: 0 auto;
    }
    .current-time {
        padding-top: .04rem;
        text-align: center;
    }
}

/deep/.van-cell__title {
    font-size: .16rem;
    font-weight: bold;
    color: @mFontColor;
    flex-basis: 15%;
    .truant {
        color: @redColor;
    }

}
/deep/.van-cell__value, /deep/.van-cell__label {
    color: @tFontColor;
}
.logo {
    width: .45rem;
    height: .45rem;
    margin-right: .1rem;
}
/deep/.van-cell__value {
    line-height: 1.3;
    font-size: .12rem;
}
.stu_info {
    margin-bottom: .05rem;
    .van-cell:not(:last-child)::after {
        border-bottom: 0;
    }
    .van-tag {
        margin-left: .08rem;
        background: @redColor;
    }
}
.stu-detail {
    background: @whiteColor;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 .16rem .15rem;
    .item {
        border-left: 1px solid #f3f4f8;
        border-top: 1px solid #f3f4f8;
        border-bottom: 1px solid #f3f4f8;
        margin-left: -1px;
        margin-bottom: -1px;
        flex-basis: 14.2857%;
        font-size: .12rem;
        color: @tFontColor;
        text-align: center;
        &:nth-child(7n+7), &:last-child {
            margin-right: -1px;
            border-right: 1px solid #f3f4f8;
        }
        p {
            padding: .05rem 0;
            &:last-child {
                color: @mFontColor;
                border-top: 1px solid #f3f4f8;
            }

            &.LEAVE {
                color: @orangeColor;
            }
            &.TRUANT {
                color: @redColor;
            }
        }
    }
}

.dropdown {
    position: absolute;
    box-sizing: border-box;
    max-width: 100%;
    padding: .02rem .17rem;
    color: @mFontColor;
    font-size: .14rem;
    line-height: .2rem;
    right: .2rem;
    top: .06rem;
    border-radius: .04rem;
    border:1px solid rgba(224,224,224,1);   
    &::after {
        position: absolute;
        top: 50%;
        right: .06rem;
        margin-top: -5px;
        border: 3px solid;
        border-color: transparent transparent currentColor currentColor;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0.8;
        content: '';
    }
    &.down {
        color: @mColor;
        &::after {
            color: @mFontColor;
            margin-top: -1px;
            transform: rotate(135deg);
        }
    }
}
</style>