<template>
	<view class="operation-box">
		<block v-if="dataList && dataList.length>0">
		<view class="operation activeOne"
        v-for="(item,index) in dataList" :key="index">
            <view class="operation-center-box" @click="JobDetails(index)">
                <view class="operation-center-line"></view>
                <view class="operation-center flex">
                    <view class="operation-left">
                        <view class="operation-name">{{item.HomeWorkTitle}}</view>
                        <view class="operation-state flex">
                            <view class="operation-state-point"></view>
                            <view class="operation-state-text">{{item.Status==0?'未开始':(item.Status==1?'进行中':'已结束')}}</view>
                        </view>
                    </view>
                    <view class="operation-right flex">
                        <view class="homework-score flex">
                            <view class="homework-score-title">学生数</view>
                            <view class="homework-score-num flex">
                                {{item.StuNum}}
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">已提交</view>
                            <view class="homework-score-num flex">
                                {{item.SubmitNum}}
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">已批阅</view>
                            <view class="homework-score-num flex">
                                {{item.ReviewNum}}
                            </view>
                        </view>
                        <view class="homework-score flex">
                            <view class="homework-score-title">优 秀</view>
                            <view class="homework-score-num flex">
                                {{item.ExcellentNum}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		</block>
		<view class="noData" v-else>
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902791000_806.png" mode="widthFix"></image>
			<view>暂无课程信息</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";

	export default {
		props: {
			dataList:[]
		},
		components: {},
		setup(props) {
			let data = reactive({
                dataList: props.dataList
			});
			watch(
			  () => props.dataList,
			  (newValue, oldValue) => {
				data.dataList=newValue
			  }
			)
            let methods = {
                JobDetails(i){
					let item = props.dataList[i]
                    uni.navigateTo({
                        url: '/pages/index/jobDetails?HomeWorkId=' +  item.HomeWorkId + '&obj=' + JSON.stringify(item)
					});
                }
            }
			return {
				...toRefs(data),
                ...methods
			};
		}
	};
</script>
<style scoped>
	.operation-box .noData{
		text-align: center;
		flex:1;
		width: 100%;
	}
	.operation-box .noData image{
		width:200rpx;
		margin-bottom: 40rpx;
	}
	.operation-box .noData view{
		font-size: 24rpx;
		color: #cecece;
		text-align: center;
	}
    .homework-score-num view:last-child{
        font-size: 23rpx;
        margin-top: 25rpx;
    }
    .homework-score-num view:first-child{
        margin-right: 10rpx;
        font-size: 46rpx;
        font-weight: 800;
    }
    .homework-score-num{
        font-weight: 800;
        font-style: italic;
        font-size: 36rpx;
    }
    .homework-score-title{
        font-size: 20rpx;
        margin-bottom: 0rpx;
        font-weight: 400;
        letter-spacing: 1px;
        margin-bottom: 15rpx;
    }
    .homework-score:last-child{
        margin-right: 0rpx;
    }
    .homework-score{
        margin-right: 16rpx;
        flex-direction: column;
        justify-content: center;
    }
    .operation-right{
        height: 122rpx;
        background: #FCEEEF;
        padding: 23rpx 46rpx 15rpx 46rpx;
        border-radius: 30rpx;
        justify-content: space-between;
        flex-shrink: 0;
        margin-left: 11rpx;
        color: #CE8086;
    }
    .operation.activeOne .operation-state-text{
        color: #08be42;
    }
    .operation-state-text{
        font-size: 20rpx;
        letter-spacing: 2px;
    }
    .operation.activeOne .operation-state-point{
        background: #0BFF5B;
    }
    .operation-state-point{
        width: 12rpx;
        height: 12rpx; 
        border-radius: 50%;
        margin-right: 9rpx;
        margin-top: 11rpx;
    }
    .operation-state{
        margin-top: 35rpx;
        font-size: 20rpx;
    }
    .operation.activeOne .operation-name{
        color: #282828;
    }
    .operation-name{
        height: 70rpx;
        font-size: 26rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 9rpx;
        letter-spacing: 1px;
        font-weight: bold;
    }
    .operation-left{
        flex-grow: 1;
    }
    .operation-center{
        justify-content: space-between;
    }
    .operation-center-line{
        width: 4rpx;
        height: 23rpx;
        background: #282828;
        position: absolute;
        left: 0;
        top: 46rpx;
    }
    .operation.activeOne .operation-center-box{
        background: #FFFFFF; 
    }
    .operation-center-box{
        flex-grow: 1;
        position: relative;
        border-radius: 30rpx;
        padding: 31rpx 40rpx 21rpx 22rpx;
        margin-bottom: 50rpx;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 30px;
    }
	.operation{
        margin: 0 50rpx;
    }
    .operation-box{
        
    }
</style>
