<template>
  <div>
    <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"
        label="档案类别"
        :formatter="getArchiveType"
        width="250">
      </el-table-column>
      <el-table-column
        align="center"
        label="全宗号"
        :formatter="getArchiveVolumeNumber"
        width="70">
      </el-table-column>
      <el-table-column
        align="center"
        label="档号"
        :formatter="getArchiveNumber"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        label="年度"
        :formatter="getArchiveYear"
        width="70">
      </el-table-column>
      <el-table-column
        align="center"
        label="保管期限"
        :formatter="getArchiveRetentionPeriod"
        width="60">
      </el-table-column>
      <el-table-column
        align="center"
        label="机构(问题)"
        :formatter="getArchiveInstitution"
        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"
        label="责任者"
        :formatter="getArchiveResponsiblePerson"
        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"
        label="档案类别"
        :formatter="getArchiveFileType"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        label="二级类目"
        :formatter="getArchiveSecondaryCategory"
        width="250">
      </el-table-column>
      <el-table-column
        align="center"
        label="类别代码"
        :formatter="getArchiveCategoryType"
        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"
        label="业务类别"
        :formatter="getArchiveBusinessType"
        width="200">
      </el-table-column>
      <el-table-column
        align="center"
        label="案卷号"
        :formatter="getArchiveFileNumber"
        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="fileEventLogs">
      导出文件列表
    </el-button>
    <el-pagination
      class="pone"
      :page-size='pageSize'
      :page-sizes="[10, 30, 50]"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      :current-page.sync="pageNum"
      @current-change="current_change">
    </el-pagination>
  </div>
</template>
<script>
  import CryptoJS from 'crypto-js'

  import {Loading} from 'element-ui';

  export default {
    data() {
      return {
        archiveObject: {},
        tableData: [],
        loading: false,
        totals: 0,
        pageNum: 1,
        pageSize: 10,
        indexStart: 1,
      }
    },
    methods: {
      current_change(pageNum) {
        this.pageNum = pageNum;
        this.indexStart = (pageNum - 1) * this.pageSize + 1;
        const data = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          archiveId: this.archiveObject.id
        };
        this.search(data);
      },
      search(data) {
        this.loading = true;
        this.$api.getlist.selectArchiveFiles(data)
          .then((response) => {
            if (response.code === 200) {
              for (const i in response.data.content) {
                // if (response.data.content[i].name !== null && response.data.content[i].name !== "") {
                //   response.data.content[i].name = this.decrypt(response.data.content[i].name);
                // }
                // if (response.data.content[i].idcard !== null && response.data.content[i].idcard !== "") {
                //   response.data.content[i].idcard = this.decrypt(response.data.content[i].idcard);
                // }
              }
              this.tableData = response.data.content;
              this.totals = response.data.totalSize;
            }
          })
          .catch((response) => {
          });
        this.loading = false;
      },
      handleSizeChange(pageSize) {
        this.pageNum = 1;
        this.pageSize = pageSize;
        this.indexStart = 1;
        const data = {
          pageNum: 1,
          pageSize: pageSize,
          archiveId: this.archiveObject.id
        };
        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);
      },
      getArchiveType() {
        return this.archiveObject.type;
      },
      getArchiveVolumeNumber() {
        return this.archiveObject.volumeNumber;
      },
      getArchiveNumber() {
        return this.archiveObject.number;
      },
      getArchiveYear() {
        return this.archiveObject.year;
      },
      getArchiveRetentionPeriod() {
        return this.archiveObject.retentionPeriod;
      },
      getArchiveInstitution() {
        return this.archiveObject.institution;
      },
      getArchiveResponsiblePerson() {
        return this.archiveObject.responsiblePerson;
      },
      getArchiveFileType() {
        return this.archiveObject.fileType;
      },
      getArchiveSecondaryCategory() {
        return this.archiveObject.secondaryCategory;
      },
      getArchiveCategoryType() {
        return this.archiveObject.categoryType;
      },
      getArchiveBusinessType() {
        return this.archiveObject.businessType;
      },
      getArchiveFileNumber() {
        return this.archiveObject.fileNumber;
      },
    },
    created() {
      // this.loading = true;
      if (typeof (this.$route.params.archiveObject) !== "undefined" && this.$route.params.archiveObject) {
        sessionStorage.setItem("archiveObject", JSON.stringify(this.$route.params.archiveObject));
      }
      this.archiveObject = JSON.parse(sessionStorage.getItem("archiveObject"));
      const data = {
        pageNum: 1,
        pageSize: this.pageSize,
        archiveId: this.archiveObject.id
      };
      this.$api.getlist.selectArchiveFiles(data)
        .then((response) => {
          if (response.code === 200) {
            for (const i in response.data.content) {
              // if (response.data.content[i].name !== null && response.data.content[i].name !== "") {
              //   response.data.content[i].name = this.decrypt(response.data.content[i].name);
              // }
              // if (response.data.content[i].idcard !== null && response.data.content[i].idcard !== "") {
              //   response.data.content[i].idcard = this.decrypt(response.data.content[i].idcard);
              // }
            }
            this.tableData = response.data.content;
            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;
  }
  .wrap {
    overflow: hidden;
    position: relative;
  }

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

  .form {
    float: left;
    width: 45%;
    margin-left: 20px
  }

  .imgcon {
    margin: 0 auto;
    box-shadow: 0 0 15px lightgray;
    overflow: hidden;
    margin-bottom: 40px
  }

  .block {
    width: 23%
  }

  .block {
    float: left;
    height: 100%;
    margin-right: 20px
  }

  .imtil {
    padding: 0 0 20px 0
  }
</style>
