<!--知识库搜索模块-->
<template>
  <div class="knowledge">
    <div class="search-div">
      <el-input v-model="listQuery.keywords" :size="size" placeholder="关键字" class="search-input" clearable/>
      <el-button :size="size" type="primary" class="search-btn" @click="search">知识查找</el-button>
    </div>
    <div class="answer-div">
      <!--<el-scrollbar class="knowledge-scrollbar">-->
      <ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="infinite-list">
        <li v-for="item in list" :key="item.kId" class="answer-item">
          <el-card body-style="{padding:5px;}" shadow="hover" @click.native="showKnoledgeDetail(item)">
            <div class="answer-title">{{ item.kName }} _知识库_ {{ item.kTypeName }}</div>
            <div class="answer-info">{{ item.kInfo }}</div>
          </el-card>
        </li>
        <li v-if="loading" class="tip">加载中...</li>
        <li v-if="noMore" class="tip">没有更多了</li>
      </ul>
      <!--</el-scrollbar>-->
    </div>
    <knowledge-detail ref="kdetail"/>
  </div>
</template>

<script>
import KnowledgeDetail from './knowledgeDetail'
import { searchKnowledge } from '@/api/knowledge'
export default {
  name: 'KnowledgeSearch',
  components: { KnowledgeDetail },
  data() {
    return {
      listQuery: {
        keywords: '',
        limit: 5,
        offset: 1
      },
      loading: false,
      noMore: false,
      list: [], // 检索结果列表
      total: 0, // 总数
      size: 'small' // 输入框大小
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  created() {
    this.search(true)
  },
  methods: {
    search(init = false) {
      if (init) {
        this.listQuery.offset = 1
        this.list = []
      }
      searchKnowledge(this.listQuery).then(response => {
        if (response.code === 200) {
          this.loading = false
          if (response.data.rows.length === 0) {
            this.noMore = true
          } else {
            this.list = this.list.concat(response.data.rows)
          }
        }
      })
      // this.list = [
      //   { kName: '搬迁协议签订后家庭成员发生变化应如何处理？', kTypeName: '纳税服务中心', kInfo: '建档立卡户搬迁对象以签订搬迁协议时当地扶贫部门核定的家庭人口为准，安置住房建设（分配）面积和建房补助资金也应按签订协议时的家庭人口关系和人数核定。协议签订后，户籍人口因新生、死亡、婚姻、就学、兵役等原因发生增减变化时，要及时调整建档立卡户人员信息，但无论户籍登记是否变更，仍按协议确定人口数为准。（发改振兴[2019]1068号《关于印发新时期异地扶贫搬迁工作百问百答的通知》）--咨询电话：6210746' },
      //   { kName: '纳税人为非雇员（如客户、邀请讲课专家等存在业务合作关系的人员）支付的旅客运输费用，能否抵扣进项税额', kTypeName: '纳税服务中心', kInfo: '财政部税务总局海关总署关于深化增值税改革有关政策的公告》（财政部税务总局海关总署公告2019年第39号）规定，增值税一般纳税人购进国内旅客运输服务，其进项税额允许从销项税额中抵扣。这里指的是与本单位' },
      //   { kName: '企业预缴时享受了小型微利企业所得税优惠，汇算清缴时发现不符合小型微利企业条件的怎么办？', kTypeName: '纳税服务中心', kInfo: '国家税务总局关于实施小型微利企业普惠性所得税减免政策有关问题的公告》（国家税务总局公告2019年第2号）已经做出了明确规定，只要企业在预缴时符合小型微利企业条件，预缴时均可以预先享受优惠政策。但是，... ...' },
      //   { kName: '特困人员救助供养对象是?', kTypeName: '临夏州民政局', kInfo: '无劳动能力、无生活来源且无法定赡养、抚养、扶养义务人，或者其法定赡养、抚养、扶养义务人无赡养、抚养、扶养能力的老年人、残疾人以及未满十六周岁的未成年人。特困人员救助供养主要包括：提供基本生活条件；对生活不能自理的给予照料；提供疾病治疗；办理丧葬事宜。特困人员救助供养形式分为在家分散供养和在当地供养服务机构集中供养。--咨询电话：6214502' },
      //   { kName: '特困人员救助供养标准是什么？', kTypeName: '临夏州民政局', kInfo: '无劳动能力、无生活来源且无法定赡养、抚养、扶养义务人，或者其法定赡养、抚养、扶养义务人无赡养、抚养、扶养能力的老年人、残疾人以及未满十六周岁的未成年人。特困人员救助供养主要包括：提供基本生活条件；对生活不能自理的给予照料；提供疾病治疗；办理丧葬事宜。特困人员救助供养形式分为在家分散供养和在当地供养服务机构集中供养。--咨询电话：6214502' }
      // ]
    },
    load() {
      this.listQuery.offset += 1
      this.loading = true
      this.search()
    },
    // 显示知识详情
    showKnoledgeDetail(obj) {
      this.$refs.kdetail.initDialog(obj)
    },
    // 清除数据
    clearData(){
      this.listQuery = {
        keywords: '',
        limit: 5,
        offset: 1
      }
    }
  }
}
</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;
      .knowledge-scrollbar{
        height: 456px;
        width: 100%;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }

      }
      .infinite-list{
        height: 456px;
        list-style-type:none;
        padding: 0px;
        margin: 0px;
        overflow:auto;
        .tip{
          text-align: center;
          line-height: 2;
          margin-top: 10px;
          margin-bottom: 10px;
        }
      }
      .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;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
        }
      }
    }
  }

</style>