<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" v-if="checkLeader(item.isLeader)" :class="{'is-active':item.id==selectId}">
              <span>{{ item.value }}</span>
            </el-menu-item>
          </template>

        </el-menu>

      </div>

      <div class="main-right">
        <!-- <el-card class="nopad"> -->
          <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" style="width: 500px;" 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 :row-style="{'height':'75px'}">
            <el-table-column label="标题" min-width="180" prop="title">
              <template slot-scope="{row}">
                <el-input  v-if="row._edit" v-model="row.title" type="text"></el-input>
                <span v-else class="link-title" @click="gotoDetail(row)">
                【{{openMap[row.isOpen]}}{{row.articalId}}】{{row.title}}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="部门" width="110" prop="department" align="center">
            </el-table-column>

            <el-table-column label="状态" width="90" prop="status" align="center">
              <template v-slot="{row}">
                <span>{{statusMap[row.status]}}</span>
              </template>
            </el-table-column>


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

            <el-table-column label="操作" width="130" align="center">
              <template v-slot="{row, $index}">

                <!-- look -->
                <el-button  v-if="isLeader>0 && selectItem._edit"  type="text" @click="editFile(row)" >编辑</el-button>
                <el-button  v-if="selectItem._info"  type="text"   @click="gotoDetail(row)" >详情</el-button>
                <el-button  v-if="selectItem._recover"  type="text"   @click="recoverDetail(row)" >恢复</el-button>


                <el-button  v-if="isLeader>0 && selectItem._edit" type="text" style="color:darkorange"  @click="row._delete=true">删除</el-button>
                <!--  -->
                <el-popover placement="top" width="150"  v-model="row._delete" >
                  <p>你是否确认删除？</p>
                  <div style="text-align: right; top: 0">
                    <el-button size="mini" type="text" @click="row._delete = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="deleteArtical(row)">确定</el-button>
                  </div>
                </el-popover>

                <!-- 清空 -->
                <el-button  v-if="isLeader>0 && selectItem._clean"  type="text" style="color:darkorange;margin-left:10px"  @click="row._clean=true">清空</el-button>
                <el-popover placement="top" width="150"  v-model="row._clean" >
                  <p>你是否确认清空？</p>
                  <div style="text-align: right; top: 0">
                    <el-button size="mini" type="text" @click="row._clean = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="cleanArtical(row, $index)">确定</el-button>
                  </div>
                </el-popover>

              </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, deleteArtical, cleanArtical}  from '@/api/article'
import {getEditArticalList,downloadFile, editArticalTitle}  from '@/api/article'
import {download} from '@/utils/download.js'
import {toDatetime, toDate} from '@/utils/date.js'
import data from '../data/data.js'
import { mapActions,mapGetters } from "vuex";

export default {
  name: 'application',
  components: {
    IHeader,
    IFooter
  },
  watch:{
    'searchInfo.keyword'(val){
      console.log("watch", val)
      this.getArticalList()
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      options:data.myfiles,
      statusMap: data.statusMap,
      pageSize: 10,
      page:1,
      searchDepartId: "",
      openMap:data.openMap,
      listApi: getEditArticalList,
      restaurants: [],
      searchInfo:{
        keyword:''
      },
      selectItem:{},
      state3: '',
      selectId:"0",
      selectName: '我经办文件',
      isShowMore: false
    }
  },
  filters:{
    toDatetime,
    toDate
  },
  created() {
    let index = this.$route.query.index||0;

    this.selectTag( data.myfiles[index] );
  },
  computed: {
  	...mapGetters("user", ["userDepartments"])
  },
  methods: {
    ...mapActions("user", ["logout"]),
    checkLeader(leaderId){
      if( !leaderId )  return true;
      for( let i in this.userDepartments){
        if( this.userDepartments[i].isLeader == leaderId){
          return true
        }
      }
      return false
    },
    download( row ){
      let query= {articalId: row.articalId }
      this.$router.push( {path: '/file-info', query})
    },
    deleteArtical( row ){
      deleteArtical( {articalId: row.articalId}).then(res=>{
        if( res.code == 200){
          row._delete = false
          row.status = 4
          row.isOpen = 2
        }
      })
    },
    cleanArtical( row, index ){
      cleanArtical( {articalId: row.articalId}).then(res=>{
        if( res.code == 200){
          this.list.splice( index, 1 )
        }
      })
    },
    cancelEdit(row) {
    	row = Object.assign(row, row.temp);
    	row._edit = false;
    	delete row["temp"];
    },
    initEdit(row) {
    	let form = Object.assign({}, row);
    	row._edit = true;
    	row.temp = form;
    },
    confirmEdit(row) {
    	let param = {articalId:row.articalId, title:row.title}
    	editArticalTitle( param ).then((res) => {
    		if (res.code == 200) {
    			row._edit = false;
    			delete row["temp"];
    			this.$message.successMsg("编辑成功", 1);
    		}
    	});
    },

    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})
    },
    recoverDetail(row){
      let path = "/file-add"
      let query = {articalId: row.articalId, "recover": true}
      this.$router.push( {path, query})
    },
    doLogout(){
      this.logout().then( res=>{
        console.log("logout")
      })
    },
    selectTag( item ) {
      this.selectId = item.id;
      this.listApi = item.listApi,
      this.isLeader = item.isLeader||0;
      this.selectName = item.value
      this.selectItem = 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){
          let list = res.data.list||[];
          this.list = list.map( item => {
            item._delete = false;
            item._edit = false;
            item._clean = false;
            return item
           });
          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>
