<template>
  <div class="other-container" style="margin-top: 178px;">
    <IHeader :departmentId="selectDepartId"/>
    <div  class="main">

      <div class="main-table">

        <div class="main-left">
          <el-select v-model="searchDepartId" filterable clearable placeholder="关键字搜索部门" @change="handleChangeDepart">
            <el-option
              v-for="item in list"
              :key="item.department_id"
              :label="item.department"
              :value="item.department_id"
            >
            </el-option>
          </el-select>
          <el-menu
            :default-active="selectDepartId"
            class="el-menu-vertical-demo"
            @select="handleSelectDepart">
            <template  v-for="(item, index) in list">
              <el-menu-item :index="item.department_id">
                <span>{{ item.department}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </div>

        <div class="main-right">
          <div style="margin: 16px;position:relative;">
            <i class="el-icon-location"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
              <el-breadcrumb-item>文件列表</el-breadcrumb-item>
              <el-breadcrumb-item>{{ selectDepartName }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>


          <IArtical :department="selectDepartName" type="laws"
            :list="restaurants.laws" @more="handleOpenMore('laws')" @download="downloadFile"></IArtical>
          <IArtical :department="selectDepartName" type="mechanism"
            :list="restaurants.mechanism" @more="handleOpenMore('mechanism')" @download="downloadFile"></IArtical>
          <IArtical :department="selectDepartName" type="result"
            :list="restaurants.result" @more="handleOpenMore('result')" @download="downloadFile"></IArtical>
          <IArtical :department="selectDepartName" type="other"
            :list="restaurants.other" @more="handleOpenMore('other')" @download="downloadFile"></IArtical>

        </div>
      </div>

      <el-dialog title="申请材料" center :visible.sync="dialogFormVisible"  >
        <h3> 【{{form.title}}】非公开，需要向对应科室申请</h3>
        <div class="dialog-footer" slot="footer">
          <el-button type="warning" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">确认申请</el-button>
        </div>
      </el-dialog>
    </div>

    <IFooter />



  </div>
</template>

<script>
import IHeader from "./components/IHeader";
import IArtical from "./components/IArtical";
import IFooter from "./components/IFooter";
import glIcon from '@/icons/img/2016smyjj_gl_icon.jpg'
import data  from '../data/data.js'
import {getHotArticalList,getArticalList}  from '@/api/article'
import { mapActions } from "vuex";

export default {
  name: 'application',
  components: {
    IHeader,
    IArtical,
    IFooter
  },
  data() {
    return {
      categorys:{'laws':'法律法规', 'mechanism':'机制类','result':'成果类', 'other':'其他类'},
      dialogFormVisible: false,
      glIcon: glIcon,
      list: data.departs,
      searchDepartId: "",
      restaurants: {},
      form:{},
      state3: '',
      selectDepartId:"0",
      selectDepartName: '',
      category:'',
      isShowMore: false
    }
  },
  mounted() {
    this.getHotArticalList();
  },
  filters:{
    filterTitle(val){
      if( val.length > 35) {
        return val.substr(0,32)+"..."
      }else{
        return val
      }
    }
  },
  methods: {
    ...mapActions("user", ["setArticals"]),
    downloadFile(o){
      this.form = o;
      this.dialogFormVisible = true
    },
    getHotArticalList() {
      let param = {
        "departmentId": +this.selectDepartId,
        "category": this.category
      }
      getHotArticalList( param ).then( res=>{
        this.restaurants = res.data
        this.initSearch()

      })
    },
    initSearch(){
      this.setArticals( this.restaurants.laws||[] )
      this.setArticals( this.restaurants.mechanism||[] )
      this.setArticals( this.restaurants.result||[] )
      this.setArticals( this.restaurants.other||[] )
    },
    handleSelectFile(item) {
      console.log("handleSelectFile", item);
    },
    handleChangeDepart(item){
      console.log("handleChangeDepart", item);
      
      this.selectDepartId = item;
      // 切换文件列表
    },
    handleSelectDepart( departId ) {
      localStorage.setItem("@departmentId", departId)
      this.selectDepartId = departId;
      for( let i in data.departs){
        if( data.departs[i].department_id == departId){
          this.selectDepartName = data.departs[i].department;
        }
      }
      console.log("handleSelectDepart", this.selectDepartId,this.selectDepartName );
      this.getHotArticalList();
      // 切换文件列表
    },
    querySearch( item ){
      console.log( "search item")

    },
    handleOpenMore(type){
      console.log("handleOpenMore", this)
      let query = {category:type, departmentId: this.selectDepartId}
      let path = '/file-search'
      this.$router.push( {path, query})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-breadcrumb{
    display: inline-block;
    padding-left: 10px;
  }
  .box-card{
    margin-bottom: 20px;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

</style>
