<template>
	<div>
		<a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
			<a-col>
				<a-form-item title="姓名：">
					<a-input class="cus-input" v-model:value="tableParam.studentName" placeholder="请输入姓名" />
				</a-form-item>
			</a-col>
			<a-col>
				<a-button class="cus-btn" style="width: 100px" @click="getStuList">
					<template #icon>
						<img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png" /></template>
					搜索
				</a-button>
			</a-col>
			<a-col :span="2">
				<a-button class="cus-btn white" style="width: 100px" @click="reset">重置
				</a-button>
			</a-col>
		</a-row>

		<a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
			<a-col :span="1.5">
				<CommonStudent :type="type" :id="id" @finash="submitCall" :stage="stage">
					<a-button class="cus-btn">
						<template #icon><img style="margin-right: 10px"
								src="../../assets/images/courseManage/add0.png" /></template>
						添加学员
					</a-button>
				</CommonStudent>
			</a-col>
			<a-col :span="1.5">
				<a-button class="cus-btn white" @click="bathDel">
					<template #icon><img style="margin-right: 10px" src="../../assets/images/projectadd/delete.png" /></template>
					批量删除
				</a-button>
			</a-col>
			<a-col :span="1.5" v-if="type === 2">
				<a-button class="cus-btn white" @click="showChangeModal">
					<template #icon></template>
					批量调整关卡
				</a-button>
			</a-col>
		</a-row>
		<div style="margin-top: 20px">
			<a-table :columns="tablecolumns" :data-source="tableData.list" :pagination="stuPagination"
				:loading="tableData.loading" row-key="id" :row-selection="stuRowSelection">
				<template #action="{ record }">
					<div style="display:flex;justify-content: center;align-items: center;">
						<!-- <div v-if="props.type == 1" @click="excellentStudent(record)"
							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
							优秀学员
						</div>

						<div @click="seeStudent(record)"
							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
							查看
						</div>

						<div v-if="props.type == 2" @click="seeStudent(record)"
							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
							调整
						</div> -->

						<div @click="del(record.id)"
							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
							删除
						</div>
					</div>
					<!-- <a-row gutter="12">
            <a-col>
              <slot name="extension" v-bind:data="{ record }"></slot>
            </a-col>
            <a-col>
              <a-select style="width: 80px" value="更多">
                <a-select-option value="删除" label="删除">
                  <div @click="del(record.id)">删除</div>
                </a-select-option>
              </a-select>
              <div
                @click="del(record.id)"
                style="color: #4ea6ff; font-size: 14px; text-align: center"
              >
                删除
              </div>
            </a-col>
          </a-row> -->
				</template>
			</a-table>
		</div>
	</div>
	<!-- 批量调整关卡弹窗 -->
	<ChangeLevelModal v-model:visiblene="visiblene" :stage="stage" :ids="stuSelectKeys" @finash="submitCall" />
	<!-- 批量调整关卡弹窗 -->
	<!-- 取消学员弹窗 -->
	<div>
		<a-modal v-model:visible="canclestu" :footer="null" :closable="close" wrapClassName="canclestu" centered="true"
			@cancel="closeModal1">
			<div class="delete">
				<div class="del_header"></div>
				<div class="del_main">
					<div class="header">
						<div class="icon1"></div>
						<span>提示</span>
					</div>
					<div class="body">
						<span>您是否授予此学员优秀学员称号？</span>
					</div>
					<div class="del_btnbox">
						<div class="del_btn btn1" @click="cancelyou">
							<div class="btnText">取消</div>
						</div>
						<div class="del_btn btn2" @click="closeModal1">
							<div class="btnText">确定</div>
						</div>
					</div>
				</div>
			</div>
		</a-modal>
	</div>
	<!-- 取消学员弹窗 -->
	<!-- 优秀学员弹窗 -->
	<div>
		<a-modal v-model:visible="canclestu1" :footer="null" :closable="close" wrapClassName="canclestu1" centered="true">
			<div class="delete">
				<div class="del_header"></div>
				<div class="del_main">
					<div class="header">
						<div class="icon1"></div>
						<span>提示</span>
					</div>
					<div class="body">
						<span>您是否取消此学员优学员称号？</span>
					</div>
					<div class="del_btnbox">
						<div class="del_btn btn1">
							<div class="btnText" @click="cancelcanyou">取消</div>
						</div>
						<div class="del_btn btn2">
							<div class="btnText" @click="closeModal3">确定</div>
						</div>
					</div>
				</div>
			</div>
		</a-modal>
	</div>
	<!-- 查看学员 传入查看学员的id-->
	<see-stu v-model:Seevisible="Seevisible" v-model:checkStuId="checkStuId" v-model:projectId="projectId" />
