<template>
	<div class="subject-container">
		<a-form layout="inline">
			<a-form-item label="年级：">
				<a-select v-model:value="queryParam.level" placeholder="年级" allowClear style="width: 160px">
					<a-select-option v-for="item in levelEnum" :key="item.key" :value="item.key">
						{{ item.value }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-button type="primary" @click="submitForm">查询</a-button>
				<a-button type="primary" class="ml-8" @click="goAdd">添加</a-button>
			</a-form-item>
		</a-form>

		<a-table
			:loading="listLoading"
			:data-source="tableData"
			:pagination="false"
			row-key="id"
			bordered
			style="margin-top: 16px"
		>
			<a-table-column title="Id" dataIndex="id" key="id" />
			<a-table-column title="学科" dataIndex="name" key="name" />
			<a-table-column title="年级" dataIndex="levelName" key="levelName" />
			<a-table-column title="操作" key="action" width="180px">
				<template #default="{ record }">
					<a-button size="small" @click="goEdit(record)" class="mr-8">编辑</a-button>
					<a-popconfirm title="确定要删除该学科吗？" @confirm="delSubject(record)" ok-text="确定" cancel-text="取消">
						<a-button size="small" danger>删除</a-button>
					</a-popconfirm>
				</template>
			</a-table-column>
		</a-table>
		<a-pagination
			v-show="total > 0"
			:total="total"
			:current="queryParam.pageIndex"
			:pageSize="queryParam.pageSize"
			:show-size-changer="true"
			:show-quick-jumper="true"
			@change="onPageChange"
			@showSizeChange="onPageSizeChange"
			style="margin-top: 16px; text-align: right"
		/>
		<!-- 编辑/添加 抽屉 -->
		<a-drawer
			:visible="drawerVisible"
			:title="drawerTitle"
			placement="right"
			width="900"
			@close="closeDrawer"
			destroyOnClose
		>
			<FormEdit v-if="drawerVisible" :id="editId" @success="onEditSuccess" />
		</a-drawer>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { message } from 'ant-design-vue'
	import subjectApi from '@/api/exam/paper/subject.js'
	import { useExamStore } from '@/store/exam.js'
	import FormEdit from './form.vue'
	const examStore = useExamStore()
	const levelEnum = examStore.levelEnum
	const drawerTitle = ref('添加学科')
	const drawerVisible = ref(false)
	const queryParam = ref({
		level: null,
		pageIndex: 1,
		pageSize: 10
	})
	const listLoading = ref(false)
	const tableData = ref([])
	const total = ref(0)
	const editId = ref(null)
	const fetchData = async () => {
		listLoading.value = true
		try {
			const params = {
				...queryParam.value,
				current: queryParam.value.pageIndex,
				size: queryParam.value.pageSize
			}
			delete params.pageIndex
			delete params.pageSize
			const data = await subjectApi.pageList(params)
			const re = data
			tableData.value = re.records
			total.value = re.total
			queryParam.value.pageIndex = re.current
		} finally {
			listLoading.value = false
		}
	}

	onMounted(() => {
		fetchData()
	})

	const submitForm = () => {
		queryParam.value.pageIndex = 1
		fetchData()
	}

	const onPageChange = (page) => {
		queryParam.value.pageIndex = page
		fetchData()
	}
	const onPageSizeChange = (current, size) => {
		queryParam.value.pageSize = size
		queryParam.value.pageIndex = 1
		fetchData()
	}

	const delSubject = async (row) => {
		await subjectApi.deleteSubject(row.id)
		fetchData()
	}

	const closeDrawer = () => {
		drawerVisible.value = false
		editId.value = null
	}

	const goAdd = () => {
		drawerTitle.value = '添加学科'
		drawerVisible.value = true
	}
	const goEdit = (row) => {
		drawerTitle.value = '编辑学科'
		drawerVisible.value = true
		editId.value = row.id
	}
	const onEditSuccess = () => {
		closeDrawer()
		fetchData()
	}
</script>

<style lang="less" scoped>
	.subject-container {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
	}
	.ml-8 {
		margin-left: 8px;
	}
	.mr-8 {
		margin-right: 8px;
	}
</style>
