<template>
  <div class="main">
    <div class="main-table">
      <div class="main-left">
        <el-menu
          default-active="1-5"
          class="el-menu-vertical-demo"
          style="min-height: 700px;"
          >
          <template  v-for="(item, index) in options">
            <el-menu-item :index="'1-'+item.id" @click="selectTag(item)" :key="index">
              <span>{{ item.value }}</span>
            </el-menu-item>
          </template>

        </el-menu>

      </div>

      <div class="main-right">
        <el-card class="">
          <div slot="header" class="clearfix">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
            	<el-form-item :label="selectName">
                <el-input placeholder="" v-model="searchInfo.keyword" clearable></el-input>
              </el-form-item>

              <el-form-item>
                <el-button @click="getArticalList" type="primary">搜索</el-button>
              </el-form-item>
            </el-form>

          </div>


          <el-table :data="list"  border stripe>

            <el-table-column label="序号" width="100" prop="articalId" align="center">
              <template v-slot="{row}">
                <span> 【{{openMap[row.isOpen]}}】{{row.articalId}}</span>
              </template>
            </el-table-column>


            <el-table-column label="标题" min-width="200" prop="title">
            </el-table-column>

            <el-table-column label="时间" min-width="90" prop="createAt" align="center">
              <template slot-scope="{row}">
                <span> {{row.createAt|toDatetime}}</span>
              </template>
            </el-table-column>

            <el-table-column label="备注" width="110" align="center">
              <template v-slot="{row}">
                <el-button  type="text" @click="gotoDetail(row)"> 详情 </el-button>

                <el-button  type="text" @click="download(row)" v-if="selectId==1"> 下载 </el-button>
                <el-button  type="text" @click="editFile(row)" v-else-if="selectId==5"> 编辑 </el-button>
              </template>
            </el-table-column>

          </el-table>


          <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :style="{float:'center',padding:'20px'}"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </el-card>

      </div>
    </div>
  </div>
</template>

<script>
import IHeader from "./components/IHeader";
import IFooter from "./components/IFooter";
import {getArticalList,getApplyArticalList}  from '@/api/article'
import {getEditArticalList,downloadFile}  from '@/api/article'
import {download} from '@/utils/download.js'
import {toDatetime} from '@/utils/date.js'
import data from '../data/data.js'
import { mapActions } from "vuex";

export default {
  name: 'application',
  components: {
    IHeader,
    IFooter
  },
  watch:{
    'searchInfo.keyword'(val){
      this.getArticalList()
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      options:data.myfiles,
      pageSize: 10,
      page:1,
      searchDepartId: "",
      openMap:data.openMap,
      listApi: getEditArticalList,
      restaurants: [],
      searchInfo:{
        keyword:''
      },
      state3: '',
      selectId:"5",
      selectName: '我负责的文件',
      isShowMore: false
    }
  },
  filters:{
    toDatetime
  },
  mounted() {
    this.getArticalList();
  },
  methods: {
    ...mapActions("user", ["logout"]),
    download( row ){
      // let articalId = row.articalId
      download( `/api/artical/downloadFile/${articalId}`)
      // window.open( `http://smoa.ndjsxh.cn:8888/api/downloadFile/${articalId}`)
    },
    editFile( row ){
      let path = "/file-add"
      let query = {articalId: row.articalId}
      this.$router.push( {path, query})
    },
    gotoDetail(row ){
      let path = "/file-info"
      let query = {articalId: row.articalId}
      this.$router.push( {path, query})
    },
    doLogout(){
      this.logout().then( res=>{
        console.log("logout")
      })
    },
    selectTag( item ) {
      this.selectId = item.id;
      this.listApi = item.listApi,
      this.selectName = item.value
      console.log( "selectTag", item)
      this.getArticalList()
      // 切换文件列表
    },
    handleSizeChange(size){
      this.pageSize = size
      this.getArticalList()
    },
    handleCurrentChange(page){
      this.page = page
      this.getArticalList()
    },
    getArticalList(){
      let {page,pageSize} = this
      let param = {page,pageSize, keyword: this.searchInfo.keyword}
      this.listApi( param ).then( res=>{
        if( res.code == 200){
          this.list = res.data.list||[]
          this.total = res.data.total||0
        }
      })
    }
  }
}
</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;
      }
    }
  }
  .el-card__body .text{
    margin: 5px 0;
  }

  .el-card{
    color: #1890ff;
  }
  .el-card__header{
    padding: 15px 20px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
