<template xmlns:v-popover="http://www.w3.org/1999/xhtml">
  <div class="no-archive-event-log">
    <el-backtop target=".no-archive-event-log" :right="70" :bottom="70"></el-backtop>
    <div>
      <el-alert
        v-if="!showSelection"
        align="left"
        title="请选择一个业务类型进行归档"
        type="warning"
        :closable="false"
        show-icon>
      </el-alert>
    </div>
    <div class="op">
      <div class="name">
        <el-input
          v-model="name"
          size="mini"
          placeholder="请输入姓名"
          clearable></el-input>
      </div>
      <div class="idcard">
        <el-input
          v-model="idcard"
          size="mini"
          placeholder="请输入身份证号"
          clearable></el-input>
      </div>
      <div class="ywtype">
        <el-cascader
          ref="businessType"
          size="mini"
          :options="options"
          :props="{ checkStrictly: true }"
          placeholder="请选择业务类型"
          clearable
          @change="handleChange">
        </el-cascader>
      </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="searchAllNoArchiveELog">
        查看所有未归档文件
      </el-button>
    </div>
    <div>
      <el-table
        v-loading.fullscreen.lock="loading"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :key="Math.random()">
        <el-table-column
          v-if="showSelection"
          align="center"
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          v-else
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"
          :index="indexStart">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eventType"
          label="业务类型"
          width="200"
          :formatter="getEventType">
        </el-table-column>
        <el-table-column
          align="center"
          prop="eventTimeStr"
          label="成文时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="desName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="desIdCard"
          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="附件"
          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
        v-if="showSelection"
        class="fileButton"
        type="primary"
        @click="fileEventLogs">
        归档案卷
      </el-button>
      <el-pagination
        class="pone"
        :page-size='pageSize'
        :page-sizes="[10, 50, 100]"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
        :current-page.sync="pageNum"
        @current-change="current_change">
      </el-pagination>
      <el-dialog title="收货地址" :visible.sync="fileDialog">
        <el-form label-position="right" label-width="80px">
          <el-form-item label="文件列表">
            <el-table v-if="fileDialog" :data="eventLogList" style="width: 100%">
              <el-table-column prop="desName" label="姓名" width="100"></el-table-column>
              <el-table-column prop="desIdCard" label="身份证" width="200"></el-table-column>
              <el-table-column prop="eventTimeStr" label="成文时间" width="200"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="案卷号">
            <el-input
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              v-model="fileNumber"
              style="float: left;width: 200px"
              placeholder="请输入案卷号"
              clearable
              size="mini"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFileDialog">取 消</el-button>
          <el-button type="primary" @click="confirmFileDialog">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import CryptoJS from 'crypto-js'

  export default {
    data() {
      return {
        name: '',
        idcard: '',
        ywtype: '',
        options: [{
          value: {
            eventType: 1,
            eventTypeDetail: null,
          },
          label: '参保登记',
        }, {
          value: 2,
          label: '信息变更',
          disabled: true,
          children: [{
            value: {
              eventType: 2,
              eventTypeDetail: 1,
            },
            label: '档次变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 2,
            },
            label: '银行卡变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 3,
            },
            label: '手机号变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 4,
            },
            label: '参保身份变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 5,
            },
            label: '户籍地址变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 6,
            },
            label: '姓名变更',
          }, {
            value: {
              eventType: 2,
              eventTypeDetail: 7,
            },
            label: '身份证变更',
          }]
        }, {
          value: {
            eventType: 3,
            eventTypeDetail: null,
          },
          label: '待遇申请',
        }, {
          value: {
            eventType: 4,
            eventTypeDetail: null,
          },
          label: '参保注销',
        }, {
          value: {
            eventType: 5,
            eventTypeDetail: null,
          },
          label: '补缴保费',
        }, {
          value: {
            eventType: 6,
            eventTypeDetail: null,
          },
          label: '升档改办',
        }, {
          value: {
            eventType: 7,
            eventTypeDetail: null,
          },
          label: '关系转移',
        }],
        archiveObject: {},
        tableData: [],
        loading: false,
        totals: 0,
        pageNum: 1,
        pageSize: 10,
        indexStart: 1,
        eventType: null,
        eventTypeDetail: null,
        showSelection: false,
        eventLogList: [],
        fileNumber: '',
        fileDialog: false,
      }
    },
    methods: {
      current_change(pageNum) {
        this.pageNum = pageNum;
        this.indexStart = (pageNum - 1) * this.pageSize + 1;
        const data = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          name: this.name,
          idcard: this.idcard,
          eventType: this.eventType,
          eventTypeDetail: this.eventTypeDetail,
        };
        this.search(data);
      },
      search(data) {
        this.loading = true;
        this.$api.getlist.selectNoArcEventLogList(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].desName = this.decrypt(response.data.content[i].name);
                }
                if (response.data.content[i].idcard !== null && response.data.content[i].idcard !== "") {
                  response.data.content[i].desIdCard = 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,
          name: this.name,
          idcard: this.idcard,
          eventType: this.eventType,
          eventTypeDetail: this.eventTypeDetail,
        };
        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);
      },
      getEventType(row, column, cellValue, index) {
        if (cellValue === 2) {
          return this.getInformationChangeType(row.eventTypeDetail)
        } else {
          return this.getType(cellValue);
        }
      },
      paramSearch() {
        this.eventLogList.length = 0;
        const data = {
          pageNum: 1,
          pageSize: this.pageSize,
          name: this.name,
          idcard: this.idcard,
          eventType: this.eventType,
          eventTypeDetail: this.eventTypeDetail,
        };
        this.search(data);
        this.showSelection = !!this.eventType;
      },
      getInformationChangeType(eventTypeDetail) {
        const eventType = "信息变更/";
        const eventDetail = eventTypeDetail === 1 ? "档次变更"
          : eventTypeDetail === 2 ? "银行卡变更"
            : eventTypeDetail === 3 ? "手机号变更"
              : eventTypeDetail === 4 ? "参保身份变更"
                : eventTypeDetail === 5 ? "户籍地址变更"
                  : eventTypeDetail === 6 ? "姓名变更"
                    : eventTypeDetail === 7 ? "身份证变更"
                      : "";
        return eventType + eventDetail;
      },
      handleChange(value) {
        this.eventType = null;
        this.eventTypeDetail = null;
        for (const i in value) {
          if (typeof (value[i].eventType) !== "undefined") {
            this.eventType = value[i].eventType;
            this.eventTypeDetail = value[i].eventTypeDetail;
            break;
          }
        }
      },
      handleSelectionChange(selection) {
        this.eventLogList = selection;
      },
      fileEventLogs() {
        if (this.eventLogList.length === 0) {
          this.$message({
            showClose: true,
            message: "请选择要归档的文件",
            type: 'error',
            duration: 3000
          });
          return;
        }
        this.fileDialog = true;
      },
      reload() {
        const data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          idcard: this.idcard,
          eventType: this.eventType,
          eventTypeDetail: this.eventTypeDetail,
        };
        this.search(data);
      },
      cancelFileDialog() {
        this.eventLogList.length = 0;
        this.fileNumber = null;
        this.fileDialog = false;
        this.$message({
          showClose: true,
          message: '取消归档',
          type: 'info',
          duration: 3000
        });
      },
      confirmFileDialog() {
        if (this.eventLogList.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择要归档的文件',
            type: 'error',
            duration: 3000
          });
          return;
        }
        if (this.fileNumber === null || this.fileNumber === '') {
          this.$message({
            showClose: true,
            message: '请输入案卷号',
            type: 'error',
            duration: 3000
          });
          return;
        }
        this.$confirm('该 ' + this.eventLogList.length + ' 件文件将归档为案卷号: ' + this.fileNumber + ' 的档案, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          const data = [{
            eventType: this.eventType,
            eventTypeDetail: this.eventTypeDetail,
            fileNumber: this.fileNumber,
            eventLogList: this.eventLogList,
          }];
          this.$api.getlist.fileArchives(data)
            .then((response) => {
              if (response.code === 200) {
                this.$message({
                  showClose: true,
                  message: response.data,
                  type: 'success',
                  duration: 10000
                });
              } else {
                this.$message({
                  showClose: true,
                  message: response.message,
                  type: 'error',
                  duration: 10000
                });
              }
              this.pageNum = 1;
              this.reload();
              this.fileDialog = false;
              this.eventLogList.length = 0;
              this.fileNumber = null;
              this.loading = false;
            })
            .catch((response) => {
              this.$message({
                showClose: true,
                message: response.message,
                type: 'error',
                duration: 10000
              });
              this.fileDialog = false;
              this.eventLogList.length = 0;
              this.fileNumber = null;
              this.loading = false;
            });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消归档',
            duration: 3000
          });
        });
      },
      searchAllNoArchiveELog() {
        this.eventLogList.length = 0;
        this.name = null;
        this.idcard = null;
        this.eventType = null;
        this.eventTypeDetail = null;
        let obj = {};
        obj.stopPropagation = () =>{};
        this.$refs.businessType.handleClear(obj);
        const data = {
          pageNum: 1,
          pageSize: this.pageSize,
          name: null,
          idcard: null,
          eventType: null,
          eventTypeDetail: null,
        };
        this.search(data);
        this.showSelection = !!this.eventType;
      },
    },
    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,
        name: null,
        idcard: null,
        eventType: null,
        eventTypeDetail: null,
      };
      this.$api.getlist.selectNoArcEventLogList(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].desName = this.decrypt(response.data.content[i].name);
              }
              if (response.data.content[i].idcard !== null && response.data.content[i].idcard !== "") {
                response.data.content[i].desIdCard = 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: 10px;
    margin-bottom: 20px;
  }

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

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

  .idcard {
    width: 200px;
    margin-left: 20px;
  }

  .name {
    width: 200px;
    /*margin-left: 20px;*/
  }

  .ywtype {
    width: 200px;
    margin-left: 20px;
  }

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

  .no-archive-event-log {
    height: 100%;
    overflow-y: scroll;
  }
</style>
