<template>
	<view class="operation-box flex" style="height: 100%;flex-direction: column;">
		<view style="font-size: 36rpx;font-weight:400;color:#282828;margin: 50rpx;">
			选择参考作业
		</view>
		<view style="flex:1;height: 1px;overflow-y: auto;" v-if="workList && workList.length>0">
			<view class="operation activeOne flex" style="align-items: center;" v-for="(item,index) in workList" :key="index">
				<van-checkbox :value="item.checked" @change="onChangeSelect" :data-index="index"></van-checkbox>
			    <view class="operation-center-box" :class="[{'active':item.checked}]" style="flex:1;width:1px;margin-left:20rpx" @click="changeByBoxHandler(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>
		</view>
		<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 style="padding: 20rpx 50rpx;" v-if="workList && workList.length>0">
			<van-button type="danger" round block @click="selectWorkHandler">确认选择</van-button>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";

	export default {
		props: {
			dataList:[]
		},
		components: {},
		emits:['selected'],
		setup(props,ctx) {
			let data = reactive({
                workList: props.dataList
			});
			watch(
			  () => props.dataList,
			  (newValue, oldValue) => {
				data.workList=newValue
			  }
			)
            let methods = {
				onChangeSelect(e){
					console.log(e,data.workList[e.target.dataset.index],data.workList[e.target.dataset.index].checked)
					data.workList[e.target.dataset.index].checked=e.detail
				},
				changeByBoxHandler(i){
					data.workList[i].checked=!data.workList[i].checked
				},
				selectWorkHandler(){
					let temp=data.workList.filter(x=>{return x.checked==true});
					ctx.emit('selected',temp)
				}
            }
			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: #08be42;
    }
    .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: 30rpx;
    }
	.operation-center-box.active{
		background-color: dodgerblue !important;
	}
	.operation-center-box.active .operation-center-line{
		background: #FFF !important;
	}
	.operation-center-box.active .operation-state-text,
	.operation-center-box.active .operation-name{
		color: #FFF !important;
	}
	
	.operation{
        margin: 0 50rpx;
    }
    .operation-box{
        
    }
</style>
