<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="序号" min-width="60" prop="id"> </el-table-column>

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

          <el-table-column label="解压密码" min-width="60" prop="secret">
            <template v-slot="{ row }">
              <span> {{ row.isSend ? row.secret : '还未生成' }} </span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="80px" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <el-button v-if="row.isSend" type="success" size="small" icon="el-icon-circle-check" @click="download(row)">下载文件</el-button>

              <el-button v-else type="text" size="small">等待审核</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 { downloadArtical, getReplyArticalList } 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.getReplyArticalList()
  },
  filters: {
    filterTitle(val) {
      if (val.length > 35) {
        return val.substr(0, 32) + '...'
      } else {
        return val
      }
    },
    toDatetime,
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
      this.getReplyArticalList()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getReplyArticalList()
    },
    applyDoc(row) {
      this.dialogFormVisible = true
      this.form = row
    },
    download(row) {
      let param = { articalId: row.articalId, isLeader: 0, id: row.id }
      this.loading = true
      this.$message.successMsg('文件生成中', 1)
      downloadArtical(param)
        .then((res) => {
          this.loading = false
          if (res.code == 200) {
            window.open(res.data)
            return
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    getReplyArticalList() {
      let { page, pageSize } = this
      let param = { pageSize, page }
      getReplyArticalList(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>
