<template>
	<a-drawer :visible="addhomeworkVisible" class="drawerStyle addhomeworkDrawer" width="80%" placement="right"
		@after-visible-change="afterVisibleChange">
		<div class="drawerMain">
			<div class="header">
				<div class="headerTitle">{{ edit ? "编辑" : "添加" }}任务</div>
				<img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
					@click="closeDrawer2" />
			</div>
				<div class="contentMain">
					<div class="main_left">
						<div class="main_item">
							<div class="signbox">
							<div class="sign">
								<img
								src="@/assets/images/coursewareManage/asterisk.png"
								alt=""
								/>
							</div>
							<span style="margin-right: 3px">作业名称：</span>
							</div>
							<div class="btnbox">
							
									<a-input v-model:value="name" style="width: 400px; height: 40px; border-radius: 8px"
										placeholder="请输入作业名称" autocomplete="off" show-count :maxlength="20" />
								
							</div>
						</div>

						<div class="main_item">
							<div class="signbox">
							<div class="sign">
								<img
								src="@/assets/images/coursewareManage/asterisk.png"
								alt=""
								/>
							</div>
							<span style="margin-right: 3px">开始时间：</span>
							</div>
							<div class="btnbox">
							<a-range-picker
								style="width: 400px; height: 40px; border-radius: 8px"
								:show-time="{ format: 'hh:mm' }"
								:disabled-date="disabledDate" :disabled-time="disabledRangeTime" 
								format="YYYY/MM/DD HH:mm"
								v-model:value="chooseTime"
								:placeholder="['      开始时间', '        结束时间']"
							/>
							</div>
						</div>
						<div class="main_item2">
							<div class="signbox">
								<div class="sign">
									<img
									src="@/assets/images/coursewareManage/asterisk.png"
									alt=""
									/>
								</div>
								<span style="margin-right: 3px">作业要求：</span>
								</div>
								<div class="textarea">
									<a-textarea v-model:value="workRequirement" placeholder="请输入作业要求" autocomplete="off"
										allow-clear :rows="6" show-count :maxlength="200" />
								</div>
							
						</div>
						<div class="mbl_items">
							<div class="item_nam">
							<span style="margin-right: 10px"></span>
							</div>
							<div class="item_inp">
							<FJUpload v-model:value="attach" @changevalue="changevalue"/>
							</div>
						</div>
						<div style="width:100%;height: 80px;"></div>
					</div>
				</div>
				<div class="main_btns" style="background:#fff;">
					<a-button class="btn1" @click="closeDrawer2">取消</a-button>
					<a-button class="btn2" html-type="submit" @click="updteHomeWork">确定</a-button>
				</div>
			
		</div>
		<!--  加载动画 -->
		<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
			<a-spin :spinning="addLoading" tip="" />
		</div>
	</a-drawer>
