<template>
	<a-drawer :visible="EvalListVisible" class="drawerStyle addonlineDrawer" 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="inputV1" style="width: 424px; height: 40px; border-radius: 8px"
									placeholder="请输入项目名称" />
							</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="resetData">
							<div class="search"></div>
							<div class="btnText">重置</div>
						</div>
					</div>
				</div>
				<div class="main_table">
					<a-table style="border: 1px solid #f2f6fe" :columns="columns" :data-source="tableData"
						:loading="tableDataTotal === -1 ? true : false" :pagination="false" :row-selection="{
	type: 'radio',
	selectedRowKeys: selectedRowKeys,
	onChange: onSelectChange,
}" />
					<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="changePagination" />
						</div>
					</div>
				</div>
			</div>
			<div class="main_btns">
				<button class="btn1" @click="closeDrawer">取消</button>
				<button class="btn2" @click="checkFinish">确定</button>
			</div>
		</div>
	</a-drawer>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "../../api/indexEval";
export default {
	name: "EvList",
	props: {
		EvalListVisible: {
			type: Boolean,
			default: false,
		},
		evaluationTypeId: {
			type: Number,
			default: null,
		},
		evaluationTypeName: {
			type: String,
			default: "",
		},
	},
	setup(props, ctx) {
		const state = reactive({
			currentPage: 1,
			tableDataTotal: 0,
			pageSize: 10,
			inputV1: "",
			evaluationTypeId: null,
			evaluationTypeName: "",
			tableData: [],
			selectedRowKeys: [],
			evListData: {},
			columns: [
				{
					title: "测评编号",
					width: "20%",
					dataIndex: "quiz_code",
					key: "code",
					ellipsis: true,
				},
				{
					title: "测评名称",
					width: "20%",
					dataIndex: "title",
					key: "title",
					align: "center",
					ellipsis: true,
				},
				{
					title: "备注",
					width: "40%",
					dataIndex: "theme_desc",
					key: "content",
					align: "center",
					ellipsis: true,
				},
				//   {
				//   title: "状态",
				//    width: "13%",
				//    dataIndex: "status",
				//    key: "status",
				//    align: "center",
				//   },
				// {
				//  title: "价格",
				//  width: "13%",
				//  dataIndex: "quiz_price",
				// key: "price",
				// align: "center",
				// },
				{
					title: "可答题人数",
					width: "20%",
					dataIndex: "quiz_range",
					key: "time",
					align: "center",
					ellipsis: true,
				},
			],
		});
		const onSelectChange = (selectedRowKeys, selectedRows) => {
			if (selectedRowKeys.length > 1) {
				return;
			}
			state.selectedRowKeys = selectedRowKeys;
			state.evListData = selectedRows[0] ? selectedRows[0] : {};
			console.log("state.evListData", state.evListData);
		};
		const closeDrawer = () => {
			state.selectedRowKeys = [];
			state.evListData = {};
			state.inputV1 = "";
			ctx.emit("update:EvalListVisible", false);
		};
		const afterVisibleChange = (bol) => {
			if (bol == true) {
				getAllEvalText();
			}
		};
		const checkFinish = () => {
			ctx.emit("getEvListData", state.evListData);
			closeDrawer();
		};
		const changePagination = (page) => {
			state.currentPage = page;
			getAllEvalText();
		};
		//如果编辑情况会通过父亲传回来evaluationTypeId遍历出相同的那个选项 再将那个选项的key值赋给state.selectRowKeys
		const getTableDataList = (tableData) => {
			let data = tableData;
			let array = [];
			let arrayKey = [];
			if (props.evaluationTypeName != "") {
				data.map((value, index) => {
					let obj = {
						key: index + 1,
						status: value.status,
						quiz_code: value.quiz_code,
						quiz_kid: value.quiz_kid,
						title: value.title,
						theme_desc: value.notes,
						quiz_price: value.quiz_price,
						quiz_range: value.limit_number,
						quiz_type: value.quiz_type,
					};
					array.push(obj);
					if (obj.title == props.evaluationTypeName) {
						arrayKey.push(obj.key);
					}
				});
				state.tableData = array;
				state.selectedRowKeys = arrayKey;
			} else {
				data.map((value, index) => {
					let obj = {
						key: index + 1,
						status: value.status,
						quiz_code: value.quiz_code,
						quiz_kid: value.quiz_kid,
						title: value.title,
						theme_desc: value.notes,
						quiz_price: value.quiz_price,
						quiz_range: value.limit_number,
						quiz_type: value.quiz_type,
					};
					array.push(obj);
				});
				state.tableData = array;
			}
		};

		//获取测评列表
		const getAllEvalText = () => {
			let objael = {
				keyword: state.inputV1,
			};
			api
				.choiceEvaluation(objael)
				.then((res) => {
					state.tableDataTotal = 9;
					console.log("测评列表", res.data.data);
					getTableDataList(res.data.data);
				})
				.catch(() => { });
		};
		//搜索测评列表
		const searchList = () => {
			state.selectedRowKeys = [];
			if (state.inputV1 !== "") {
				getAllEvalText();
			} else {
				resetData();
			}
		};
		//重置测评列表
		const resetData = () => {
			state.currentPage = 1;
			state.selectedRowKeys = [];
			state.evListData = {};
			getAllEvalText();
		};
		return {
			...toRefs(state),
			afterVisibleChange,
			closeDrawer,
			onSelectChange,
			getTableDataList,
			checkFinish,
			changePagination,
			searchList,
			resetData,
		};
	},
};
</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-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;

					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;

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

				.classify {
					margin-left: 10px !important;
					padding-left: 9px !important;
				}

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