<template>
	<view class="jobDetails-box">
        <navbar class="navbarSticky" bg="#F6F6F6">
			<view class="jobDetails-header-box">
				<van-icon class="jobDetails-header-left" name="arrow-left" @click="back"/>
                <text class="jobDetails-header-title">作业情况</text>
            </view>
		</navbar>
        <view class="jobDetails-content">
            <view class="jobDetails-content-header">
                <view class="jobDetails-conten-title flex">
                    <text>{{jobDetails.CourseName}}</text>
                    <view>{{jobDetails.HomeWorkTitle}}</view>
                </view>
                <view class="jobDetails-num-box flex">
                    <view class="jobDetails-num flex">
                        <text>学生数</text>
                        <view>{{jobDetails.StuNum}}</view>
                    </view>
                    <view class="jobDetails-num flex">
                        <text>已提交</text>
                        <view>{{jobDetails.SubmitNum}}</view>
                    </view>
                    <view class="jobDetails-num flex">
                        <text>已批阅</text>
                        <view>{{jobDetails.ReviewNum?jobDetails.ReviewNum:0}}</view>
                    </view>
                    <view class="jobDetails-num flex">
                        <text>优秀</text>
                        <view>{{jobDetails.ExcellentNum?jobDetails.ExcellentNum:0}}</view>
                    </view>
                </view>
            </view>
            <view class="index-student-information">
                <van-empty description="暂无数据" v-if="dataList.length === 0" />
                <jobDetailsComponents  v-if="dataList.length>0" :dataList="dataList"></jobDetailsComponents>
            </view>
            <Loadmore :state="pageState" />
        </view>
	</view>
</template>
<script>
    import Loadmore from "@/components/loadmore.vue";
    import jobDetailsComponents from '@/components/index/scoreDetails/jobDetailsComponents'
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			
		},
		components: {
            jobDetailsComponents,
            Loadmore
        },
		setup() {
            let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
                obj:{},
				Msg: {
					HomeWorkId: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                HomeWorkId:'',
                jobDetails: {},
                dataList:[],
                pageState:'more'
			});
            let methods = {
                back(){
                    uni.reLaunch({
                        url: '/pages/index/workSituation?tabNme=' + '作业情况' 
					});
                },
                //获取作业情况列表
				getHomeWorkDetailsList(){
					proxy.$request("/Teacher/GetHomeWorkDetails", data.Msg).then(res => {
						if(res){
                            data.jobDetails = res.Data
							data.dataList = res.Data.DataList;
                            data.pageState = "none";
						}
					})
				},
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
        onLoad(option) {
            this.Msg.HomeWorkId = option.HomeWorkId
            this.getHomeWorkDetailsList()
		},

	};
</script>
<style scoped>
    .index-student-information{
        min-height: 800rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 0 0;
		padding: 71rpx 0 30rpx 0;
    }
    .jobDetails-num view{
        font-size: 36rpx;
        font-weight: 800;
        font-style: italic;
        margin-top: 15rpx;
    }
    .jobDetails-num text{
        font-size: 20rpx;
        font-weight: 400;
    }
    .jobDetails-num{
        flex-direction: column;
        color: #CE8086;
    }
    .jobDetails-num-box{
        justify-content: space-between;
        padding: 70rpx 100rpx 35rpx 100rpx;
    }
    .jobDetails-conten-title view{
        font-size: 50rpx;
        font-weight: 800;
    }
    .jobDetails-conten-title text{
        font-size: 36rpx;
        font-weight: 400;
        margin-bottom: 10rpx;
    }
    .jobDetails-conten-title{
        padding: 50rpx 50rpx 0 50rpx;
        flex-direction: column;
        color: #282828;
        letter-spacing: 1rpx;
    }
    .jobDetails-content-header{
        
    }
    .jobDetails-content{
        position: relative;
        z-index: 2;
    }
    .jobDetails-box{
        background: #FCEEEF;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    .jobDetails-header-title{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 37rpx 31rpx;
        text-align: center;
        letter-spacing: 1rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #282828;
    }
    .jobDetails-header{
        margin: 50rpx 50rpx 0 50rpx;
        align-items: center;
    }
    .jobDetails-header-left{
        font-size: 40rpx;
        position: relative;
        z-index: 3;
    }
	.jobDetails-header-box{
        padding: 37rpx 31rpx;
        position: relative;
    }
    .navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
</style>
