<!--知识库搜索模块-->
<template>
  <div class="knowledge">
    <div class="search-div">
      <el-input v-model="keywords" :size="size" placeholder="关键字" class="search-input"/>
      <el-button :size="size" type="primary" class="search-btn" @click="search">知识查找</el-button>
    </div>
    <div class="answer-div">
      <div v-for="item in list" class="answer-item">
        <el-card body-style="{padding:5px;}" shadow="hover">
          <div class="answer-title">{{ item.kName }}</div>
          <div class="answer-info">{{ item.kInfo }}</div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KnowledgeSearch',
  data() {
    return {
      keywords: '', // 关键字
      list: [], // 检索结果列表
      total: 0, // 总数
      size: 'small' // 输入框大小
    }
  },
  created(){
    this.search()
  },
  methods: {
    search() {
      const params = { keywords: this.keywords }
      this.list = [
        { kName: '标题1', kInfo: '答案1' },
        { kName: '标题2', kInfo: '答案FSDSFDSFDSAF 1' },
        { kName: '标题3', kInfo: '答案1SDFSDFDSFDSF' },
        { kName: '标题4', kInfo: '答案1DSSD' },
        { kName: '标题5', kInfo: '答案1FSDFSDSFDSFSDF' }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .knowledge{
    background-color: #f0f0f0;
    padding-left: 5px;
    padding-right: 5px;
    height: 100%;
    .search-div{
      display: flex;
      justify-content: space-between;
      .search-input{
        width: calc(100% - 85px) !important;
      }

    }
    .answer-div{
      margin: 3px;
      .answer-item{
        /*background-color: #ffffff;*/
        /*padding:5px 10px;*/
        /*margin-bottom: 3px;*/
        /*border: 1px solid #ebeef5;*/
        .answer-title{
          font-size:13px;
          color:#3a8ee6;
          margin-bottom: 5px;
          font-weight: bold;
        }
        .answer-info{
          font-size:12px;
          color: #898989;
        }
      }
    }
  }

</style>