<template>
	<a-drawer :visible="addonlineVisible" class="drawerStyle addonlineDrawer" width="80%" title="添加在线" placement="right"
		@after-visible-change="afterVisibleChange">
		<div class="drawerMain">
			<div class="header">
				<div v-if="edit" class="headerTitle">编辑在线</div>
				<div v-else class="headerTitle">添加在线</div>
				<img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
					@click="closeDrawer" />
			</div>
			<div class="contentMain">
				<div class="main_items">
					<div class="mi_ipts">
						<div class="mii_ipt">
							<div class="ipt_name"></div>
							<div class="fi_input">
								<a-input v-model:value="inputV1" style="
                    width: 280px;
                    height: 40px;
                    border-radius: 8px;
                    padding-right: 49px;
                  " placeholder="请输入课程名称" maxlength="20" />
								<div class="inp_num" style="position: absolute; right: 7px">
									<span style="color: #c7cbd2">

									</span>
								</div>
							</div>
						</div>
						<!-- 2022-12-10注释 后面放开 李晓鸽 -->
						<!-- <div class="mii_ipt">
              <div class="ipt_name">课程分类：</div>
              <div class="select">
                <a-select
                  v-model:value="selectV"
                  dropdownClassName="dropdown-style"
                  style="width: 240px"
                  placeholder="请选择课程分类"
                  :options="options1"
                  allowClear
                  showSearch
                />
              </div>
            </div> -->
					</div>
					<div class="mi_btns">
						<div class="btn btn1" @click="searchList()">
							<div class="search"></div>
							<div class="btnText">搜索</div>
						</div>
						<div class="btn btn2" @click="resetOnline()">
							<div class="search"></div>
							<div class="btnText">重置</div>
						</div>
					</div>
				</div>
				<!--
        <div class="main_notice">
          <div class="mntc_left">
            <div class="notice_icon"></div>
            <span style="color: rgba(0, 0, 0, 0.65); margin-right: 17px"
              >已选择
              <span v-if="edit" style="color: #4ea6ff">{{ 1 }}</span>
              <span v-else style="color: #4ea6ff">{{
                selectedRowKeys.length
              }}</span>
              项</span
            >
            <span style="color: rgba(0, 0, 0, 0.65)"
              >列表选项总计：<span>{{ tableDataTotal }}</span> 条</span
            >
          </div>
          <div class="mntc_right" @click="clearLine" v-if="!edit">
            <span style="color: #387df7; margin-right: 24px"></span>
          </div>
        </div>
