<template>
<div class="app-container">
  <div class="app-header">
    <div class="search-logo"></div>
    <el-input prefix-icon="el-icon-search" placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
      <el-button slot="append" @click="searchDocument">搜索文档</el-button>
    </el-input>
  </div>
    <div class="content">
        <div class="content-left scroll">
            <div v-if="loadingLeft" class="content-right-content loading loading-left">
                <div class="loading-div">
                    <i class="el-icon-loading loading-center"></i>
                    <div>加载中...</div>
                </div>
            </div>
            <div class="content-left-center scroll">
                <div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div>
                <div class="left-content" v-for="(item, index) in listLeft" :key="index">
                    <div class="left-content-title">
                      <div class="logo"><img src="../../../assets/image/juliang.png" alt="" class="logo-img"></div>
                      <span class="media text">{{item.name}}</span>
                      <span class="text">更新日期：{{dateFilter(item.createTime)}}</span>
                    </div>
                    <div class="content-text-header">
                        <a class="link" v-if="item.docUrl" :href="item.docUrl" target="_blank">{{item.title}}</a>
                        <span v-else>{{item.title}}</span>
                    </div>
                    <p class="content-text" v-html="item.docContent"></p>
                </div>
                <pagination v-show="queryParamsLeft.pageContent>0 && loadMoreLeft && listLeft.length"
                :total="queryParamsLeft.pageContent"
                :page.sync="queryParamsLeft.pageNo"
                :limit.sync="queryParamsLeft.pageSize"
                layout="total, prev, pager, next"
                @pagination="seatchInitLeft" />
                <!-- <div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div> -->
            </div>
        </div>
    </div>
</div>
</template>

<script>
// 接口调用方法
import {
  documentFindDocument
} from "@/api/system/product";
export default {
  data() {
    return {
        search: '',
        loadingLeft: false,
        loadMoreLeft: true,
        queryParamsLeft: {
            pageNo: 1,
            pageSize: 10,
            pageContent: 0
        },
        listLeft: []
    }
  },
  watch: {},
  created() {
    let searchDocument = localStorage.getItem("searchDocument")
    let searchs = this.$route.params.search
    if (searchs) {
       this.search =  searchs
       localStorage.setItem("searchDocument", searchs)
       this.searchDocument()
    } else if (searchDocument) {
       this.search = searchDocument
       this.searchDocument()
    } else {
      this.clearData()
    }
  },
  computed: {
  },
  methods: {
    // 搜索
    searchDocument() {
      this.clearData()
      if (!this.search.trim()) {
        this.$message({
          message: '请输入需要搜索的内容',
          type: 'warning'
        })
        return
      }
      localStorage.setItem("searchDocument", this.search.trim())
      this.seatchInitLeft()
    },
    dateFilter(time) {    
      if (!time) { 
        // 当时间是null或者无效格式时我们返回空        
        return '-'    
      } else {        
        const date = new Date(time) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000        
        const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ，目的就是数字小于10，例如9那么就加上一个0，变成09，否则就返回本身。        // 这是es6的解构赋值。        
        const [Y, M, D, h, m, s] = [            
            date.getFullYear(),            
            dateNumFun(date.getMonth() + 1),            
            dateNumFun(date.getDate()),            
            dateNumFun(date.getHours()),            
            dateNumFun(date.getMinutes()),            
            dateNumFun(date.getSeconds())        
        ]        
        return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号，否则无效。    
      }
    },
    // 搜索左侧
    seatchInitLeft() {
        this.loadingLeft = true
        let name = this.search
        let pageindex = this.queryParamsLeft.pageNo
        let pagesize = this.queryParamsLeft.pageSize
        documentFindDocument({ name, pageindex, pagesize })
          .then(response => {
            let data = response.content.value
            if (response.code === 200 && data.length) {
              let pageContent = this.queryParamsLeft.pageContent
              if (response.content.totalSize !== pageContent) {
                this.queryParamsLeft.pageContent = response.content.totalSize || 0
              }
              for (let i = 0; i < data.length; i++) {
                data[i].docContent = data[i].docContent ? data[i].docContent + '...' : '-'
              }
              this.$set(this, 'listLeft', data)
            } else {
              this.$set(this, 'listLeft', [])
            }
            this.loadingLeft = false
        })
        .catch(error => {
          this.loadingLeft = false;
        });
        setTimeout(() => {
          this.loadingLeft = false
        }, 1000);
    },
    // 数据初始化
    clearData() {
        this.loadMoreLeft = true
        this.loadingLeft = false
        this.queryParamsLeft = {
            pageNo: 1,
            pageSize: 10,
            pageContent: 0
        }
        this.listLeft = []
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/main.scss';
</style>