<template>
  <div class="student_file_list">
    <div v-loading.fullscreen.lock="loadingFull" />

    <div class="search">
      <el-form ref="searchParams" :model="searchParams" label-width="80px">
        <el-input
          v-model="searchParams.name"
          placeholder="文件名称"
          clearable
        ></el-input>
        <el-select v-model="searchParams.key" placeholder="请选择步骤">
          <el-option
            v-for="item in steps"
            :key="item.key"
            :label="item.name"
            :value="item.key"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="searchFile" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button type="primary" @click="packDownload">打包下载</el-button>
      </el-form>
    </div>
    <el-table :data="filList" border align="center" style="width: 100%">
      <el-table-column prop="name" label="文件名称" align="center">
      </el-table-column>
      <el-table-column prop="key_name.name" label="步骤名" align="center">
      </el-table-column>
      <el-table-column prop="organization.name" label="所属支部" align="center">
      </el-table-column>
      <el-table-column
        prop="staff.name"
        label="姓名"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="staff.no" label="学号" width="180" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="{ row }">
          <el-button plain type="primary" size="mini" @click="lookDetail(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.page"
        background
        :page-sizes="[15, 20, 30, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
      >
      </el-pagination>
    </div>
    <!--资源详情-->
    <el-dialog :visible.sync="dialogVisible" width="50%" center>
      <div class="detail-con">
        <div class="detail-title">{{ detailList.name }}</div>
        <div class="title1">({{ detailList.is_branch_text }})</div>

        <div class="edit-image">
          <div
            class="img-list"
            @click="imageDetail(item)"
            v-for="(item, index) in detailList.resource"
          >
            <img :src="item" alt="" />
          </div>

          <div
            class="big-img"
            v-show="imgDetaildialogVisible"
            @click="closeBigImg"
          >
            <img :src="bigImage" alt="" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { archivesList, selectSteps } from "@/api/personnel/index";
import { packDownload } from "@/api/process/index";
import "jquery";
export default {
  data() {
    return {
      filList: [],
      loadingFull: false,
      dialogVisible: false,
      searchParams: {
        name: "", //上传人员
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      totalPage: 0, //总页码
      detailList: [],
      staffId: "",
      steps: "",
      bigImage: "",
      imgDetaildialogVisible: false
    };
  },
  created() {
    this.staffId = this.$route.query.list.id;
    console.log(this.staffId);
    const params = {
      staff_id: this.staffId
    };
    this.archivesList(params);
    this.selectSteps();
  },
  methods: {
    //关闭大图
    closeBigImg() {
      this.imgDetaildialogVisible = false;
    },
    //查看大图
    imageDetail(item) {
      this.imgDetaildialogVisible = true;
      this.bigImage = item;
    },

    //获取资源步骤
    async selectSteps() {
      const params = {
        type: 1
      };
      await selectSteps(params).then(res => {
        this.steps = res;
        console.log(res, "--------------------------");
      });
    },
    //资源详情列表
    async archivesList(params) {
      this.loadingFull = true;
      await archivesList(params).then(res => {
        console.log(res);
        this.filList = res.data.data;
        this.totalPage = res.data.meta.pagination.total;
        this.loadingFull = false;
      });
    },
    //查看详情
    lookDetail(row) {
      this.dialogVisible = true;
      this.detailList = row;
    },
    //打包下载

    async packDownload() {
      let url =
        this.base_url + "/archives/staff/package?staff_id=" + this.staffId;
      let a = document.createElement("a");
      a.style.display = "none";
      console.log(this.staffId, "--------------");
      a.href = url;
      document.body.appendChild(a);
      //  let triggerDownload = $(a).attr("href", url)
      //    .attr("download", "人员名单");
      // triggerDownload[0].click();
      a.click();
      document.body.removeChild(a);
    },
    //搜索
    searchFile() {
      this.searchParams.staff_id = this.staffId;
      //搜索框数据
      this.archivesList(this.searchParams);
    },
    //切换页码
    handleSizeChange(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = this.searchParams;
      this.archivesList(data);
    },
    //切换每页显示数量
    handleCurrentChange(e) {
      console.log(e, "当前页码");
      this.searchParams.page = e;
      const data = this.searchParams;
      this.archivesList(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.student_file_list {
  .search {
    .el-input {
      width: 250px !important;
    }
    .el-select > .el-input {
      width: 250px !important;
    }
  }

  .edit-image {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
  }
  .detail-title {
    height: 70px;
    line-height: 70px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
  }
  .title1 {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
  }
  .img-list {
    flex: 0 0 200px;
    height: 200px;
    width: 200px;
    margin: 20px 5px 5px;
    overflow: hidden;
    img {
      border: 1px solid #ccc;
      border-radius: 5px;
      height: 200px;
      width: 200px;
    }
  }
  .big-img {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    img {
      margin-top: 2%;
      width: 33%;
      height: auto;
    }
  }
}
</style>
