<template>
	<div class="knowledge-container">
    <el-tabs v-model="state.queryParams.Attribution" @tab-change="knowledgeRetrievalPaged">
      <el-tab-pane label="中心知识库" name="中心知识库"> </el-tab-pane>
      <el-tab-pane label="部门知识库" name="部门知识库"> </el-tab-pane>
    </el-tabs>
    <el-autocomplete
        v-model="state.queryParams.Keyword"
        :fetch-suggestions="querySearchAsync"
        placeholder="关键词"
        @select="handleSelect"
        class="mr10 w100 knowledge-input"
        clearable
        value-key="title"
    >
      <template #prefix>
        <SvgIcon name="ele-Search" size="16px" />
      </template>
      <template #suffix>
        <el-button
            class="knowledge-search-button"
            type="primary"
            :loading="state.loading"
            round
            @click="knowledgeRetrievalPaged"
        >
          <SvgIcon name="ele-Search" size="16px" color="#fff" />
        </el-button>
      </template>
    </el-autocomplete>
		<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)">
          <h4 class="mb10 text-no-wrap">{{ v.title }}</h4>
          <div class="text-ellipsis2" >{{v.summary}}</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-ChatDotSquare" size="16px" class="mr3"/>{{v.commentNum}}</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
		:total="state.knowledgeTotal"
		v-model:page="state.queryParams.PageIndex"
		v-model:limit="state.queryParams.PageSize"
		@pagination="knowledgeRetrievalPaged"
		:pageSizes="[5, 10, 15, 20]"
		layout="total, prev, pager, next"
		class="pt10"
	/>
</template>
<script setup lang="ts" name="orderAcceptKnowledge">
// 定义变量内容
import {onMounted, reactive, ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {formatDate} from "/@/utils/formatTime";
import {knowledgeRetrieval} from "/@/api/knowledge/retrieval";

const props = defineProps({
	type: {
		// 知识库类型 （中心|部门）
		type: String,
		default: '',
	},
	formData: {
		// 表单填写的数据
		type: Object,
		default: () => {
			return {};
		},
	},
});

const state = reactive<any>({
	loading: false, // 知识检索加载状态
	knowledgeList: [],
	knowledgeTotal: 0,
  queryParams: {
		PageIndex: 1,
		PageSize: 5,
		Keyword: null,
    Attribution:'中心知识库'
	},
});
//  知识检索
const knowledgeRetrievalPaged = async () => {
	// state.queryParams.Keyword = props.formData.hotSpotName ?? '';
	try {
		state.loading = true;
		const res: any = await knowledgeRetrieval(state.queryParams);
		state.knowledgeList = res.result?.items ?? [];
		state.knowledgeTotal = res.result?.total ?? 0;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
const querySearchAsync = (queryString: string | null, cb: (arg: any) => void) => {
  if (queryString) {
    state.loading = true;
    knowledgeRetrieval({
      ...state.queryParams,
      Keyword: queryString,
    })
        .then((res: any) => {
          state.loading = false;
          cb(res.result?.items ?? []);
        })
        .catch(() => {
          state.loading = false;
          cb([]);
        });
  } else {
    cb([]);
  }
}
const handleSelect = (item: Record<string, any>) => {
  state.queryParams.Keyword = item.title;
  knowledgeRetrievalPaged();
}
const router = useRouter(); // 路由
const route = useRoute(); // 路由
// 预览知识
const onPreview = (row: any) => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: row.id,
			tagsViewName: '知识查看',
		},
	});
};
onMounted(() => {
		knowledgeRetrievalPaged();
});
defineExpose({
	knowledgeRetrievalPaged,
});
</script>

<style scoped lang="scss">
.knowledge-container {
	position: relative;
  :deep(.el-input__wrapper) {
    border-radius: 20px;
    background: var(--hotline-bg-main-color);
  }
	.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>