</template>
<script setup>
import { computed, defineProps, onMounted, ref, watch } from "vue";
import { delStudentList, getStuPage } from "@/api/index1";
import CommonStudent from "@/components/student/CommonStudent";
import ChangeLevelModal from "./ChangeLevelModal.vue";
import { message } from "ant-design-vue";
// import { topStudent } from "../../api/indexProjStu";
import SeeStu from "../../components/drawers/SeeStu";
const props = defineProps({
	type: Number,
	id: String,
	columns: {
		type: Array,
		default: () => [],
	},
	stage: {
		type: Array,
		default: () => [],
	},
	visable: {
		type: Boolean,
		default: false,
	},
});
const tablecolumns = ref([
	{
		title: "姓名",
		dataIndex: "studentName",
		key: "studentName",
		width: "8%",
		align: "left",
		className: "h",
	},
	{
		title: "工号",
		dataIndex: "studentUserNo",
		key: "studentUserNo",
		width: "20%",
		align: "center",
		className: "h",
		ellipsis: true,
	},
	{
		title: "部门",
		dataIndex: "studentDepartName",
		key: "studentDepartName",
		width: "15%",
		align: "center",
		className: "h",
		ellipsis: true,
	},
	{
		title: "加入方式",
		dataIndex: "source",
		key: "source",
		width: 100,
		align: "center",
		customRender: ({ record: { source } }) =>
			({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
	},
	...props.columns,
	{
		title: "操作",
		dataIndex: "operation",
		key: "operation",
		width: "20%",
		align: "center",
		slots: { customRender: "action" },
	},
]);
const tableParam = ref({
	studentName: "",
	pageNo: 1,
	pageSize: 10,
	type: props.type,
	pid: props.id,
});
const stuSelectKeys = ref([]);
const tableData = ref({
	list: [],
	total: 0,
	loading: false,
});

const stuRowSelection = computed(() => ({
	columnWidth: 20,
	selectedRowKeys: stuSelectKeys.value,
	onChange: onStuSelectChange,
	preserveSelectedRowKeys: true,
}));

onMounted(() => {
	getStuList();
});

watch(props, () => {
	if (!props.visable) {
		stuSelectKeys.value = [];
		console.log("关闭了");
	}
	console.log("props.visable", props.visable)
	tableParam.value.pid = props.id;
	getStuList();


});

function onStuSelectChange(e) {
	stuSelectKeys.value = e;
}

const stuPagination = computed(() => ({
	total: tableData.value.total,
	showSizeChanger: false,
	current: tableParam.value.pageNo,
	pageSize: tableParam.value.pageSize,
	onChange: changePagination,
}));

function changePagination(page) {
	tableParam.value.pageNo = page;
	getStuList();
}

function getStuList() {
	tableData.value.loading = true;
	getStuPage(tableParam.value).then((res) => {
		console.log("学员管理-获取学员", res.data);
		tableData.value.total = res.data.data.total;
		tableData.value.list = res.data.data.records;
		tableData.value.loading = false;
	});
}

function reset() {
	tableParam.value.studentName = "";
	getStuList();
}

function bathDel() {
	if (stuSelectKeys.value &&
		stuSelectKeys.value.length === 0) {
		message.destroy();
		return message.warning("请先选中学员");
	}
	stuSelectKeys.value &&
		stuSelectKeys.value.length &&
		delStudentList({
			ids: stuSelectKeys.value,
		}).then(() => {
			getStuList();
		});
}

function del(id) {
	id &&
		delStudentList({
			ids: [id],
		}).then(() => {
			getStuList();
		});
}

function submitCall(flag) {
	tableData.value.loading = true;
	flag && getStuList();
}

// 调整关卡;
const visiblene = ref(false);
const showChangeModal = () => {
	if (!stuSelectKeys.value.length) {
		message.error("请选择学员")
		return
	}
	visiblene.value = true;
};

// 优秀学员
const canclestu = ref(false)
const canclestu1 = ref(false)

// function excellentStudent(record) {
// 	console.log(record)
// 	if (record.topFlag) {
// 		// 当该名学员是优秀学员时候
// 		canclestu1.value = true;
// 	} else {
// 		// 当该名学员不是优秀学员时候
// 		canclestu.value = true;
// 	}
// }

// 优秀学员-弹框关闭
function cancelyou() {
	canclestu.value = false;
}
// 优秀学员-设置优秀学员
function closeModal1() {
	canclestu.value = false;
	// 授予优秀学员操作


}

// 取消优秀学员-弹框关闭  
function cancelcanyou() {
	canclestu1.value = false;
}
// 取消优秀学员-取消优秀学员
function closeModal3() {
	canclestu1.value = false;
	// 取消优秀学员操作


}

// 查看学员
const Seevisible = ref(false)
const checkStuId = ref(null)
const projectId = ref(null)

// function seeStudent(record) {
// 	console.log(record)
// 	checkStuId.value = record.id;
// 	projectId.value = props.id;
// 	Seevisible.value = true;

// 	console.log(props.type)

// 	console.log(checkStuId.value, projectId.value)
// }

</script>
<style>
.studentopea1 {
	font-size: 14px;
	font-weight: 400;
	color: #387df7;
	line-height: 22px;
	padding-right: 8px;
	border-right: 1px solid #e9e9e9;
	cursor: pointer;
}

.cus-btn {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	border: 1px solid #4ea6ff;
	border-radius: 8px;
	background: #4ea6ff;
	cursor: pointer;
	color: #fff;
}

.white {
	background: #fff;
	color: #4ea6ff;
}

.cus-input {
	height: 40px;
	border-radius: 8px;
}

.del_header {
	position: absolute;
	width: calc(100%);
	height: 40px;
	background: linear-gradient(rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
}

/* .delete {
	z-index: 9999;
	width: 424px;
	background: #ffffff;
	box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
	border-radius: 4px;
	position: absolute;
	left: 50%;
	top: 10%;
	transform: translate(-50%, -50%);
}

.body {
	width: 100%;
	margin: 34px auto 56px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.del_main {
	width: 100%;
	position: relative;
}

.del_main>.header {
	display: flex;
	align-items: center;
	padding-top: 20px;
	padding-left: 26px;
	font-size: 16px;
}

.del-icon {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	background-image: url(@/assets/images/coursewareManage/notice.png);
	background-size: 100% 100%;
}

.icon {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	background-image: url(@/assets/images/coursewareManage/QR.png);
	background-size: 100% 100%;
}

.close_exit {
	position: absolute;
	right: 42px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-image: url(@/assets/images/coursewareManage/close.png);
	background-size: 100% 100%;
}

.del_btnbox {
	display: flex;
	margin: 30px auto;
	justify-content: center;
}

.del_btn {
	width: 100px;
	height: 40px;
	background: rgba(64, 158, 255, 0);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

.btnText {
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
}

.btn1 {
	border: 1px solid rgba(64, 158, 255, 1);
	color: #4ea6ff;
}

.btn2 {
	background-color: #4ea6ff;
	color: #ffffff;
}

.ant-modal-close {
	margin-right: 18px;
	margin-top: 5px;
}

.ant-modal-content {
	width: 424px !important;
	height: 258px !important;
}

.ant-modal-body {
	width: 424px !important;
	height: 258px !important;
	padding: 0 !important;
	position: relative;
	top: 105px !important;
}

.ant-modal-body>.delete {
	z-index: 999;
	width: 424px;
	height: 258px;
	background: #ffffff;
	box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
	border-radius: 4px;


}

.ant-modal-body>.del_header {
	position: absolute;
	width: calc(100%);
	height: 68px;
	background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
			rgba(78, 166, 255, 0) 100%);
}

.ant-modal-body>.del_main {
	width: 100%;
	position: relative;
}

.ant-modal-body>.del_main>.header {
	display: flex;
	align-items: center;
	padding-top: 20px;
	padding-left: 26px;
	font-size: 16px;


}

.ant-modal-body>.del_main>.header>.icon1 {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	background-image: url(@/assets/images/coursewareManage/QR.png);
	background-size: 100% 100%;
}

.ant-modal-body>.del_main>.header>.close_exit {
	position: absolute;
	right: 42px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-image: url(@/assets/images/coursewareManage/close.png);
	background-size: 100% 100%;
}

.ant-modal-body>.del_main>.body {
	width: 100%;
	margin: 34px auto 56px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;


}

.ant-modal-body>.del_main>.body>.back {
	position: absolute;
	top: 30px;
	font-size: 12px;
	font-weight: 400;
	color: #666666;
}

.ant-modal-body>.del_main>.del_btnbox {
	display: flex;
	margin: 30px auto;
	justify-content: center;
}

.ant-modal-body>.del_main>.del_btnbox>.del_btn {
	width: 100px;
	height: 40px;
	background: rgba(64, 158, 255, 0);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
}

.ant-modal-body>.del_main>.del_btnbox>.del_btn>.btnText {
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
}

.ant-modal-body>.del_main>.del_btnbox>.btn1 {
	border: 1px solid rgba(64, 158, 255, 1);
	color: #4ea6ff;
	margin-right: 14px;
}

.ant-modal-body>.del_main>.del_btnbox>.btn2 {
	background-color: #4ea6ff;
	color: #ffffff;
}

.canclestu>.ant-modal {
	width: 424px !important;
	height: 258px !important;
} */
</style>