<template>
	<div>
		<a-image
			style="height: 200px; width: 100%"
			width="100%"
			:src="forumSrc"
			:preview="false"
			fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
		/>
	</div>
	<div style="display: flex; justify-content: center" class="main-content-wrapper">
		<a-card :bordered="false" style="width: 1200px" class="formMount">
			<a-space>
				<div style="display: flex">
					<a-tooltip :getPopupContainer="(trigger) => trigger.parentElement">
						<template #title>
							<span>回到首页</span>
						</template>
						<a-button @click="goToHome">
							<HomeOutlined />
						</a-button>
					</a-tooltip>
				</div>
				<a-input-search
					v-model:value="searchFormState.postTitle"
					placeholder="请输入名称关键词"
					enter-button
					allowClear
					@search="onSearch"
				/>
				<a-select
					v-model:value="typeVal"
					placeholder="所有分类"
					style="width: 110px"
					:options="typeOptionsVal"
					@change="handleChangeVal"
					allowClear
				></a-select>
				<a-select
					v-if="typeVal == 0"
					v-model:value="typeValue"
					show-search
					placeholder="所有分类"
					style="width: 100px"
					:options="typeOptions"
					:filter-option="filterOption"
					@change="handleChange"
					allowClear
				></a-select>
				<a-radio-group v-model:value="searchFormState.sortOrder" button-style="solid">
					<a-radio-button
						v-for="module in moduleTypeList"
						:key="module.id"
						:value="module.id"
						@click="moduleClock(module.id, module.type)"
					>
						{{ module.title }}
					</a-radio-button>
				</a-radio-group>
				<a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.sortOrder)">
					<template #icon><plus-outlined /></template>
					创建新主题
				</a-button>
			</a-space>
			<a-table
				ref="table"
				class="mt-2"
				:columns="columns"
				:dataSource="tableData"
				:row-key="(record) => record.id"
				:custom-row="customRow"
				:pagination="false"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'postTitle'">
						<div class="forum-list-title">{{ record.postTitle }}</div>
						<div class="forum-list-type">
							{{ postName(record.postType) }} {{ record.typeName ? '|' : '' }} {{ record.typeName }}
						</div>
						<div class="forum-list-content one-line" v-html="record.postContent"></div>
					</template>
					<template v-if="column.dataIndex === 'lastReplyUserAvatar'">
						<a-tooltip :title="record.lastReplyUserNickName" placement="top">
							<a-avatar :src="record.lastReplyUserAvatar"></a-avatar>
						</a-tooltip>
					</template>
					<template v-if="column.dataIndex === 'lastReplyTime'">
						<div>{{ formatDateTime(record.lastReplyTime) }}</div>
					</template>
				</template>
			</a-table>
			<div style="text-align: center; cursor: pointer" class="mt-2" @click="moreList">{{ moreText }}</div>
			<Form ref="formRef" @successful="resetLoad()" />
		</a-card>
	</div>
</template>

