<template>
	<view class="jobDetails-box flex" style="flex-direction: column;">
		<navbar class="navbarSticky" bg="#FCEEEF">
			<view class="jobDetails-header-box flex">
				<van-icon class="jobDetails-header-left" name="arrow-left" @click="back"/>
				<text class="jobDetails-header-title">作业情况</text>
			</view>
		</navbar>
        <view class="jobDetails-content flex" style="flex:1;height: 1px;flex-direction: column;">
            <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.ReadNum?jobDetails.ReadNum:0}}</view>
                    </view>
                    <view class="jobDetails-num flex">
                        <text>优秀</text>
                        <view>{{jobDetails.GoodNum?jobDetails.GoodNum:0}}</view>
                    </view>
                </view>
            </view>
            <view class="index-student-information" style="flex:1;">
                <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";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {
			
		},
		components: {
            jobDetailsComponents,
			navbar,
            Loadmore
        },
		setup() {
            let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
                obj:{},
				Msg: {
					HomeWorkId: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                HomeWorkId:'',
                jobDetails: {},
                dataList:[],
                pageState:'more'
			});
            let methods = {
                back(){
					uni.navigateBack({
						delta: 1
					})
                
                },
                //获取作业情况列表
				getHomeWorkDetailsList(){
                    data.pageState = "loading";
					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;
		flex:1;
        text-align: center;
        padding-right: 40rpx;
    }
    .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: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
    }
    .navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
</style>