</template>
<script>
import { reactive, ref, toRefs } from "vue";
import { message } from "ant-design-vue";
import {
	createWorkTask,
	queryWorkDetailById,
	updateWorkTaskUsing,
} from "@/api/indexWork";
import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
import dayjs from "dayjs";
import { addTempTask } from "../../api/indexTaskadd";
import {FILE_UPLOAD_URL} from "@/api/config";
import FJUpload from "@/components/common/FJUpload";
export default {
	name: "AddHomework",
	components:{
		FJUpload,
	},
	props: {
		addhomeworkVisible: {
			type: Boolean,
			default: false,
		},
		edit: {
			//  是否为编辑
			type: Boolean,
			default: null,
		},
		taskIdDraft: {
			type: Number,
			default: null,
		},
		taskCourseID: {
			type: Number,
			default: null,
		},
		projectId: {
			type: Number,
			default: null,
		},
		chooseStageId: {
			type: Number,
			default: null,
		},
		routerTaskId: {
			type: Number,
			default: 0,
		},
		isLevel: {
			// 是否是关卡页面触发
			type: Number,
			default: null,
		},
		EditWorkId: {
			// 要编辑的workId
			type: Number,
			default: null,
		},
		workName: {
			type: String,
			default: null,
		},
		projectTaskId: {
			// 要编辑的projectId
			type: Number,
			default: null,
		},
		routerId: {
			type: Number,
			default: null,
		},
		isactive: {
			type: Number,
			default: null,
		},
		faceLevel: {
			type: Boolean,
			default: false,
		},
		projectTemplateId: {
			type: Number,
			default: null,
		},
	},
	setup(props, ctx) {
	
		const state = reactive({
				name: "",
			workRequirement: "",
			chooseTime: [],
			addLoading: false,
			workEnclosureAddress: "",
			isClick: false,
			attach:"",
		});
		const formRef = ref();

	

		const handleFinishFailed = () => {
			message.error("handleFinishFailed");
		};

		const resetForm = () => {
			// formRef.value.resetFields();
			state.name = "";
			state.workRequirement = "";
			state.chooseTime = [];
			state.attach="";
		};

		const handleValidate = (...args) => {
			console.log(args);
		};
	
		// 删除文件返回参数
		const changevalue = (e) => {
			let arr = state.attach.split(',')
			let newarr = []
			for(let i=0;i<arr.length;i++){
				if(i!==e){
				newarr.push(arr[i])
				}
			}
			if(newarr.length==0){
				state.attach = "";
			}else{
				state.attach = newarr.toString()
			}
			console.log('changevalue', e, newarr,  state.attach)
		}

		const fileList = ref([]);
		const closeDrawer = () => {
		
			ctx.emit("update:addhomeworkVisible", false);
			ctx.emit("update:edit", false);
			ctx.emit("update:EditWorkId", state.EditWorkId);
			ctx.emit("update:workName", state.name);
			console.log("state.EditWorkId==============", state.name);
			localStorage.setItem("stageId", props.chooseStageId);
			localStorage.setItem("chapterId", props.isactive);
		
			resetForm();
		};
		const closeDrawer2 = () => {
		
			ctx.emit("update:addhomeworkVisible", false);
			ctx.emit("update:edit", false);
			ctx.emit("update:EditWorkId", state.EditWorkId);
			ctx.emit("update:workName", state.name);
			console.log("state.EditWorkId==============", state.name);
			localStorage.setItem("stageId", props.chooseStageId);
			localStorage.setItem("chapterId", props.isactive);
			
			resetForm();
		};

		// 重置表单选项
		const afterVisibleChange = () => {
			console.log("11223344", props.EditWorkId);
			if (props.EditWorkId > 0) {
				state.EditWorkId = props.EditWorkId;
				queryWork();
			} else {
				
				resetForm();
			}
		};

		// 新增任务
		const updteHomeWork = () => {
			if(!state.name||!state.workRequirement||!state.chooseTime){
				return message.warning("请输入必填项");
			}
			let obj = {
				submitEndTime: dayjs(state.chooseTime[1]).format(
					"YYYY-MM-DD HH:mm"
				),
				submitStartTime: dayjs(state.chooseTime[0]).format(
					"YYYY-MM-DD HH:mm"
				),
				workEnclosureAddress: state.attach
					? state.attach
					: "",
				workId: props.EditWorkId >0 ? props.EditWorkId:0 ,
				workName: state.name,
				workRequirement: state.workRequirement,
				id: props.edit ? props.taskCourseID : ""
			};

			if (props.EditWorkId > 0) {
				if (state.isClick) {
					message.destroy();
					message.error('请勿频繁点击')
					return
				}
				state.isClick = true;

				updateWorkTaskUsing(obj)
					.then(async (res) => {
						// console.log("添加成功", res);
						await updateTask(res);
						ctx.emit("changeData", false);
						closeDrawer();
						state.isClick = false;
					})
					.catch((err) => {
						message.destroy();
						message.error(`添加失败${err}`);
						state.isClick = false;
					});
			} else {
				if (state.isClick) {
					message.destroy();
					message.error('请勿频繁点击')
					return
				}
				state.isClick = true;
				createWorkTask(obj)
					.then(async (res) => {
						console.log("添加成功", res);
						await updateTask(res);
						ctx.emit("changeData", false);
						closeDrawer();
						state.isClick = false;
					})
					.catch((err) => {
						message.destroy();
						message.error(`添加失败${err}`);
						state.isClick = false;
					});
			}
		};

		// 查询任务
		const queryWork = () => {
			state.addLoading = true;
			queryWorkDetailById({ workId: props.EditWorkId })
				.then((res) => {
					console.log(res);
					
					state.name = res.data.data.workName;
					state.workRequirement = res.data.data.workRequirement;
					state.chooseTime = [
						dayjs(res.data.data.submitStartTime, "YYYY-MM-DD HH:mm"),
						dayjs(res.data.data.submitEndTime, "YYYY-MM-DD HH:mm"),
					];
					let arrss = res.data.data.workEnclosureAddress.split(',')
					let str = ''
					for (let i = 0; i < arrss.length; i++) {
						i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
					}
					console.log(str)
					state.attach = str;
					state.addLoading = false;
				})
				.catch(() => {
					//message.error(`查询失败`);
				});
		};
		// 新增编辑或新增项目任务
		const updateTask = (res) => {
			if (props.faceLevel) {
				state.EditWorkId = res.data.data.id;
			} else {
				if (props.isLevel == 1) {
					if (!props.isactive) {
						message.destroy();
						return message.warning("请先选中关卡");
					}
					let editObj1 = {
						chapterId: props.isactive,
						courseId: res.data.data.id,
						name: res.data.data.workName,
						routerId: props.routerId,
						routerTaskId: props.routerTaskId || 0,
						type: 4,
						id: props.taskIdDraft
					};

					RouterEditTask(editObj1)
						.then(() => {
							//message.success(`${props.EditWorkId > 0 ? "编辑" : "新增"}关卡任务成功`);

							state.addLoading = false;
							ctx.emit("changeData", false);
							closeDrawer();
						})
						.catch(() => {
							//message.error(`${props.EditWorkId > 0 ? "编辑" : "新增"}关卡任务失败`);
						});
				} else if (props.isLevel == 2) {
					let editObj = {
						courseId: res.data.data.id,
						name: res.data.data.workName,
						projectId: props.projectId > 0 ? props.projectId : 0,
						projectTaskId: props.projectTaskId || 0,
						stageId: props.chooseStageId || 0,
						type: 4,
						id: props.taskIdDraft
					};
					console.log("editObj", editObj);
					ProjectEditTask(editObj)
						.then((res) => {
							//message.success(`${props.EditWorkId > 0 ? "编辑" : "新增"}阶段任务成功`);
							console.log("chenggong", res);
							state.addLoading = false;
							ctx.emit("changeData", false);
							closeDrawer();
						})
						.catch((err) => {
							console.log("shibaii", err);
							//message.error(`${props.EditWorkId > 0 ? "编辑" : "新增"}阶段任务失败`);
						});
				} else if (props.isLevel == 3) {
					console.log("projectTemplateId,===", props.projectTemplateId);
					addTempTask({
						courseId: res.data.data.id,
						name: res.data.data.workName,
						projectTemplateId: props.projectTemplateId,
						projectTaskId: props.projectTaskId || 0,
						stageId: props.chooseStageId || 0,
						type: 4,
					})
						.then(() => {
							//message.success(`${props.EditWorkId > 0 ? "编辑" : "新增"}阶段任务成功`);
							ctx.emit("changeData", false);
							closeDrawer();
							state.addLoading = false;
						})
						.catch(() => {
							//message.error(`${props.EditWorkId > 0 ? "编辑" : "新增"}阶段任务失败`);
						});
				}
			}
		};

		const cle = () => {
			let obj = {
				submitEndTime: dayjs(state.chooseTime[1]).format("YYYY-MM-DD"),
				submitStartTime: dayjs(state.chooseTime[0]).format("YYYY-MM-DD"),
				workEnclosureAddress: state.workEnclosureAddress
					? state.workEnclosureAddress
					: "",
				workId: props.EditWorkId > 0 ? props.EditWorkId : 0,
				workName: state.name,
				workRequirement: state.workRequirement,
			};
			if (props.face) {
				createWorkTask(obj).then((res) => {
					ctx.emit("getWork", res.data.data);
				});
			}
		};

		const range = (start, end) => {
			const result = [];

			for (let i = start; i < end; i++) {
				result.push(i);
			}

			return result;
		};

		const disabledDate = (current) => {
			// Can not select days before today and today
			console.log('1111', dayjs().endOf('day'))
			return current && current < dayjs().startOf('day');
		};

		const disabledDateTime = () => {
			return {
				disabledHours: () => range(0, 24).splice(4, 20),
				disabledMinutes: () => range(30, 60),
				disabledSeconds: () => [55, 56],
			};
		};

		return {
			disabledDate,
			disabledDateTime,
			afterVisibleChange,
      		FILE_UPLOAD_URL,
			closeDrawer,
			closeDrawer2,
			changevalue,
			fileList,
			updteHomeWork,
			handleFinishFailed,
			resetForm,
			handleValidate,
			formRef,
			// layout,
		
			cle,
			...toRefs(state),
		};
	},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
	background-color: #fafafa !important;
}

