<template>
  <div>
    <div class="nav">
      <ul>
        <li :class="{'navfirst': isActive('/file-manage')}">
          <a href="#/file-manage"> 网站首页</a>
        </li>

        <li :class="{'navfirst': isActive('/file-search')}">
          <a href="#/file-search">文件搜索</a>
        </li>

        <li :class="{'navfirst': isActive('/my-file')}">
          <a href="#/my-file">我的文件</a>
        </li>

        <li :class="{'navfirst': isActive('/apply-list')}">
          <a href="#/apply-list">审核申请</a>
        </li>

        <li :class="{'navfirst': isActive('/reply-list')}">
          <a href="#/reply-list">我的申请</a>
        </li>

        <li :class="{'navfirst': isActive('/file-add')}" v-if="isActive('/file-add')">
          <a href="#/apply-list">发布文章</a>
        </li>

        <li :class="{'navfirst': isActive('/file-info')}" v-if="isActive('/file-info')">
          <a href="#/apply-list">文件信息</a>
        </li>

      </ul>
    </div>
    <div class="sousuo">
      <h4 class="fl">今天是：<span>2021年05月13日</span>&nbsp;&nbsp;&nbsp;<span>星期四</span></h4>
      <div class="fl"><span style="margin-left: 10px;">&nbsp;&nbsp;</span></div>
      <div class="ss">
        <el-autocomplete
          v-model="keyword"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
          style="width: 200px;margin-right: 5px;"
          size="mini"
          prefix-icon="el-icon-search"
          clearable
        ></el-autocomplete>
        <el-button type="primary" size="mini" @click="handlerSearch">搜索</el-button>
        <el-button type="success" size="mini" @click="addFile">发布文章</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
export default {
  data() {
    return {
      SearchList: [],
      keyword: '',
      timeout:  null
    }
  },
  props:{
     link:{
      type : String,
      default:  'file-manage'
     },
     selectDepartId:{
      type: [String,Number],
      default: 0
     }
  },
  computed: {
  	...mapGetters("user", ["getArticals"])
  },
  methods: {
    isActive( path ){
      let rpath = this.$route.path;
      return rpath.indexOf( path )> -1;
    },
    querySearchAsync(queryString, cb) {
      let results = [];
      for ( let id in this.getArticals){
        let item = this.getArticals[id]
        if(item.title.indexOf( queryString)>-1 ){
          results.push( {id: id, value: item.title})
        }
      }
      setTimeout(res=>{cb &&cb(results) }, 100 );
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.title.indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.$router.push( {path:'/file-info', query:{articalId: item.id}})
      console.log("search", item);
    },
    handlerSearch(){
      let query = {}
      if( this.keyword ) query.keyword = this.keyword
      let departmentId = localStorage.getItem("@departmentId")||0;
      if( departmentId ) query.departmentId = departmentId
      this.$router.push( {path:'/file-search', query})
    },
    addFile(){
      this.$router.push( {path:'/file-add'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-button + .el-button{
    margin-left: 5px;
  }
</style>