-->
				<div class="main_table">
					<!-- 编辑的表格 -->
					<div>
						<div>
							<a-table class="ant-table-striped" :row-class-name="
								(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
							" :row-selection="{
	type: 'radio',
	selectedRowKeys: selectedRowKeys,
	onChange: onSelectChange,
}" :columns="tableDataFunc()" :data-source="tableData" :loading="tableDataTotal === -1 ? true : false"
								:pagination="false" />
							<div class="tableBox" style="margin-top:85px;">
								<div class="pa">
									<a-pagination v-if="tableDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
										hideOnSinglePage="true" :pageSize="pageSize" :current="currentPage" :total="tableDataTotal"
										class="pagination" @change="handelChangePage" />
								</div>
							</div>
						</div>
					</div>
					<!--  <div v-else>
            <a-table
              class="ant-table-striped"
              :row-class-name="
                (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
              "
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
                type: 'radio',
              }"
              :columns="tableDataFunc()"
              :data-source="tableData"
              :loading="tableDataTotal === -1 ? true : false"
              :pagination="false"
            />
            <div class="pa">
              <a-pagination
                v-if="tableDataTotal > 10"
                showSizeChanger="false"
                showQuickJumper="true"
                hideOnSinglePage="true"
                :pageSize="pageSize"
                :current="currentPage"
                :total="tableDataTotal"
                class="pagination"
                @change="handelChangePage"
              />
            </div>
      
      
          </div>


          -->
				</div>
			</div>
			<div class="main_btns">
				<button class="btn1" @click="closeDrawer">取消</button>
				<button class="btn2" @click="updateTask">确定</button>
			</div>
		</div>
		<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
			<a-spin :spinning="addLoading" tip="" />
		</div>
	</a-drawer>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import * as api from "../../api/indexOnline.js";
import * as apiTask from "../../api/indexTaskadd";
// import { setCookie } from "../../api/method"
import { message } from "ant-design-vue";
import {
	RouterEditTask,
	IsExistence,
	IsExistenceProject,
	IsExistenceProjectTemplate,
} from "@/api/indexTask";
import { addTempTask } from "../../api/indexTaskadd";
export default {
	name: "AddOnline",
	props: {
		addonlineVisible: {
			type: Boolean,
			default: false,
		},
		EditOnlineId: {
			type: Number,
			default: null,
		},
		edit: {
			//  是否为编辑
			type: Boolean,
			default: null,
		},
		projectId: {
			type: Number,
			default: null,
		},
		chooseStageId: {
			type: Number,
			default: null,
		},
		routerTaskId: {
			type: Number,
			default: 0,
		},
		isLevel: {
			// 是否是关卡页面触发
			type: Number,
			default: null,
		},
		projectTaskId: {
			// 要编辑的projectId
			type: Number,
			default: null,
		},
		routerId: {
			type: Number,
			default: null,
		},
		isactive: {
			type: Number,
			default: null,
		},
		projectTemplateId: {
			type: Number,
			default: null,
		},
	},
	setup(props, ctx) {
		const state = reactive({
			inputV1: null,
			options1: [
				{
					value: "微课",
					label: "微课",
				},
				{
					value: "录播课",
					label: "录播课",
				},
			],
			time: undefined,
			onlineClassesId: null,
			onlineName: "",
			selectV: null,
			selectedRowKeys: [],
			tableData: [],
			addOnlineList: [],
			currentPage: 1,
			tableDataTotal: 0,
			pageSize: 10,
			choicecourse: true,
			ddLoading: false,
		});
		const ChoiceCourse = () => {
			state.choicecourse = false;
		};
		const closeDrawer = () => {
			state.choicecourse = true;
			ctx.emit("update:addonlineVisible", false);
			ctx.emit("update:edit", false);
			state.inputV1 = null;
			state.selectV = null;
			state.selectedRowKeys = [];
			state.addOnlineList = [];
			state.currentPage = 1;
			localStorage.setItem("stageId", props.chooseStageId);
			localStorage.setItem("chapterId", props.isactive);
		};
		const afterVisibleChange = (bol) => {
			if (bol == true) {
				getAllOnlineText();
				getOnlineById();
			}
		};
		//TODO 根据id 获取在线课信息
		const getOnlineById = () => {

		}
		const tableDataFunc = () => {
			const columns = [
				// {
				//   title: "课程编号",
				//  dataIndex: "num",
				//   key: "num",
				//  width: "80px",
				//  align: "center",
				//  },
				{
					title: "名称",
					dataIndex: "name",
					key: "name",
					width: "30%",
					ellipsis: true,
				},
				{
					title: "课程分类",
					dataIndex: "contenttype",
					key: "contenttype",
					width: "15%",
					align: "center",
					ellipsis: true,
				},
				//   {
				//    title: "授课教师",
				//    dataIndex: "teacher",
				//    key: "teacher",
				//   width: "15%",
				//   align: "center",
				//  },
				{
					title: "创建人",
					dataIndex: "sysCreateBy",
					key: "sysCreateBy",
					width: "15%x",
					align: "center",
					ellipsis: true,
				},
				//   {
				//    title: "创建时间",
				//   dataIndex: "createTime",
				//    key: "createTime",
				//   width: "15%",
				//   align: "center",
				// },
				{
					title: "发布时间",
					dataIndex: "publishTime",
					key: "publishTime",
					width: "25%",
					align: "center",
					ellipsis: true,
				},
			];
			return columns;
		};
		const onSelectChange = (selectedRowKeys, selectedRows) => {
			state.selectedRowKeys = selectedRowKeys;
			state.addOnlineList = selectedRows;
			console.log(selectedRowKeys, selectedRows);
			if (props.edit && selectedRows.length > 0) {
				selectedRows.map((value) => {
					console.log(props, value);
					if (value.courseId == props.EditOnlineId) {
						message.destroy();
						message.error("选项相同，请重新选择");
						state.selectedRowKeys = [];
						state.addOnlineList = [];
					}
				});
			}
		};
		//清空所选
		const clearLine = () => {
			state.selectedRowKeys = [];
			state.addOnlineList = [];
		};
		const handelChangePage = (page) => {
			state.currentPage = page;
			state.selectedRowKeys = [];
			getAllOnlineText();
		};
		const getTableDate = (tableData) => {
			let data = tableData;
			let array = [];
			data.map((value, index) => {
				{
					let obj = {
						key: index + 1,
						num: value.onlineClassesId,
						name: value.name,
						contenttype: value.contentType == 10 ? "微课" : "录播课",
						teacher: value.teacher,
						sysCreateBy: value.sysCreateBy,
						createTime: value.sysCreateTime,
						publishTime: value.publishTime,
						courseId: Number(value.onlineClassesId),
					};
					array.push(obj);
				}
			});
			state.tableData = array;
		};
		//获取全部在线信息接口
		const getAllOnlineText = () => {
			api
				.queryOnlinelList({
					createUser: "",
					keyword: state.inputV1,
					orderAsc: true,
					orderField: "",
					pageIndex: state.currentPage,
					pageSize: state.pageSize,
					publish: true,
					status: 0,
					sysType1: "",
					sysType2: "",
					sysType3: "",
				})
				.then((res) => {
					let arr = res.data.data.list;
					state.tableDataTotal = res.data.data.count;
					if (res.status === 200) {
						console.log("获取在线课列表数据", res);
						for (let i = 0; i < res.data.data.list.length; i++) {
							if (
								Number(res.data.data.list[i].onlineClassesId) ==
								props.EditOnlineId
							) {
								state.selectedRowKeys = [i + 1];
							}
						}
						getTableDate(arr);
					}
				})
				.catch((err) => {
					console.log(err, "请求失败在线");
				});
		};
		// 校验当前在线课是否已经添加进来了
		const isExistence = (id) => {
			console.log({
				chapterId: Number(props.isactive),
				courseTaskId: Number(id),
				routerId: props.routerId,
				type: 1,
			});
			IsExistence({
				chapterId: Number(props.isactive),
				courseTaskId: Number(id),
				routerId: props.routerId,
				type: 1,
			})
				.then((res) => {
					console.log("我是不是已经添加了", res);
				})
				.catch((err) => {
					console.log(err);
				});
		};
		// 判断项目中是否添加当前在线课
		const IsExistenceProjects = (id) => {
			console.log("参数传递", {
				courseTaskId: id,
				projectId: props.projectId,
				stageId: props.chooseStageId || 0,
				type: 1,
			});
			IsExistenceProject({
				courseTaskId: id,
				projectId: Number(props.projectId),
				stageId: props.chooseStageId || 0,
				type: 1,
			})
				.then((res) => {
					console.log("项目中是否包含此在线课了", res);
				})
				.catch((err) => {
					console.log(err);
				});
		};
		const updateTask = () => {
			state.addLoading = true;
			if (props.isLevel == 1) {
				if (!props.isactive) {
					state.addLoading = false;
					message.destroy();
					return message.warning("请先选中关卡");
				}
				console.log("我是要便利的数据2", state.addOnlineList);
				let l_data = state.addOnlineList;
				let l_data_id = [];
				l_data.map((item) => {
					l_data_id.push(item["courseId"]);
				});
				console.log("需要查询的在线课ID", l_data_id);
				IsExistence({
					chapterId: Number(props.isactive),
					courseTaskId: l_data_id,
					routerId: props.routerId,
					type: 1,
				})
					.then((res) => {
						console.log("路径图中是否包含此在线课了", res);
						if (res.data.data.length) {
							let strdata = res.data.data;
							let tipStr = "";
							for (let i = 0; i < strdata.length; i++) {
								if (i == strdata.length - 1) {
									tipStr += strdata[i].courseName;
								} else {
									tipStr += strdata[i].courseName + "/";
								}
							}
							message.destroy();
							message.warning("在线课（" + tipStr + "）重复添加");
							state.addLoading = false;
							return;
						} else {
							state.addOnlineList.map((value) => {
								console.log(value);
								RouterEditTask({
									chapterId: Number(props.isactive),
									courseId: value.num,
									name: value.name,
									routerId: props.routerId,
									routerTaskId: props.routerTaskId || 0,
									type: 1,
								})
									.then((res) => {
										if (res.data.code == 200) {
											message.destroy();
											message.success(
												`${props.edit ? "编辑" : "新增"}关卡任务成功`
											);
										}
										ctx.emit("changeData", false);
										closeDrawer();
										state.addLoading = false;
									})
									.catch(() => {
										state.addLoading = false;
										message.destroy();
										message.error(
											`${props.edit ? "编辑" : "新增"}关卡任务失败`
										);
									});
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			} else if (props.isLevel == 2) {
				console.log("我是要便利的数据2", state.addOnlineList);
				let p_data = state.addOnlineList;
				let p_data_id = [];
				p_data.map((item) => {
					p_data_id.push(item["courseId"]);
				});
				console.log("需要查询的在线课ID", p_data_id);
				IsExistenceProject({
					courseTaskId: p_data_id,
					projectId: Number(props.projectId),
					stageId: props.chooseStageId || 0,
					type: 1,
				})
					.then((res) => {
						console.log("项目中是否包含此在线课了", res);
						if (res.data.data.length) {
							let strdata = res.data.data;
							let tipStr = "";
							for (let i = 0; i < strdata.length; i++) {
								if (i == strdata.length - 1) {
									tipStr += strdata[i].courseName;
								} else {
									tipStr += strdata[i].courseName + "/";
								}
							}
							message.destroy();
							message.warning("在线课（" + tipStr + "）重复添加");
							return;
						} else {
							state.addOnlineList.map((value) => {
								apiTask
									.addTask({
										courseId: value.num,
										name: value.name,
										projectId: props.projectId,
										projectTaskId: props.projectTaskId || 0,
										stageId: props.chooseStageId || 0,
										type: 1,
									})
									.then(() => {
										message.destroy();
										message.success(`${props.edit ? "编辑" : "新增"}任务成功`);
										ctx.emit("changeData", false);
										closeDrawer();
									})
									.catch(() => {
										message.destroy();
										message.error(`${props.edit ? "编辑" : "新增"}任务失败`);
									});
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			} else if (props.isLevel == 3) {

				let p_data = state.addOnlineList;
				let p_data_id = [];
				p_data.map((item) => {
					p_data_id.push(item["courseId"]);
				});
				console.log("需要查询的在线课ID", p_data_id);
				IsExistenceProjectTemplate({
					courseTaskId: p_data_id,
					projectTemplateId: props.projectTemplateId,
					templateStageId: props.chooseStageId || 0,
					type: 1,
				}).then((res) => {
					console.log("项目中是否包含此在线课了", res);
					if (res.data.data.length) {
						let strdata = res.data.data;
						let tipStr = "";
						for (let i = 0; i < strdata.length; i++) {
							if (i == strdata.length - 1) {
								tipStr += strdata[i].courseName;
							} else {
								tipStr += strdata[i].courseName + "/";
							}
						}
						message.destroy();
						message.warning("在线课（" + tipStr + "）重复添加");
						return;
					} else {
						state.addOnlineList.map((value) => {

							console.log(props, props.projectTemplateId, props.projectTaskId)
							addTempTask({
								courseId: value.num,
								name: value.name,
								projectTemplateId: localStorage.getItem("projectTemplateId"),
								projectTaskId: props.projectTaskId || 0,
								stageId: props.chooseStageId || 0,
								type: 1,
							})
								.then((res) => {
									console.log('新增或者编辑在线课', res)
									message.destroy();
									message.success(`${props.edit ? "编辑" : "新增"}模板库任务成功`);
									ctx.emit("changeData", false);
									closeDrawer();
								})
								.catch(() => {
									message.destroy();
									message.error(`${props.edit ? "编辑" : "新增"}模板库任务失败`);
								});
						})
					}
				});

			}
			//if(state.addOnlineList.Target==undefined){
			// closeDrawer();
			//}
		};
		//搜索在线列表
		const searchList = () => {
			if (state.inputV1 || state.selectV) {
				getAllOnlineText();
			} else {
				resetOnline();
			}
		};
		//重置在线信息
		const resetOnline = () => {
			state.inputV1 = null;
			state.selectV = null;
			state.selectedRowKeys = [];
			state.addOnlineList = [];
			state.currentPage = 1;
			getAllOnlineText();
		};
		onMounted(() => {

		});
		return {
			...toRefs(state),
			afterVisibleChange,
			closeDrawer,
			tableDataFunc,
			onSelectChange,
			clearLine,
			handelChangePage,
			getAllOnlineText,
			getTableDate,
			updateTask,
			searchList,
			resetOnline,
			isExistence,
			IsExistenceProjects,
			ChoiceCourse,
		};
	},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
	background-color: #fafafa !important;
}

.addonlineDrawer {
	.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 {
			padding-right: 12px;

			.main_items {
				display: flex;

				margin-top: 32px;
				margin-bottom: 12px;
				flex-wrap: wrap;

				.mi_ipts {
					display: flex;
					margin-bottom: 20px;

					.mii_ipt {
						display: flex;
						align-items: center;
						margin-right: 24px;

						.ipt_name {
							white-space: nowrap;
						}
					}
				}

				.mi_btns {
					display: flex;
					margin-left: 38px;
					margin-bottom: 20px;
					cursor: pointer;

					.btn {
						padding: 0px 26px 0px 26px;
						height: 38px;
						border-radius: 8px;
						border: 1px solid rgba(64, 158, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 14px;
						flex-shrink: 0;

						.search {
							background-size: 100%;
						}

						.btnText {
							font-size: 14px;
							font-weight: 400;
							line-height: 36px;
							margin-left: 5px;
						}
					}

					.btn1 {
						background: rgb(64, 158, 255);

						.search {
							width: 15px;
							height: 17px;
							background-image: url("@/assets/images/coursewareManage/search0.png");
						}

						.btnText {
							color: rgb(255, 255, 255);
						}
					}

					.btn2 {
						background: rgb(255, 255, 255);

						.search {
							width: 15px;
							height: 17px;
							background-image: url("@/assets/images/coursewareManage/reset1.png");
						}

						.btnText {
							color: rgb(64, 158, 255);
						}
					}

					.btn1:hover {
						background: rgb(255, 255, 255);

						.search {
							background-image: url("@/assets/images/courseManage/search1.png");
						}

						.btnText {
							color: #4ea6ff;
						}
					}

					.btn2:hover {
						background: rgba(64, 158, 255, 1);

						.search {
							background-image: url("@/assets/images/courseManage/reset0.png");
						}

						.btnText {
							color: #ffffff;
						}
					}
				}
			}

			.main_notice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 3px;
				height: 40px;
				background-color: #e9f6fe;

				.mntc_left {
					display: flex;
					align-items: center;

					.notice_icon {
						width: 14px;
						height: 14px;
						margin-right: 9px;
						margin-left: 9px;
						background-image: url(@/assets/images/coursewareManage/gan.png);
						background-size: 100% 100%;
					}
				}

				.mntc_right {
					cursor: pointer;
				}
			}

			.main_table {
				position: relative;
				padding-bottom: 80px;

				.ant-checkbox-wrapper {
					align-items: center;
					margin-top: -2px;
				}

				.ant-table-selection-column {
					padding: 0px !important;
					padding-left: 5px !important;
				}

				.ant-table-thead>tr>th {
					background-color: rgba(239, 244, 252, 1);
				}

				th.h {
					background-color: #eff4fc !important;
				}

				.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
					background: #f6f9fd;
				}

				.pa {
					left: 0;
					width: 100%;
					display: flex;
					justify-content: center;
					position: absolute;
					bottom: 20px;
				}
			}
		}

		.main_btns {
			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>