<template>
  <div class="files-of-archive">
    <el-backtop target=".files-of-archive" :right="70" :bottom="70"></el-backtop>
    <div class="op">
      <div class="archiveFileNumber">
        <el-input
          v-model="archiveFileNumber"
          size="mini"
          placeholder="请输入案卷号"
          clearable></el-input>
      </div>
      <el-button
        type="primary"
        size="mini"
        style="background:#148A9B;margin-left:10px"
        icon="el-icon-search"
        @click="paramSearch">搜索
      </el-button>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="searchAllArchiveFile">
        查看所有档案文件
      </el-button>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="exportAllArchiveAllFileList">
        导出所有档案文件
      </el-button>
    </div>
    <div align="left" class="files-of-archive-form">
      <el-form
        ref="form"
        :model="this.archiveObject"
        label-position="left">
        <el-form-item
          label="当前档案案卷号"
          label-width="110px"
          style="width: 10%;float: left">
          <div class="masks"></div>
          <el-input
            size="small"
            v-if="this.archiveObject && this.archiveObject.archiveFileNumber"
            v-model="this.archiveObject.archiveFileNumber">
          </el-input>
          <el-input
            size="small"
            v-else-if="this.archiveObject && this.archiveObject.fileNumber"
            v-model="this.archiveObject.fileNumber">
          </el-input>
          <el-input size="small" v-else></el-input>
        </el-form-item>
        <el-form-item
          label="当前档案案卷档号"
          label-width="130px"
          style="width: 20%;float: left;margin-left: 20px">
          <div class="masks"></div>
          <el-input
            size="small"
            v-if="this.archiveObject && this.archiveObject.number"
            v-model="this.archiveObject.number">
          </el-input>
          <el-input size="small" v-else></el-input>
        </el-form-item>
        <el-form-item
          label="当前档案案卷正题名"
          label-width="140px"
          style="width: 30%;float: left;margin-left: 20px">
          <div class="masks"></div>
          <el-input
            size="small"
            v-if="this.archiveObject && this.archiveObject.title"
            v-model="this.archiveObject.title">
          </el-input>
          <el-input size="small" v-else></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="files-of-archive-table">
      <el-table
        v-loading.fullscreen.lock="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"
          :index="this.indexStart">
        </el-table-column>
        <el-table-column
          align="center"
          prop="type"
          label="档案类别"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="volumeNumber"
          label="全宗号"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          prop="archiveNumber"
          label="档号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="year"
          label="年度"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          prop="retentionPeriod"
          label="保管期限"
          width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="institution"
          label="机构(问题)"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="本卷件号"
          width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="pageNumber"
          label="页号"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          prop="responsiblePerson"
          label="责任者"
          width="130">
        </el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="正题名"
          width="550">
        </el-table-column>
        <el-table-column
          align="center"
          prop="writtenTimeStr"
          label="成文时间"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="annex"
          label="附件"
          width="300">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTimeStr"
          label="归档时间"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="fileType"
          label="档案类别"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="secondaryCategory"
          label="二级类目"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          prop="categoryType"
          label="类别代码"
          width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="idcard"
          label="身份证"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="concatAddress"
          label="乡镇村社"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="businessType"
          label="业务类别"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          prop="archiveFileNumber"
          label="案卷号"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          label="附件"
          width="600">
          <template slot-scope="scope">
            <div class="picPopover"
                 v-if="scope.row.idcardFrontPic">
              <span style="float: top">身份证正面:</span>
              <div style="float: top">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <img slot="reference" :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.idcardFrontPic" height="50px" width="50px" class="head_pic"/>
                  <img :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.idcardFrontPic" height="100%" width="100%" class="head_pic"/>
                </el-popover>
              </div>
            </div>
            <div class="picPopover"
                 v-if="scope.row.idcardBackPic">
              <span style="float: top">身份证背面:</span>
              <div style="float: top">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <img slot="reference" :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.idcardBackPic" height="50px" width="50px" class="head_pic"/>
                  <img :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.idcardBackPic" height="100%" width="100%" class="head_pic"/>
                </el-popover>
              </div>
            </div>
            <div class="picPopover"
                 v-if="scope.row.bankPic">
              <span style="float: top">银行卡:</span>
              <div style="float: top">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <img slot="reference" :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.bankPic" height="50px" width="50px" class="head_pic"/>
                  <img :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.bankPic" height="100%" width="100%" class="head_pic"/>
                </el-popover>
              </div>
            </div>
            <div class="picPopover"
                 v-if="scope.row.specialPhotoPic">
              <span style="float: top">特殊证明:</span>
              <div style="float: top">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <img slot="reference" :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.specialPhotoPic" height="50px" width="50px" class="head_pic"/>
                  <img :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.specialPhotoPic" height="100%" width="100%" class="head_pic"/>
                </el-popover>
              </div>
            </div>
            <div class="picPopover"
                 v-if="scope.row.bookPic">
              <span style="float: top">户口簿:</span>
              <div style="float: top">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <img slot="reference" :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.bookPic" height="50px" width="50px" class="head_pic"/>
                  <img :src="'http://socialsecurity.oss-cn-beijing.aliyuncs.com/' + scope.row.bookPic" height="100%" width="100%" class="head_pic"/>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        class="fileButton"
        type="primary"
        @click="exportOneArchiveFileList">
        导出当页文件列表
      </el-button>
      <el-button
        class="fileButton"
        type="primary"
        @click="exportAllArchiveFileList">
        导出全部文件列表
      </el-button>
      <el-pagination
        class="pone"
        :page-size='pageSize'
        :page-sizes="[10, 30, 50, 100]"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
        :current-page.sync="pageNum"
        @current-change="current_change">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import CryptoJS from 'crypto-js'
  import {baseUrl} from "../../utils/global"
  import axios from "axios"
  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        archiveObject: null,
        tableData: [],
        loading: false,
        totals: 0,
        pageNum: 1,
        pageSize: 10,
        indexStart: 1,
        archiveFileNumber: '',
      }
    },
    methods: {
      current_change(pageNum) {
        this.pageNum = pageNum;
        this.indexStart = (pageNum - 1) * this.pageSize + 1;
        const data = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          archiveFileNumber: this.archiveFileNumber,
          archiveId: this.archiveObject ? this.archiveObject.id : null
        };
        this.search(data);
      },
      search(data) {
        this.loading = true;
        this.$api.getlist.selectArchiveFiles(data)
          .then((response) => {
            if (response.code === 200 && response.data.content[0].archiveFileList.length !== 0) {
              for (const i in response.data.content[0].archiveFileList) {
                if (response.data.content[0].archiveFileList[i].name !== null && response.data.content[0].archiveFileList[i].name !== "") {
                  response.data.content[0].archiveFileList[i].name = this.decrypt(response.data.content[0].archiveFileList[i].name);
                }
                if (response.data.content[0].archiveFileList[i].idcard !== null && response.data.content[0].archiveFileList[i].idcard !== "") {
                  response.data.content[0].archiveFileList[i].idcard = this.decrypt(response.data.content[0].archiveFileList[i].idcard);
                }
                if (response.data.content[0].archiveFileList[i].title !== null && response.data.content[0].archiveFileList[i].title !== "") {
                  response.data.content[0].archiveFileList[i].title = this.decrypt(response.data.content[0].archiveFileList[i].title);
                }
              }
              this.archiveObject = response.data.content[0];
              this.tableData = response.data.content[0].archiveFileList;
              this.totals = response.data.totalSize;
            } else {
              this.archiveObject = null;
              this.tableData = null;
              this.totals = response.data.totalSize;
            }
          })
          .catch((response) => {
            this.archiveObject = null;
            this.tableData = null;
          });
        this.loading = false;
      },
      handleSizeChange(pageSize) {
        this.pageNum = 1;
        this.pageSize = pageSize;
        this.indexStart = 1;
        const data = {
          pageNum: 1,
          pageSize: pageSize,
          archiveFileNumber: this.archiveFileNumber,
          archiveId: this.archiveObject ? this.archiveObject.id : null
        };
        this.search(data);
      },
      decrypt(word) {
        var key = CryptoJS.enc.Utf8.parse("KkweInfo23255625");
        var decrypt = CryptoJS.AES.decrypt(word, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
      },
      decryptByDES(ciphertext) {
        var keyHex = CryptoJS.enc.Utf8.parse("KkweFace95271124");
        var decrypted = CryptoJS.DES.decrypt({
          ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
        }, keyHex, {
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        });
        return decrypted.toString(CryptoJS.enc.Utf8);
      },
      searchAllArchiveFile() {
        this.pageNum = 1;
        this.indexStart = 1;
        this.archiveFileNumber = '';
        this.archiveObject = null;
        sessionStorage.setItem("archiveObject", null);
        const data = {
          pageNum: 1,
          pageSize: this.pageSize,
          archiveFileNumber: '',
          archiveId: null
        };
        this.search(data);
      },
      exportOneArchiveFileList() {
        const data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          archiveFileNumber: this.archiveFileNumber,
          archiveId: this.archiveObject ? this.archiveObject.id : null
        };
        this.exportArchiveFileList(data);
      },
      exportAllArchiveFileList() {
        const data = {
          pageNum: null,
          pageSize: null,
          archiveFileNumber: this.archiveFileNumber,
          archiveId: this.archiveObject ? this.archiveObject.id : null
        };
        this.exportArchiveFileList(data);
      },
      exportAllArchiveAllFileList() {
        const data = {
          pageNum: null,
          pageSize: null,
          archiveFileNumber: '',
          archiveId: null
        };
        this.exportArchiveFileList(data);
      },
      exportArchiveFileList(data) {
        this.loading = true;
        axios.post(baseUrl + '/exportExcel/archiveFileList', null, {
          headers: {
            "token": Cookies.get("token")
          },
          data: data,
          responseType: 'blob'      //告诉服务器我们需要的响应格式
        })
          .then(res => {
            let a = document.createElement("a");
            let blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型
            });
            a.href = URL.createObjectURL(blob);  //生成一个url
            a.download = "案卷文件列表" + Date.now() + ".xlsx";
            a.click();
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
            this.loading = false;
          });
      },
      paramSearch() {
        const data = {
          pageNum: 1,
          pageSize: this.pageSize,
          archiveFileNumber: this.archiveFileNumber,
          archiveId: null,
        };
        this.search(data);
      },
    },
    created() {
      // this.loading = true;
      if (typeof (this.$route.params.archiveObject) !== "undefined" && this.$route.params.archiveObject) {
        sessionStorage.setItem("archiveObject", JSON.stringify(this.$route.params.archiveObject));
      }
      if (JSON.parse(sessionStorage.getItem("archiveObject"))) {
        this.archiveObject = JSON.parse(sessionStorage.getItem("archiveObject"));
      }
      const data = {
        pageNum: 1,
        pageSize: this.pageSize,
        archiveFileNumber: '',
        archiveId: this.archiveObject ? this.archiveObject.id : null
      };
      this.$api.getlist.selectArchiveFiles(data)
        .then((response) => {
          if (response.code === 200) {
            if (response.data.content[0].archiveFileList.length !== 0) {
              for (const i in response.data.content[0].archiveFileList) {
                if (response.data.content[0].archiveFileList[i].name !== null && response.data.content[0].archiveFileList[i].name !== "") {
                  response.data.content[0].archiveFileList[i].name = this.decrypt(response.data.content[0].archiveFileList[i].name);
                }
                if (response.data.content[0].archiveFileList[i].idcard !== null && response.data.content[0].archiveFileList[i].idcard !== "") {
                  response.data.content[0].archiveFileList[i].idcard = this.decrypt(response.data.content[0].archiveFileList[i].idcard);
                }
                if (response.data.content[0].archiveFileList[i].title !== null && response.data.content[0].archiveFileList[i].title !== "") {
                  response.data.content[0].archiveFileList[i].title = this.decrypt(response.data.content[0].archiveFileList[i].title);
                }
              }
              this.tableData = response.data.content[0].archiveFileList;
              this.totals = response.data.totalSize;
            } else {
              this.archiveObject = null;
              this.tableData = null;
              this.totals = response.data.totalSize;
            }
          }
        })
        .catch((response) => {
        });
      this.loading = false;
    }
  }
</script>
<style scoped>
  .pone {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .picPopover {
    float: left;
    margin-left: 20px;
  }

  .fileButton {
    width: 10%;
    margin-top: 10px;
  }

  .masks {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200
  }

  .files-of-archive {
    height: 100%;
    overflow-y: scroll;
  }

  .op {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /*margin-top: 10px;*/
  }

  .archiveNumber {
    /*width: 250px;*/
    margin-left: 20px;
  }

  .archiveFileNumber {
    width: 200px;
    /*margin-left: 20px;*/
  }
</style>
