<template>
    <div class="schedule">
        <!-- <m-header :backUrl="backUrl" background /> -->
        <div class="detailHeader">
            <van-cell-group class="detailCard">
                <van-cell style="padding: .18rpx; height: .12rpx;">
                    <template #title>
                        <div class="detailTitle">
                            <span class="teachMode">{{ teachMode == 'ONLINE' ? '线上' : null }}{{ teachMode == 'OFFLINE' ? '线下' : null }}</span>
                            <span :class="['courseType', type]">{{ type | coursesType }}</span>
                            <span style="line-height: 1.2;vertical-align: bottom;">{{ className }}</span>
                        </div>
                        <p class="detailTime van-hairline--bottom">{{ startTimeFormat }} {{ startClassTime | formatDate }} - {{ endClassTime | formatDate }}</p>
                    </template>
                    <template #label>
                        <div class="detailLabel">
                            主讲老师：{{ teacherName }}<br />
                            <!-- <p >最后提交时间：{{ lastDate }}</p> -->
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- <van-cell-group>
            <van-cell :center="true" style="padding: .1rem .16rem;">
                <template slot="title">
                    <span style="padding-right: 0.1rem;">到课：{{ studentNum }}/{{ totalStudentNum }}</span>
                    <span style="padding-right: 0.1rem;">请假：{{ leaveStudentNum }}</span>
                    <span>欠费：{{ paymentNum }}</span>
                </template>
            </van-cell>
        </van-cell-group> -->
        <div class="recordDetail" v-if="dataShow">
            考勤异常学员名单
            <!-- <span style="padding-right: 0.1rem;">到课：{{ studentNum }}/{{ totalStudentNum }}</span>
            <span style="padding-right: 0.1rem;">请假：{{ leaveStudentNum }}</span>
            <span>欠费：{{ paymentNum }}</span> -->
        </div>
        <van-list v-model="loading" v-if="dataShow" key="data"
            :finished="finished"
            finished-text=" "
            :immediate-check="false"
            @load="getFindStudentAttendance">
            <van-cell-group v-for="(item, index) in dataList" :key="index" style="margin-top: 0">
                <van-cell style="align-items: center;padding: .15rem .12rem;">
                    <template #icon>
                        <van-image :src="item.avatar ? item.avatar : avatar" style="width: .32rem; height: .32rem; border-radius: 50%; overflow: hidden;">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                    </template>
                    <template #title>
                        <span style="padding-left: 0.05rem" :class="[item.paymentStatus == 'NON_PAYMENT' ? 'red' : null]">{{ item.username }}</span>
                    </template>
                    <template #default>
                        <!-- <p v-if="item.courseSchedule && item.courseSchedule.status != 'NOT_START'" style="font-weight: 500;">
                            <span v-if="!item.status">
                                未签到
                            </span>
                            <span v-else-if="item.status == 'NORMAL'" style="color: #FF802C">
                                {{ item.status | clockingIn }}
                            </span>
                            <span v-else-if="item.status == 'LEAVE'" style="color: #FF802C">
                                {{ item.status | clockingIn }}
                            </span>
                            <span v-else-if="item.status == 'TRUANT'" style="color: #FF4444">
                                {{ item.status | clockingIn }}
                            </span>
                            <span v-else>
                                {{ item.status | clockingIn }}
                            </span>
                        </p> -->
                        <p>
                        <span class="backVisit" @click="gotoVisit(item)">回访</span>
                        </p>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty class="empty" v-else key="data" msg="暂无数据" />
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import dayjs from 'dayjs'
import MEmpty from '@/components/MEmpty'
import { utilDate } from '@/common/util'
// import setLoading from '@/common/loading'
import { getAttendanceErrorStudent } from './api'
export default {
    name: 'schedule',
    components: { MHeader, MEmpty },
    data() {
        const query = this.$route.query
        return {
            id: query.id,
            studentNum: query.studentNum,
            teacherName: query.teacherName,
            totalStudentNum: query.totalStudentNum,
            leaveStudentNum: query.leaveStudentNum,
            startClassTime: query.startClassTime,
            teachMode: query.teachMode,
            type: query.type,
            paymentNum: 0,
            startTimeFormat: dayjs(query.startClassTime).format('MM月DD日'),
            endClassTime: query.endClassTime,
            lastDate: null,
            className: query.name,
            loading: false,
            finished: false,
            params: {
                date: utilDate(new Date()),
                page: 1,
                rows: 10
            },
            dataShow: true, // 是否有数据
            dataList: [],
            backUrl: {
                status: true,
                path: '/schedule'
            },
            avatar: require('../../assets/images/icon_student.png'),
        }
    },
    mounted() {
        this.getFindStudentAttendance()
    },
    methods: {
        async getFindStudentAttendance() {
            // let params = this.params
            await getAttendanceErrorStudent({ search: this.id*1 }).then(res => {
           
                let result = res.data
              
                this.loading = false
        
                if(res.code == 200) {
                    // 重点这句，判断是不是重复请求了
                    // if (this.dataList.length > 0 && result.data.pageNo == 1) {
                    //     return;
                    // }
                    // params.page = result.data.pageNo
                  
                    this.dataList =result
                   
                    this.finished = true
                //     this.dataList.forEach(item => {
                //         if(item.paymentStatus == 'NON_PAYMENT') {
                //             this.paymentNum += 1
                //         }
                //     })
                //     if(params.page >= result.data.totalPage) {
                //         this.finished = true
                //     }
                //     this.params.page++
                // } else {
                //     this.finished = true
                }
                // 判断是否有数据
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }

                // this.lastDate = this.dataList[0] && this.dataList[0].updateTime ? dayjs(this.dataList[0].updateTime).format('MM-DD hh:mm') : null
            })
        },
        gotoVisit(row){
            this.$router.push({ path: "/addVisit",query:{name:'考勤回访',isAttError:true,info:{userId:row.userId,objectId:row.id,username:row.username, type:'常规回访',purpose:'考勤申诉'}},})  
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.link { color: @whiteColor; }
.schedule {
    min-height: 100vh;
}
/deep/.empty {
    .icon {
        margin-top: .2rem;
    }
}
.recordDetail {
    margin-top: .06rem;
    padding: .15rem .1rem .1rem;
    font-size: .14rem;
    color: #808080;
}
.backVisit {
    color: #01C1B5;
    cursor: pointer;
}
/deep/.van-cell__title {
    font-size: .16rem;
    color: @mFontColor;
}
/deep/.van-cell-group {
    margin-top: .05rem;
}
.title-content {
    font-weight: bold;
    flex: 1 auto;
    max-width: 82%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .van-cell__label {
        font-weight: 400;
        margin-top: .06rem;
        display: flex;
        align-items: center;
    }
    .van-icon-location, .van-icon-video-o {
        margin-right: .05rem;
    }
    .groupName {
        display: block;
        font-size: .14rem;
        font-weight: 400;
        padding-bottom: 0.04rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
/deep/.van-cell__value, /deep/.van-cell__label {
    color: @tFontColor;
    span {
        padding-right: .1rem;
    }
}

.red {
    color: red;
}

.detailHeader {
    background-color: #01C1B5;
    height: 1rem;
    padding-top: .1rem;
    position: relative;
    .detailCard {
        position: absolute;
        top: .1rem;
        left: 0;
        width: calc(100% - .24rem);
        margin: 0 .12rem;
        border-radius: .1rem;
        overflow: hidden;
    }
    .detailTitle {
        font-size: .18rem;
        line-height: 1.5;
        font-weight: 500;
        padding-bottom: .05rem;
        color: #333;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .detailTime {
        color: #333;
        padding: .06rem 0;
        font-size: .16rem;
    }
    .detailLabel {
        color: #666;
        font-size: .13rem;
        line-height: 1.7;
        padding: .08rem 0 .02rem;
    }
}

</style>