<script setup name="forumList">
	import forumApi from '@/api/forum/forumApi'
	import Form from './form.vue'
	import { parseTime } from '@/utils/exam'
	import { useRoute, useRouter } from 'vue-router'
	import forumSrc from '@/../public/img/login_background_front.png'
	const route = useRoute()
	const router = useRouter()
	const formRef = ref()
	let searchFormState = reactive({
		sortOrder: 0,
		postTitle: '',
		postType: route.query.postType ?? null
	})
	const table = ref(null)
	const moduleTypeList = ref([
		{
			title: '最新',
			id: 0,
			type: 1,
			state: 0
		},
		{
			title: '热门',
			id: 1,
			type: 1,
			state: 1
		},
		{
			title: '我发布的',
			id: 2,
			type: 2,
			state: 1
		},
		{
			title: '我回复的',
			id: 3,
			type: 2,
			state: 2
		},
		{
			title: '关于我的',
			id: 4,
			type: 2,
			state: 3
		},
		{
			title: '我点赞的',
			id: 5,
			type: 2,
			state: 4
		}
	])
	const columns = [
		{
			title: '主题',
			dataIndex: 'postTitle'
		},
		{
			title: '最后回复人',
			dataIndex: 'lastReplyUserAvatar',
			align: 'center',
			width: 120
		},
		{
			title: '回复量',
			dataIndex: 'replyCount',
			align: 'center',
			width: 100
		},
		{
			title: '浏览量',
			dataIndex: 'viewCount',
			align: 'center',
			width: 100
		},
		{
			title: '最后回复时间',
			dataIndex: 'lastReplyTime',
			align: 'center',
			width: 120
		}
	]
	const typeVal = ref('所有分类')
	const typeOptionsVal = ref([
		{
			label: '普通帖子',
			value: 0
		},
		{
			label: '技术支持',
			value: 1
		},
		{
			label: '内容纠错',
			value: 2
		},
		{
			label: '章节讨论',
			value: 3
		}
	])
	const pagination = ref({
		current: 1,
		size: 10
	})
	const postName = computed(() => {
		return (val) => {
			return typeOptionsVal.value.filter((r) => r.value == val)[0].label
		}
	})
	const typeValue = ref('所有分类')
	const typeOptions = ref([])
	const handleChange = (value) => {
		exType.value = false
		searchFormState.typeId = value
		if (searchFormState.sortOrder > 1) {
			searchFormState.sortOrder = 0
		}
		loadData(pagination.value)
	}
	const handleChangeVal = (value) => {
		exType.value = false
		searchFormState.postType = value
		loadData(pagination.value)
	}
	const filterOption = (input, option) => {
		return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}
	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	// 查询
	const onSearch = () => {
		exType.value = false
		loadData(pagination.value)
	}
	function customRow(record) {
		return {
			onClick: () => itemSelect(record)
		}
	}
	function itemSelect(record) {
		router.push({
			path: '/forum/detail',
			query: {
				postId: record.postId,
				postType: route.query.postType ?? ''
			}
		})
	}
	function getTypeList() {
		forumApi.forumTypeList().then((data) => {
			typeOptions.value = data.map((r) => {
				return {
					label: r.typeName,
					value: r.typeId,
					...r
				}
			})
		})
	}

	const exType = ref(false)
	const tableData = ref([])
	const tableTotal = ref(0)
	const resetLoad = () => {
		pagination.value.current = 1
		loadData(pagination.value)
	}
	const loadData = (parameter, a) => {
		if (exType.value) {
			let postExtend = moduleTypeList.value.filter((r) => r.id == searchFormState.sortOrder)[0]?.state
			return forumApi.moreList(Object.assign(parameter, { postExtend: postExtend })).then((data) => {
				tableTotal.value = data.total
				if (a) {
					tableData.value = Object.assign(tableData.value, data.records)
				} else {
					if (data) {
						tableData.value = data.records
					} else {
						tableData.value = []
					}
				}
			})
		} else {
			return forumApi.forumList(Object.assign(parameter, searchFormState)).then((data) => {
				tableTotal.value = data.total
				if (a) {
					tableData.value = tableData.value.concat(data.records)
				} else {
					if (data) {
						tableData.value = data.records
					} else {
						tableData.value = []
					}
				}
			})
		}
	}

	// 切换应用标签查询菜单列表
	const moduleClock = (value, t) => {
		exType.value = false
		searchFormState.sortOrder = value
		pagination.value.current = 1
		moreText.value = '加载更多'
		if (t == 2) {
			exType.value = true
			typeValue.value = '所有分类'
		}
		loadData(pagination.value)
	}
	const moreText = ref()

	const moreList = () => {
		if (tableTotal.value > pagination.value.current * pagination.value.size) {
			pagination.value.current += 1
			loadData(pagination.value, 1)
			moreText.value = '加载更多'
		} else {
			moreText.value = '全部加载完成'
		}
	}
	// 定义滚动函数
	const handleScroll = () => {
		const tableContainer = window.document.querySelector('.main-content-wrapper')
		const scrollPosition = tableContainer.scrollTop
		const isBottom = tableContainer.scrollHeight - scrollPosition - 20 < tableContainer.clientHeight
		if (isBottom) {
			if (tableTotal.value > pagination.value.current * pagination.value.size) {
				pagination.value.current += 1
				loadData(pagination.value, 1)
				moreText.value = '加载更多'
			} else {
				moreText.value = '全部加载完成'
			}
			console.log('加载更多')
		}
	}

	//回到首页
	const goToHome = () => {
		router.push({
			path: '/'
		})
	}
	onMounted(() => {
		getTypeList()
		loadData(pagination.value)
		nextTick(() => {
			// 添加scroll监听
			if (table.value) {
				const tableContainer = window.document.querySelector('.main-content-wrapper')
				tableContainer.addEventListener('scroll', handleScroll)
			}
		})
	})

	onBeforeUnmount(() => {
		// 移除scroll监听
		nextTick(() => {
			if (table.value) {
				const tableContainer = window.document.querySelector('.main-content-wrapper')
				tableContainer.removeEventListener('scroll', handleScroll)
			}
		})
	})
</script>
<style scoped>
	.forum-list-title {
		font-size: 16px;
		font-weight: bold;
	}

	.forum-list-type {
		font-size: 12px;
	}

	.forum-list-content {
		font-size: 14px;
		color: #696969;
	}

	.one-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>
