<template>
  <div class="main">
    <div class="main-table">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> 等待审核的记录</span>
        </div>

        <el-table :data="restaurants" border stripe v-loading="loading">
          <el-table-column label="序号" width="80" prop="articalId" align="center"> </el-table-column>
          <el-table-column label="部门" min-width="100" prop="department"> </el-table-column>

          <el-table-column label="文件名称" min-width="200" prop="title"> </el-table-column>

          <el-table-column label="提交说明"  prop="content" min-width="150">
              <template slot-scope="{ row }">
                <span v-if="row.isBack" style="color: red;">
                  分管领导【{{row.nickname}}】于 {{row.createAt|toDatetime}} 处理:
                  {{row.content||''}}
                </span>
                <span v-else style="color: royalblue;">
                  经办人【{{row.nickname}}】于 {{row.createAt|toDatetime}} 提交:
                  {{row.content||''}}
                </span>
              </template>
          </el-table-column>

          <el-table-column align="center"  label="操作" width="80" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="gotoFile(row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :style="{ float: 'center', padding: '20px' }" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </el-card>
    </div>
    <el-dialog title="[办公室]XX 申请下载资料" center :visible.sync="dialogFormVisible">
      <h3>【{{ form.username }}】需要下载文件 【{{ 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>
    <IFooter />
  </div>
</template>

<script>
import IHeader from './components/IHeader'
import IFooter from './components/IFooter'
import glIcon from '@/icons/img/2016smyjj_gl_icon.jpg'
import data from '../data/data.js'
import { waitConfirmArticalList } from '@/api/article'

import { toDatetime } from '@/utils/date.js'

export default {
  name: 'application',
  components: {
    IHeader,
    IFooter,
  },
  data() {
    return {
      dialogFormVisible: false,
      glIcon: glIcon,
      loading: false,
      list: data.departs,
      total: 0,
      page: 1,
      pageSize: 10,
      searchDepartId: '',
      restaurants: [],
      state3: '',
      form: {},
      selectDepartId: 1,
      selectDepartName: '',
      category: '',
      isShowMore: false,
    }
  },
  mounted() {
    this.getTableData()
  },
  filters: {
    filterTitle(val) {
      if (val.length > 35) {
        return val.substr(0, 32) + '...'
      } else {
        return val
      }
    },
    toDatetime,
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
      this.getTableData()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getTableData()
    },
    gotoFile(item){
      let query= {articalId: item.articalId }
      this.$router.push( {path: '/file-info', query})
    },
    getTableData() {
      let { page, pageSize } = this
      let param = { pageSize, page }
      waitConfirmArticalList(param).then((res) => {
        this.restaurants = res.data.list
        this.total = res.data.total
        console.log('getHotArticalList', res)
      })
    },
  },
}
</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;
}

.oneline {
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
