<template>
  <div>
    <h2 class="imtil">基础信息</h2>
    <div class="wrap">
      <div v-if="!this.show" class="masks"></div>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="被终止人姓名姓名">
          <el-input v-model="form4.name"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="form4.birth_day"></el-input>
        </el-form-item>
        <el-form-item label="人员类型">
          <el-input v-model="form4.per_type"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="性别">
          <el-input v-model="form4.sex"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form4.identity_number"></el-input>
        </el-form-item>
        <el-form-item label="户籍地址">
          <el-input v-model="form4.address"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <h2 class="imtil">参保注销信息</h2>
    <div class="wrap">
      <div v-if="!this.show" class="masks"></div>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="终止原因">
          <el-input v-model="form4.cancel_res"></el-input>
        </el-form-item>
        <el-form-item label="死亡时间">
          <el-input v-model="form4.death_day"></el-input>
        </el-form-item>
        <el-form-item label="停发时间">
          <el-input v-model="form4.stop_time"></el-input>
        </el-form-item>
        <el-form-item label="重复地区及险种">
          <el-input v-model="form4.repet_type"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="户籍迁往地区">
          <el-input v-model="form4.addres_new"></el-input>
        </el-form-item>
        <el-form-item label="丧葬形式">
          <el-input v-model="form4.bad_type"></el-input>
        </el-form-item>
        <el-form-item label="停发的追回金额">
          <el-input v-model="form4.reback_money"></el-input>
        </el-form-item>
        <el-form-item label="重复地区及险种的追回金额">
          <el-input v-if="this.show" placeholder="如有金额请输入"></el-input>
          <el-input v-if="!this.show"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <h2 class="imtil">个人账户终止结算信息</h2>
    <div class="wrap">
      <div v-if="!this.show" class="masks"></div>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="个人账户余额">
          <el-input v-model="form4.account_balance"></el-input>
        </el-form-item>
        <el-form-item label="丧葬费">
          <el-input v-model="form4.bad_subsidy"></el-input>
        </el-form-item>
        <el-form-item label="应抵扣重复领取其他社会保险待遇">
          <el-input v-model="form4.other_overApply"></el-input>
        </el-form-item>
        <el-form-item label="发放账户类型">
          <el-input v-model="form4.provide_account"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="一次性抚恤金">
          <el-input v-model="form4.once_pension"></el-input>
        </el-form-item>
        <el-form-item label="应抵扣死亡超期领取待遇">
          <el-input v-model="form4.death_overspend"></el-input>
        </el-form-item>
        <el-form-item label="合计发放金额">
          <el-input v-model="form4.account_totle"></el-input>
        </el-form-item>
        <el-form-item label="发放账户的账号">
          <el-input v-model="form4.bankAccount"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <h2 class="imtil">指定受益人或法定继承人</h2>
    <div class="wrap">
      <div v-if="!this.show" class="masks"></div>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="姓名">
          <el-input v-model="form4.bailor_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form4.bailor_tel"></el-input>
        </el-form-item>
        <el-form-item label="与终止人关系">
          <el-input v-model="form4.relation"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form4" :model="form4" class="form4" label-width="auto">
        <el-form-item label="性别">
          <el-input v-model="form4.bailor_sex"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form4.bailor_idNo"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <h2 class="imtil">附件</h2>
    <div class="imgcon">
      <div class="demo-image__placeholder">
        <div v-show="bb" class="block">
          <p class="demonstration">{{itmebs}}</p>
          <el-image :src="urls[0]"></el-image>
        </div>
        <div class="block">
          <p class="demonstration">签名</p>
          <el-image :src="urls[1]">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="block">
          <p class="demonstration">身份证正面</p>
          <el-image :src="urls[2]">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="block">
          <p class="demonstration">身份证反面</p>
          <el-image :src="urls[3]">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <div style="text-align:center;margin-bottom:40px" v-show="show">
      <el-button type="success" @click="pass"><i class="el-icon-circle-check"></i>审核通过</el-button>
      <el-button type="danger" @click="nopass"><i class="el-icon-circle-close"></i>审核不通过</el-button>
    </div>
  </div>