.addhomeworkDrawer {
	.drawerMain {
		.header {
			height: 73px;
			border-bottom: 1px solid #e8e8e8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;

			.headerTitle {
				font-size: 18px;
				font-weight: 600;
				color: #333333;
				line-height: 25px;
				margin-left: 24px;
			}
		}

		.contentMain {
			display: flex;
			justify-content: space-between;

			.main_left {
				padding-right: 30px;
				flex: 1;
				border-right: 1px solid #e8e8e8;
				margin-top: 32px;

				.main_item {
					display: flex;
					align-items: center;
					margin-top: 32px;
					margin-bottom: 32px;

					.signbox {
						width: 120px;
						display: flex;
						justify-content: end;
						align-items: center;

						.sign {
							margin-right: 5px;
						}
					}

					.btnbox {
						display: flex;
						flex: 1;
						align-items: center;

						.xkbtn {
							cursor: pointer;
							width: 130px;
							height: 40px;
							background: #4ea6ff;
							border-radius: 8px;
							border: 0;
							margin-right: 8px;
							color: #fff;
						}
					}
				}
				.mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;
				  margin-left: -25px;
                  .inp_num {
                    position: absolute;
                    left: 398px;
                    top: 10px;
                  }
                }
             	 }
				.main_item2 {
					display: flex;
					align-items: flex-start;
					margin-bottom: 32px;
				
					.textarea {
						width: 373px;

						.ant-input {
							width: 100%;
						}

						.ant-input-textarea-show-count {
							position: relative;
						}

						.ant-input-textarea-show-count::after {
							position: absolute;
							right: 10px;
							bottom: 0px;
						}

						.ant-input {
							border-radius: 8px;
						}
					}

					.signbox {
						width: 120px;
						display: flex;
						justify-content: end;
						align-items: center;

						.sign {
							margin-right: 5px;
						}
					}

					.kqszbox {
						.qdqtbox {
							margin-left: 56px;
						}

						.setbox {
							display: flex;
							flex-wrap: wrap;
							margin-top: 10px;
							margin-bottom: 24px;

							.timerbox {
								margin-top: 6px;
								margin-right: 32px;
								display: flex;
								align-items: center;
								flex-wrap: nowrap;
							}
						}
					}

					.btnbox2 {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						.xkbtn {
							cursor: pointer;
							width: 130px;
							height: 40px;
							background: #4ea6ff;
							border-radius: 8px;
							border: 0;
							margin-right: 16px 8px 32px 0;
							color: #fff;
							margin-top: 16px;
							margin-bottom: 60px;
							margin-left: 124px;
						}
					}
				}
			}
		}

		.main_btns {
			position: absolute;
			height: 72px;
			width: 100%;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

			.btn1 {
				width: 100px;
				height: 40px;
				border: 1px solid #4ea6ff;
				border-radius: 8px;
				color: #4ea6ff;
				background-color: #fff;
				cursor: pointer;
			}

			.btn2 {
				cursor: pointer;
				width: 100px;
				height: 40px;
				background: #4ea6ff;
				border-radius: 8px;
				border: 0;
				margin-left: 15px;
				color: #fff;
			}
		}
	}
}
</style>

