<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="isLeader(1)">
          <a href="#/file-add">上传文件</a>
        </li>

        <li :class="{'navfirst': isActive('/file-confirm')}" v-if="isLeader(2)">
          <a href="#/file-confirm">审核文章</a>
        </li>

        <li :class="{'navfirst': isActive('/file-publish')}" v-if="isLeader(3)">
          <a href="#/file-publish">发布文章</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>您好! </span>
        <span class="ml10" v-if="userInfo.userId">
          {{userInfo.nickname || '还未登入'}}
          <span type="text" size="mini" class="ml20"
            @mouseover="showqrcode=true" @mouseleave="showqrcode=false">
            <svg-icon icon-class="xcx" class-name="card-panel-icon" /> 小程序
          </span>
          <span class="ml10" >
            <el-button type="text"  size="mini" v-if="!isActive('/reset')"  @click="$router.push({name: 'reset'})">
              修改密码
            </el-button>
           </span>

          <div class="showqrcode" v-show="showqrcode" >
            <img src="../../../assets/qrcode.jpg"  />
          </div>

        </span>
        <span v-else> 您还未登入 </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="doLogout">退出登入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters,mapActions } from "vuex";
  import {title} from '@/settings.js'
export default {
  data() {
    return {
      SearchList: [],
      keyword: '',
      title:title,
      showqrcode: false,
      timeout:  null,
      curDate: new Date()
    }
  },
  props:{
     link:{
      type : String,
      default:  'file-manage'
     },
     selectDepartId:{
      type: [String,Number],
      default: 0
     }
  },
  computed: {
  	...mapGetters("user", ["getArticals", "userDepartments", "userInfo"])
  },
  methods: {
    ...mapActions("user", ["logout"]),
    isLeader(leaderId){
      for( let i in this.userDepartments){
        if( this.userDepartments[i].isLeader == leaderId){
          return true
        }
      }
      return false
    },
    doLogout(){
      this.logout().then( res=>{
       this.$router.push( {path:'/login'})
      })
    },
    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;
  }
  .showqrcode{
    position: absolute;
    border-radius: 50%;
    z-index: 99999;
  }
</style>
