
<template>
  <div class="knowledge-container">
    <el-input
        v-model="state.KnowledgeKeyword"
        class="knowledge-input mb20"
        placeholder="请填写搜索内容"
        @keyup.enter="knowledgeRetrievalPaged(state.KnowledgeKeyword)"
    >
      <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(state.KnowledgeKeyword)"
        >
          <SvgIcon name="ele-Search" size="16px" color="#fff" />
        </el-button>
      </template>
    </el-input>
    <div>
      <span class="mr10" v-if="state.hotWords.length">搜索热词</span>
      <el-tag
          v-for="(item, index) in state.hotWords"
          :key="index"
          class="mr10 mb10"
          style="cursor: pointer"
          @click="knowledgeRetrievalPaged(item)"
          round
      >
        {{ item }}
      </el-tag>
    </div>
    <ul class="mt10" v-loading="state.loading">
      <el-empty description="暂无数据" v-if="!state.knowledgeList.length" class="mb20">
        <template #image>
          <span></span>
        </template>
      </el-empty>
      <li v-for="(item, index) in state.knowledgeList" :key="index" class="mb20 knowledge-item" @click="onPreview(item)" v-else>
        <p class="font16">
          <SvgIcon name="iconfont icon-dian" size="16px" /> <b>{{ item.title }}</b>
        </p>
        <p class="pt6 indent text-ellipsis2" v-html="item.content"></p>
      </li>
    </ul>
  </div>
  <!-- 分页 -->
  <pagination
      :total="state.knowledgeTotal"
      v-model:page="state.knowledgeQuery.PageIndex"
      v-model:limit="state.knowledgeQuery.PageSize"
      @pagination="knowledgeRetrievalPaged(state.KnowledgeKeyword)"
      :pageSizes="[5, 10, 15, 20]"
      layout="total, prev, pager, next"
      class="pt10"
  />
</template>
<script setup lang="ts" name="orderAcceptKnowledge">
// 定义变量内容
import {onMounted, reactive} from "vue";
import { knowPopScreen, getKeyWord } from '/@/api/knowledge';
import {useRoute, useRouter} from "vue-router";

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

const state = reactive<any>({
  loading: false, // 知识检索加载状态
  hotWords: [],
  knowledgeList: [],
  knowledgeTotal: 0,
  knowledgeQuery: {
    PageIndex: 1,
    PageSize: 10,
    Keyword:'',
  },
  KnowledgeKeyword: '',
});

//  知识检索
const knowledgeRetrievalPaged = async (val?: string) => {
  state.knowledgeQuery.Keyword = val ?? '';
  state.KnowledgeKeyword = val ?? '';
  try {
    state.loading = true;
    const res: any = await knowPopScreen(state.knowledgeQuery);
    state.knowledgeList = res.result?.items ?? [];
    state.knowledgeTotal = res.result?.total ?? 0;
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
const router = useRouter(); // 路由
const route = useRoute(); // 路由
// 预览知识
const onPreview = (row: any) => {
  router.push({
    name: 'knowledgePreview',
    params: {
      id: row.id,
      tagsViewName: '知识预览',
    },
  });
};
onMounted(()=>{
  getKeyWord().then((res: any) => {
    state.hotWords = res.result ?? [];
  });
  if (route.params.id) {
    knowledgeRetrievalPaged(props.formData.hotSpotName);
  }
})
defineExpose({
  knowledgeRetrievalPaged,
});
</script>

<style scoped lang="scss">
.knowledge-container {
  position: relative;

  .knowledge-input {
    :deep(.el-input__wrapper) {
      border-radius: 20px;
      background: var(--hotline-bg-main-color);
    }
  }

  .knowledge-search-button {
    height: calc(100% - 6px);
  }

  .knowledge-item {
    &:last-child {
      margin-bottom: 0;
    }

    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }

    .indent {
      text-indent: 1em;
      color: var(--hotline-color-text-main-light);
      line-height: 20px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>