<template>
	<div class="plan-container">
		<div class="plan-input">
			<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable class="mr10 w100" @keyup.enter="knowledgeRetrievalPaged">
				<template #prefix>
					<SvgIcon name="ele-Search" size="16px" />
				</template>
				<template #append>
					<el-button type="primary" @click="knowledgeRetrievalPaged" class="search-button" size="small" round
						><SvgIcon name="ele-Search" class="mr4" /> 查询
					</el-button>
				</template>
			</el-input>
		</div>
		<div class="mt5" style="display: flex; flex-wrap: wrap; justify-content: space-between">
			<div style="display: flex">
				<div style="height: 32px; line-height: 32px">排序：</div>
				<el-radio-group v-model="state.queryParams.SortField" @change="handleQuery">
					<el-radio value="pageView">浏览量</el-radio>
					<el-radio value="score">评分</el-radio>
					<el-radio value="creationTime">创建时间</el-radio>
				</el-radio-group>
			</div>
		</div>
		<div class="mt10 retrieval-content" v-loading="state.loading">
			<el-empty description="暂无数据" v-if="!state.knowledgeList.length" class="mb20">
				<template #image>
					<span></span>
				</template>
			</el-empty>
			<el-scrollbar>
				<div v-for="(v, i) in state.knowledgeList" :key="i" class="retrieval-content-item" @click="onPreview(v)">
					<div class="mb10" style="display: flex">
						<p class="text-no-wrap" style="flex: 1">{{ v.title }}</p>
					</div>
					<div class="flex-center-between mt10 color-info">
						<div>
							<span class="mr10">创建部门：{{ v.creatorOrgName }}</span>
							<span>创建时间：{{ formatDate(v.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						</div>
						<div class="flex-center-align">
							<span class="flex-center-align"><SvgIcon name="ele-StarFilled" size="18px" class="mr3" />{{ v.score }}</span>
							<span class="flex-center-align ml10"><SvgIcon name="ele-View" size="16px" class="mr3" />{{ v.pageView }}</span>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
	<pagination
		@pagination="knowledgeRetrievalPaged"
		:total="state.knowledgeTotal"
		v-model:current-page="state.queryParams.PageIndex"
		v-model:page-size="state.queryParams.PageSize"
		layout="prev, pager, next"
		class="pt10"
	/>
</template>
<script setup lang="ts" name="orderAcceptPlan">
// 定义变量内容
import { onMounted, reactive, defineAsyncComponent, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { formatDate } from '@/utils/formatTime';
import { throttle } from '@/utils/tools';
import { planRetrieval } from '@/api/plan/retrieval';

const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

const props = defineProps({
	formData: {
		// 表单填写的数据
		type: Object,
		default: () => {
			return {};
		},
	},
});
const state = reactive<any>({
	loading: false, // 知识检索加载状态
	knowledgeList: [],
	knowledgeTotal: 0,
	queryParams: {
		PageIndex: 1,
		PageSize: 5,
		Keyword: null,
		RetrievalType: 0, // 检索类型
		Attribution: '中心预案库',
		SortField: 'pageView',
	},
});
// 手动查询，将页码设置为1
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	knowledgeRetrievalPaged();
};
//  知识查询
const knowledgeRetrievalPaged = throttle(async () => {
	try {
		state.loading = true;
		state.queryParams.Title = state.queryParams.Keyword;
		state.queryParams.Content = state.queryParams.Keyword;
		const request = {
			...state.queryParams,
			HotspotId: props.formData.hotspotId,
		};
		const { result } = await planRetrieval(request);
		state.knowledgeList = result?.items ?? [];
		state.knowledgeTotal = result?.total ?? 0;

		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
}, 300);
// 预览知识
const router = useRouter();
const onPreview = (row: any) => {
	router.push({
		name: 'planPreview',
		params: {
			id: row.id,
			isAddPv: 'isAddPv',
			tagsViewName: row.title,
		},
	});
};
// 提供外部查询
const HotspotName = ref('');
const querySearch = async (name: string) => {
	try {
		// state.queryParams.Keyword = name;
		state.queryParams.Title = state.queryParams.Keyword;
		state.queryParams.Content = state.queryParams.Keyword;
		const request = {
			...state.queryParams,
		};
		const res: any = await planRetrieval(request);
		state.knowledgeList = res.result?.items ?? [];
		state.knowledgeTotal = res.result?.total ?? 0;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
watch(
	() => props.formData.hotspotId,
	(val: any) => {
		knowledgeRetrievalPaged();
	},
	{ immediate: true, deep: true }
);
onMounted(() => {
	knowledgeRetrievalPaged();
});
defineExpose({
	knowledgeRetrievalPaged,
	querySearch,
});
</script>

<style scoped lang="scss">
.plan-container {
	position: relative;
	.el-radio {
		margin-right: 10px;
		line-height: 32px;
	}
	.knowledge-search-button {
		height: calc(100% - 6px);
	}
	.retrieval-content {
		&-item {
			border-bottom: var(--el-border);
			padding: 5px 15px;
			margin-bottom: 10px;
			cursor: pointer;
			&:last-child {
				margin-bottom: 0;
				border: none;
			}
			&:hover {
				color: var(--el-color-primary);
			}
		}
	}
}
</style>