</template>
<script>
  import CryptoJS from 'crypto-js'

  import {Loading} from 'element-ui';
  import {formatDate} from "@/utils/datetime";

  export default {
    data() {
      return {
        test: "sadgsdg",
        itmebs: "",
        bb: false,
        form4: {
          account_balance: "",
          account_totle: "",
          addres_new: "",
          bad_subsidy: "",
          bad_type: "",
          bailor_idNo: "",
          bailor_idPhoto: "",
          bailor_name: "",
          bailor_sex: "",
          bailor_tel: "",
          bank_photo: "",
          book_photo: "",
          cancel_res: "",
          death_day: "",
          death_overspend: "",
          groupName: "",
          hospital_photo: "",
          idBackPic: "",
          idFortPic: "",
          identity_number: "",
          name: "",
          nation: "",
          nation_type: "",
          once_pension: "",
          other_SocialPhoto: "",
          other_overApply: "",
          per_type: "",
          provide_account: "",
          reback_money: "",
          recordType: "",
          relation: "",
          relation_photo: "",
          repet_type: "",
          sex: "",
          sign_photo: "",
          stop_time: "",
          telphoneValue: "",
          townName: "",
          villageName: "",
          wuserId: "",
          address: "",
          birth_day: "",
          bankAccount: "",
        },
        urls: [],
        show: ""
      }
    },
    methods: {
      //审核通过
      pass() {
        this.$confirm('是否审核通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          Loading.service();
          var data = {
            recordId: this.$route.params.insCan.recordId,
            examineState: 1,
            remark: "",
            userId: 1,
            // InsuredCancelEntity: this.form4,
          };
          this.$api.getlist.shenhe(data).then((res) => {
            let loadingInstance = Loading.service();
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: res.data
              });
              this.$router.push({
                name: "参保注销审核"
              });
              this.$router.back();
              // 关闭当前标签
              let closeAll = document.querySelectorAll(".el-icon-close");
              for (let j = 0, len = closeAll.length; j < len; j++) {
                if (closeAll[j].previousSibling != null && closeAll[j].previousSibling.innerText === "参保注销审核 ") {
                  closeAll[j].click();
                  return;
                }
              }
            } else {
              this.$message({
                type: 'info',
                message: res.message
              });
            }
          }).catch((res) => {
            let loadingInstance = Loading.service();
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
            this.$message({
              type: 'info',
              message: '操作失败!' + res
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      //审核不通过
      nopass() {
        // var that = this
        this.$prompt('请输入原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          if (value) {
            Loading.service();
            var data = {
              recordId: this.$route.params.insCan.recordId,
              examineState: 2,
              remark: value,
              userId: 1
            };
            this.$api.getlist.shenhe(data).then((res) => {
              let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
              });
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.data
                });
                // this.$router.push({
                //   name:"Xxsh"
                // })
              } else {
                this.$message({
                  type: 'info',
                  message: res.message
                });
              }
              this.$router.back();
              // 关闭当前标签
              let closeAll = document.querySelectorAll(".el-icon-close");
              for (let j = 0, len = closeAll.length; j < len; j++) {
                if (closeAll[j].previousSibling != null && closeAll[j].previousSibling.innerText === "参保注销审核 ") {
                  closeAll[j].click();
                  return;
                }
              }
            }).catch((res) => {
              let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
              });
              this.$message({
                type: 'info',
                message: '操作失败!' + res
              });
            });
          } else {
            let loadingInstance = Loading.service();
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
            this.$message({
              type: 'info',
              message: '请输入原因'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消输入'
          });
        });
      },
      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);
      },
    },
    created() {
      if (typeof (this.$route.params.insCan) !== "undefined" && this.$route.params.insCan.info) {
        this.show = this.$route.params.insCan.show;
        sessionStorage.setItem("insCanInfo", this.$route.params.insCan.info);
        sessionStorage.setItem("insCanItems", JSON.stringify(this.$route.params.insCan));
      }
      let obj = JSON.parse(sessionStorage.getItem("insCanItems"));
      this.form4 = JSON.parse(sessionStorage.getItem("insCanInfo"));
      this.form4.name = this.form4.name ? this.decrypt(this.form4.name) : obj.name;
      this.form4.identity_number = this.form4.identity_number ? this.decrypt(this.form4.identity_number) : "";
      if (obj.bankpic) {
        this.bb = true;
        this.itmebs = "银行卡";
        this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.bankpic);
      } else if (obj.bookPic) {
        this.bb = true;
        this.itmebs = "户口本";
        this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.bookPic);
      } else if (obj.specialPhotoPic) {
        this.bb = true;
        this.itmebs = "特殊身份证明";
        this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.specialPhotoPic);
      } else {
        this.itmebs = "";
        this.urls.push("");
      }
      this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.signpic);
      this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.idcardfrontpic);
      this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/" + obj.idcardbackpic);
      this.form4.sex = this.form4.sex === 1 ? "男" : "女";
      this.form4.bailor_sex = this.form4.bailor_sex === 1 ? "男" : "女";
      if (this.form4.birth_day) {
        this.form4.birth_day = formatDate(this.form4.birth_day.time);
      }
    },
  }
</script>
<style>
  .wrap {
    overflow: hidden;
    position: relative;
  }

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

  .form4 {
    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%;
    float: left;
    height: 100%;
    margin-right: 20px;
  }

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