<template>
	<a-drawer :visible="selfacetVisible" class="drawerStyle selfacetDrawer" width="80%" title="添加在线" placement="right"
		@after-visible-change="afterVisibleChange">
		<div class="drawerMain">
			<div class="header">
				<div 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="name" style="width: 424px; height: 40px; border-radius: 8px;"
									placeholder="请输入课程名称" />
							</div>
						</div>
						<!--
            <div class="mii_ipt">
              <div class="ipt_name">课程状态：</div>
              <div class="select fitems">
                <a-select
                    v-model:value="auditStatus"
                    dropdownClassName="dropdown-style"
                    style="width: 200px"
                    placeholder="请选择状态"
                    :options="options1"
                    allowClear
                    showSearch
                >
                </a-select>
              </div>
            </div>
-->
					</div>
					<div class="mi_btns">
						<div class="btn btn1" @click="search">
							<div class="search"></div>
							<div class="btnText">搜索</div>
						</div>
						<div class="btn btn2" @click="reset">
							<div class="search"></div>
							<div class="btnText">重置</div>
						</div>
					</div>
				</div>
				<!--
        <div class="main_notice">
          <div class="mntc_left">
            <div class="notice_icon"></div>
            <div v-if="offcourse == null">
                  <span class="title"
                  >已选择 <span class="data">0</span> 条</span
                  >
            </div>

            <div v-else>
                    <span class="title"
                    >已选择 <span class="data">1</span> 条;</span
                    >
              <span class="title"
              >课程编号：
                      <span class="data">{{ offcourse.offcourseId }}</span>
                    </span>
              <span class="title"
              >名称：
                      <span class="data">{{
                          offcourse.name
                        }}</span>
                    </span>
              <span class="title"
              >分类：
                      <span class="data">{{
                          offcourse.categoryId
                        }}</span>
                    </span>
              <span class="title"
              >授课老师：
                      <span class="data">{{
                          offcourse.teacherId
                        }}</span>
                    </span>
              <span class="title"
              >创建人：
                      <span class="data">{{ offcourse.createUser }}</span>
                    </span>

            </div>

          </div>
        </div>-->

				<div class="main_table">

					<a-table class="ant-table-striped" :row-class-name="
						(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
					" :row-selection="rowSelection" :columns="columns1" :data-source="classTableData"
						:loading="tableDataTotal === -1 ? true : false" :pagination="false" />
					<div class="tableBox" style="margin-top:85px;">
						<div class="pa" style="display:flex;justify-content:center;">
							<a-pagination v-if="tableDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
								hideOnSinglePage="true" :pageSize="pageSize" :current="currentPage" :total="tableDataTotal"
								class="pagination" @change="changePaginationStu" />
						</div>
					</div>
				</div>
			</div>
			<div class="main_btns">
				<button class="btn1" @click="closeDrawer">取消</button>
				<button class="btn2" @click="submitCourse">确定</button>
			</div>
		</div>
	</a-drawer>
</template>
<script>
//import { ApiFilled } from "@ant-design/icons-vue";
import { reactive, toRefs, computed } from "vue";
// import { planList } from "../../api/indexTaskadd";
//import {detail} from "../../api/indexCourse";
import { list } from "../../api/indexTaskadd";


const columns1 = [
	// {
	//    title: "课程编号",
	//  title: "课程编号",
	//   width: "20%",
	//   dataIndex: "num",
	//  key: "num",
	////   align: "center",
	//  },
	{
		title: "名称",
		width: "30%",
		dataIndex: "name",
		key: "name",
		ellipsis: true,

	},
	{
		title: "内容分类",
		width: "15%",
		dataIndex: "category",
		key: "category",
		align: "center",
		ellipsis: true,
	},
	{
		title: "授课教师",
		width: "15%",
		dataIndex: "teacher",
		key: "teacher",
		align: "center",
		ellipsis: true,
	},
	{
		title: "创建人",
		width: "15%",
		dataIndex: "creator",
		key: "creator",
		align: "center",
		ellipsis: true,
	},
	{
		title: "发布时间",
		width: "25%",
		dataIndex: "time",
		key: "time",
		align: "center",
		ellipsis: true,
	},
];

export default {
	name: "SelFacet",
	props: {
		selfacetVisible: {
			type: Boolean,
			default: false,
		},
		chooseCourse: {
			type: Number,
			default: null,
		},
		chooseCourseName: {
			type: String,
			default: null,
		},
		titleTag: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, ctx) {
		const state = reactive({
			classTableData: [
				// {
				//   key: "1",
				//   num: "JDF2022071100001",
				//   name: "时间管理课程",
				//   content: "通用力",
				//   teacher: "BOE教师",
				//   creator: "管理员",
				//   time: "2022-10-31 23:12:00",
				// }
			],
			options2222: [
				{
					title: '领导力',
					value: '100',
					children: [
						{
							title: '管理业务',
							value: '1001',
						},
						{
							title: '管理团队',
							value: '1002',
						},
						{
							title: '管理自我',
							value: '1003',
						},
					],
				},
				{
					title: '专业力',
					value: '200',
					children: [
						{
							title: '研发',
							value: '2001',
						},
						{
							title: '系统和解决方案',
							value: '2002',
						},
						{
							title: '生产技术与制造',
							value: '2003',
						},
						{
							title: '供应链',
							value: '2004',
						},
						{
							title: '营销',
							value: '2005',
						},
						{
							title: '品质',
							value: '2006',
						},
						{
							title: '专业职能',
							value: '2007',
							children: [
								{
									title: '战略与企划',
									value: '200701',
								},
								{
									title: '流程管理',
									value: '200702',
								},
								{
									title: '业绩管理',
									value: '200703',
								},
								{
									title: '项目管理',
									value: '200704',
								},
								{
									title: '信息技术',
									value: '200705',
								},
								{
									title: '环境与安全',
									value: '200706',
								},
								{
									title: '人力资源',
									value: '200707',
								},
								{
									title: '企业文化',
									value: '200708',
								},
								{
									title: '品牌',
									value: '200709',
								},
								{
									title: '财务',
									value: '200710',
								},
								{
									title: '法务',
									value: '200711',
								},
								{
									title: '风险控制',
									value: '200712',
								},
								{
									title: '行政',
									value: '200713'
								},
							]
						},
						{
							title: '医工',
							value: '2008',
						}
					],
				},
				{
					title: '通用力',
					value: '300',
					children: [
						{
							title: '职业操守与道德',
							value: '3001',
						},
						{
							title: '职业素养与技能',
							value: '3002',
						},
						{
							title: '规章制度',
							value: '3003',
						},
					],
				}
			],
			currentPage: 1,
			tableDataTotal: null,
			pageSize: 10,
			valueClass: null, //课程编号
			valueContent: null, //内容分类
			selectedRows: [], //选择的数据
			selectedRowKeys: [],
			titleTag: false,
			offcourse: null,
			auditStatus: null,
			name: null,
			courseInfo: []

		});

		const rowSelection = computed(() => {
			console.log(3333333333)
			console.log(state.selectedRows)
			return {
				type: "radio",
				selectedRowKeys: state.selectedRows,
				onSelect: (selectedRows) => {
					console.log('select')
					state.chooseCourse = selectedRows.num;
					state.chooseCourseName = selectedRows.name;
					console.log(selectedRows, "==========", state.chooseCourse);
				},
				onChange: (selectedRows) => {
					console.log('onChange')
					state.selectedRows = selectedRows
				},
			}
		})
		const submitCourse = () => {
			state.chooseCourse && ctx.emit("update:chooseCourse", state.chooseCourse);
			state.chooseCourseName && ctx.emit("update:chooseCourseName", state.chooseCourseName);
			closeDrawer();
		}
		const closeDrawer = () => {
			ctx.emit("update:selfacetVisible", false);

		};
		const afterVisibleChange = (bool) => {
			if (bool) {
				state.chooseCourse = props.chooseCourse;
				state.chooseCourseName = props.chooseCourseName;
				state.selectedRows = props.chooseCourse ? [props.chooseCourse] : [];
				getClassList();
				// getFaceInfo();
			}

		};
		// const showDrawerSelFacet = () => {
		//   state.selfacetvisible = true;
		// };
		// const getFaceInfo = () => {
		//   detail({offcourseId: 36}).then((res) => {
		//     state.courseInfo = res.data.data;
		//   }).catch();
		// }
		//获取面授课列表
		const getClassList = (obj) => {
			let objn = obj || {
				auditStatus: 2,
				status: 1,
				name: state.name,
				pageNo: state.currentPage,
				pageSize: state.pageSize
			};
			list(objn)
				.then((res) => {
					console.log('面授课列表', res.data.data);
					let result = res.data.data;
					state.tableDataTotal = result.total;
					getClassData(result.rows);
				})
				.catch((err) => {
					console.log("获取列表失败", err.data);
				});
		};

		const getClassData = (tabledata) => {
			let data = tabledata;
			let array = [];
			// let options = state.options2222;
			data.map((value) => {
				let obj = {
					key: value.offcourseId,
					num: value.offcourseId,
					name: value.name || "-",
					teacher: value.teacher || "-",
					creator: value.createName || "-",
					time: value.publishTime,
					categoryId: value.categoryId,
					category: changeTreeSelectValue(String(value.categoryId)),
					//需要判断content
				};
				console.log("obj", obj);
				// var breaked = false;
				// obj.category = changeTreeSelectValue(String(value.categoryId))

				// for (let i = 0; i < options.length; i++) {
				// 	for (let j = 0; j < options[i].children.length; j++) {
				// 		if (
				// 			String(options[i].children[j].value) ===
				// 			String(obj.categoryId)
				// 		) {
				// 			obj.category = changeTreeSelectValue(String(obj.categoryId))
				// 			// console.log("obj.categoryId", obj.categoryId);
				// 			// obj.category = options[i].children[j].title;
				// 			// console.log("obj. obj.category ", obj.category);
				// 			breaked = true;
				// 			break;
				// 		}
				// 	}
				// 	if (breaked) {
				// 		break;
				// 	}
				// }
				if (!obj.category) {
					obj.category = "-";
				}
				console.log("obj. obj.category22 ", obj.category);
				array.push(obj);
			});
			state.classTableData = array;
		};

		// 格式化树型结构选择数据
		const changeTreeSelectValue = (values) => {
			let data = state.options2222;
			console.log(values, data)
			let str = ''
			for (let i = 0; i < data.length; i++) {
				if (data[i].value == values) {
					str = data[i].title
				} else {
					for (let j = 0; j < data[i].children.length; j++) {
						if (data[i].children[j].value == values) {
							str = data[i].title + '/' + data[i].children[j].title
						} else {
							if (data[i].children[j].children) {
								for (let k = 0; k < data[i].children[j].children.length; k++) {
									if (data[i].children[j].children[k].value == values) {
										str = data[i].title + '/' + data[i].children[j].title + '/' + data[i].children[j].children[k].title
									}
								}
							}
						}
					}
				}
			}
			console.log('str-str-str-str', str)
			state.fen_lei1 = str;
			return str;
		}



		/**
 
		 const getCategory=(id)=>{
			 console.log("进来了");
			 let category="";
			 let options = state.options2222;      
				 for (let i = 0; i < options.value.length; i++) {
					 for (let j = 0; j < options.value[i].children.length; j++) {
						 if (
							 String(options.value[i].children[j].value) ===
							 String(id)
						 ) {
							 console.log();
							 category = options.value[i].children[j].title;
						  
							 return category;
						 }
					 }
				 }
			 return category;
		 }
 
  
			const options1 = ref([
			{
				 value: 0,
				 label: "未提交",
			 },
			{
				 value: 1,
				 label: "待审核",
			 },
			{
				 value: 2,
				 label: "已审核",
			 },
 
			]);*/
		const handleChange = (value, option) => {
			console.log("改变了", value, option);
			console.log(state.valueContent);
		};
		//搜索
		const search = () => {
			state.selectedRows = [];
			//重新获取列表
			getClassList();
		};
		//重置
		const reset = () => {
			state.name = null;
			state.auditStatus = null;
			//重新获取列表
			getClassList();
		};

		const changePaginationStu = (page) => {
			state.currentPage = page;
			getClassList();
		};
		return {
			...toRefs(state),
			// showDrawerSelFacet,
			afterVisibleChange,
			closeDrawer,

			columns1,
			getClassData,
			handleChange,
			reset,
			getClassList,
			changePaginationStu,
			rowSelection,
			search,
			submitCourse,

			// change,
		};
	},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
	background-color: #fafafa !important;
}

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

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

		.contentMain {
			.main_items {
				display: flex;

				margin-bottom: 12px;
				margin-top: 32px;
				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: 32px;
				height: 40px;
				background-color: #e9f6fe;

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

					.title {
						color: rgba(0, 0, 0, 0.65);
						margin-right: 17px;
					}

					.data {
						color: #4ea6ff;
					}

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