<template>
	<div class="layout-padding knowledge-retrieval-container">
		<div class="layout-padding-auto layout-padding-view pd15">
			<div class="input-box">
				<el-input v-model="state.queryParams.Keyword" placeholder="关键词" class="input-with-select" @keyup.enter="getList" clearable>
					<template #prepend>
						<el-select v-model="state.queryParams.RetrievalType" size="large" placeholder="请选择" style="width: 100px">
							<el-option v-for="item in state.typeList" :key="item.value" :label="item.label" :value="item.value" class="w1" />
						</el-select>
					</template>
					<template #append>
						<el-button type="primary" size="large" class="btn" :loading="state.loading" @click="getList">搜索</el-button>
					</template>
				</el-input>
			</div>
			<el-divider />
			<el-scrollbar class="flex1">
				<div v-loading="state.loading">
					<template v-if="state.retrievalList.length">
						<div v-for="(v, i) in state.retrievalList" :key="i" class="retrieval-cootent-item">
							<h4 class="mb10">{{ v.title }}</h4>
							<div v-html="queryTitleLight(v.content)"></div>
						</div>
					</template>
					<template v-else>
						<Empty type="search" description="暂无结果" />
					</template>
				</div>
			</el-scrollbar>

			<!-- 分页 -->
			<pagination :total="state.total" v-model:page="state.queryParams.PageIndex" v-model:limit="state.queryParams.PageSize" @pagination="getList" />
		</div>
	</div>
</template>

<script setup lang="ts" name="knowledgeRetrieval">
import { reactive } from 'vue';
import { knowretrieval } from '/@/api/knowledge/retrieval';
const state = reactive<any>({
	queryParams: {
		// 查询条件
		PageIndex: 1,
		PageSize: 10,
		Keyword: '',
		RetrievalType: 0,
	},
	total: 0,
	loading: false,
	typeList: [
		{
			label: '全文',
			value: 0,
		},
		{
			label: '标题',
			value: 1,
		},
		{
			label: '正文',
			value: 2,
		},
	],
	retrievalList: [],
});
const queryTitleLight = (titleInfo: string) => {
	const strReturn = titleInfo.replace(
		new RegExp(state.queryParams.Keyword, 'g'),
		`<span style="color:var(--el-color-danger)">${state.queryParams.Keyword}</span>`
	);
	return strReturn;
};
const getList = () => {
	state.loading = true;
	knowretrieval(state.queryParams)
		.then((res: any) => {
			state.retrievalList = res.result?.items ?? [];
			state.total = res.result?.total ?? 0;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
</script>

<style scoped lang="scss">
.knowledge-retrieval-container {
	.input-box {
		width: 80%;
		margin: 10px auto;
		.input-with-select {
			:deep(.el-input-group__prepend) {
				background-color: var(--el-fill-color-blank);
			}
		}
	}
	.flex1 {
		flex: 1;
	}

	.retrieval-cootent {
		&-item {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			padding: 20px;
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
</style>
