<template>
	<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5;">
		<z-nav-bar :title="pageName"></z-nav-bar>
		<view class="pad20">
			<view class="" v-if="taskList.length == 0">
				<view class="listTitle">
					<text>根据教学时长,须至少发布 {{minNumber}} 条作业</text>
				</view>
				<view class="addTips border_radius_10">				
					<view class="" >
						<view class="flex_box flex_center" >
							<text class="PM_font fangshi">生成方式</text><uni-icons type="help" size="18" @click="clickHelp"></uni-icons>
						</view>
						<view class="btnBox flex_box flex_center">
							<text class="zidong border_radius_10" @click="autoCreate()">自动生成</text>
							<text class="shoudong border_radius_10" @click="addTask()">手动创建</text>
						</view>
					</view>
				</view>
			</view>						
			<view v-if="taskList.length > 0 ">
			<uni-section class="mb-10 mt-10 nobg" :title="'共'+total+'条数据'" type="line"></uni-section>
				<view class="submitRecode">
					<view class="newBox">
						<view class="item " v-for="(item, index) in taskList" @click="clickTask(item)">
							<view class="leve1 flex_box flex_between">
								<text style="flex: 1;">{{item.title}}</text>
								<text class="edit border_radius_10 small_btn" @click.stop="goEdit(item)">修改</text>
							</view>							
							<view class="leve2 ">
								<view class="jianjie" v-html="item.content">									
								</view>								
							</view>	
							<view class="leve3">
								<text class="border_radius_10 small_btn add" @click.stop="addTask(item)">在本条后面添加一条</text>
								<text class="border_radius_10 small_btn del" @click.stop="delTask(item)">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-divider v-show="status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="status == 1" text="加载中..."></u-divider>
		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';	
  // const taskLIst1 = require('@/data/taskList.json')
	export default {
		data() {
			return {
				classId: undefined,
				pageType: undefined,
				pPage: 0,
				status: 88,
				loadFlag: false,
				pageName: '',
				taskList: [],
				roleCode:'',
				minNumber:undefined,
				classState:undefined,
				total:0
			}
		},
		onLoad(e) {
			console.log('e',e);
			this.classState = e.classState
			this.classId = e.classId
			this.minNumber = e.minNumber
			this.pageType = e.type
			this.roleCode = e.roleCode
			if (e.type == '0') {
				this.pageName = '作业列表'
			} else if (this.pageName = '医案列表') {

			} else {
				this.pageName = '心得列表'
			}
			// this.getList()
		},
		onPullDownRefresh() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.status != 2 && this.status != 3) {
				this.getList()
			}
		},
		onShow() {
			this.pPage = 0
			this.taskList = []
			this.getList()
			// this.getList()
		},
		
		methods: {
			delTask(item){
				console.log('删除');
				$http.request({
						url: "common/class/delClassTask",
						method: "POST",
						data: {
							"taskId": item.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if(res.code == 0){
							uni.showToast({
								title:'删除成功',
								icon:'success'
							})
							setTimeout(()=>{
								this.pPage = 0
								this.taskList = []
								this.getList()
							},2000)
						}else{
							uni.showToast({
								title:'删除失败',
								icon:'error'
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title:'删除失败',
							icon:'error'
						})
					})
			},
			// 是否继续自动成操作
			confirOption(){
				return new Promise((resolve, reject) => {
					uni.showModal({
						title:'提示',
						content:'当前作业列表中存在数据，确定要清空并重新生成新的作业列表吗？',
						cancelText:'点错了',
						confirmText:'确定',
						success: function (res) {
								if (res.confirm) {
									resolve(true)
								} else if (res.cancel) {
									resolve(false)
								}
							}
					})
				})			
			},
			goAutoCreate(){
				
				$http.request({
						url: "common/class/generateClassTask",
						method: "POST",
						data: {
							"classId": this.classId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if(res.code == 0){
							uni.showToast({
								title:'生成成功',
								icon:'success'
							})
							setTimeout(()=>{
								this.pPage = 0
								this.taskList = []
								this.getList()
							},2000)
						}else{
							uni.showToast({
								title:'生成失败',
								icon:'error'
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title:'生成失败',
							icon:'error'
						})
					})
			},
			async autoCreate(){
				console.log('自动创建');				
				if(this.taskList.length > 0){
					var isContinue = await this.confirOption()
					if(isContinue){
						this.goAutoCreate()
					}
				}else{
					this.goAutoCreate()
				}
				
			},
			goEdit(item){
				uni.navigateTo({
					url:`/pages/miniClass/addHomeWork?id=${item.id}&type=${item.type}`
				})
			},
			addTask(item){
				uni.navigateTo({
					url: `/pages/miniClass/addHomeWork?classId=${this.classId}&sort=${item.sort}`
				})
			},
			clickHelp(){
				uni.showModal({
					title:'说明',
					content:"班内作业您可选择自动生成作业列表，或者手动逐一添加的方式来创建作业，其中需要注意的是如选择自动生成作业列表，会覆盖掉之前已经存在的作业内容。",
					showCancel:false,
					confirmText:'好的'
				})
			},
			// 点击作业或者医案，进入作业提交情况
			clickTask(item){
				// console.log('options',options);
				uni.navigateTo({
					url:`/pages/miniClass/taskDetailForMan?id=${item.id}&roleCode=${this.roleCode}&type=${this.pageType}&classState=${this.classState}`
				})
			},
			getList() {
				this.status = 1;
				if (this.loadFlag) {
					console.log("有未完成的进程");
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				this.loadFlag = true;
				this.pPage++;
				$http.request({
						url: "common/class/getClassTaskList",
						method: "POST",
						data: {
							"limit": 10,
							"page": this.pPage,
							"classId": this.classId,
							"type": this.pageType + '', //类型 0班内任务1医案2心得							    
							"title": ""
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							this.total = 0
							if (res.page.records.length > 0) {
								console.log('数据获取成功', res.page.records);
								var lis = res.page.records
								this.taskList = this.taskList.concat(lis)
								this.total = res.page.total
								// this.taskList = taskLIst1.page.records // 测试数据
								if (res.page.pages > this.pPage) {
									this.status = 0;
								} else {
									this.status = 2;
								}
							} else {
								this.status = 3; // 暂无数据
							}
							this.loadFlag = false;
							console.log('res', res);
							uni.hideLoading()
						}
					}).catch(e => {
						console.log(e, '数据报错')
						uni.hideLoading()
						this.loadFlag = false;
						uni.showToast({
							title: e.msg,
							icon: 'error'
						})
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";
	.addTips{padding: 20rpx; background-color: #fff; }
	.btnBox{
		text{padding: 16rpx 10rpx; margin: 20rpx; display: block;  color: #fff;}
		.zidong{
			background-color: #55aa00;
		}
		.shoudong{background-color:$themeColor;}
	}
	.fangshi{font-size: 36rpx; color: #666;}
	.listTitle{
		margin: 20rpx 0;
	}
	.example-body {
		padding: 10px;
	}

	.pad20 {
		padding: 20rpx;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	.submitRecode {
		// padding: 20rpx;

		.newBox {
			.classmateImg {
				width: 60rpx !important;
				height: 60rpx !important;

				image {
					width: 60rpx !important;
					height: 60rpx;
				}
			}

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: none !important;
				// border-bottom: 1px solid #eee;
				border-radius: 20rpx;
				padding: 20rpx ;
				margin-bottom: 20rpx;
				.leve1 {
					align-items: center;
					
					// padding-bottom: 20rpx;					
					.edit{border:1px solid  $themeColor; color: $themeColor;}
					// .userName{}
				}

				.leve2 { justify-content: center; 				margin-top: 20rpx;
					color: #999; font-size: 24rpx;border-top: 1px dashed #eee;
					.jianjie{@include bov(2)}
					b{font-size: 34rpx; padding: 0 4rpx; font-weight: normal; color: #333; color: red;}
					.item{text-align: center; padding-top: 0; padding-bottom: 0; margin-bottom: 0;}
				}

				.leve3 {
					color: $themeColor;
					text-align: center;
					padding-top: 10rpx; margin-top: 20rpx; margin-bottom: 10rpx;
					.add{color: #ffaa7f; border: 1px solid #ffaa7f;}
					.del{color: #ff557f; border: 1px solid #ff557f; margin-left: 20rpx;}
					.tips {
						width: 100%;
						justify-content: space-between;
						font-size: 26rpx;
						color: #999;
					}

					.date {}

					.btn {
						border: 1px solid $themeColor;
						margin-top: 20rpx;
						display: inline-block;
						width: 50%;
						padding: 6rpx 0;
						border-radius: 10rpx;
					}
				}

				.leve3.no {
					color: #ff9277;
					text-align: center;
				}
			}
		}
	}
	

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}
	
</style>