 <template>
<div>
  <h2 class="imtil">基础信息</h2>
<div class="wrap">

  <el-form :inline="true"  label-width="110px" :model="form" class="forme">
    <el-form-item label="姓名">
    <el-input v-model="form.name" readonly></el-input>
  </el-form-item>
   <el-form-item label="性别">
    <el-input v-model="form.sex" readonly></el-input>
  </el-form-item>
  <el-form-item label="民族">
    <el-input v-model="form.nation" readonly></el-input>
  </el-form-item>
  <el-form-item label="个人累计津贴">
    <el-input v-model="form.benefits" readonly></el-input>
  </el-form-item>
  <el-form-item label="领取方式">
    <el-input v-model="form.apply_way" readonly></el-input>
  </el-form-item>
  <el-form-item label="个人账户">
    <el-input v-model="form.mon_annuityPre" readonly></el-input>
  </el-form-item>
  <el-form-item label="个人累计缴费">
    <el-input v-model="form.payTotalMoney" readonly></el-input>
  </el-form-item>
  <el-form-item label="户籍性质">
    <el-input v-model="form.nation_type" readonly></el-input>
  </el-form-item>
  <el-form-item label="身份证号">
    <el-input v-model="form.identity_number" readonly></el-input>
  </el-form-item>
  <el-form-item label="户籍性质">
    <el-input v-model="form.nation_type" readonly></el-input>
  </el-form-item>
   <el-form-item label="户籍所在地">
    <el-input v-model="address" readonly></el-input>
  </el-form-item>


  <el-form-item label="利息">
    <el-input v-model="form.interest" readonly></el-input>
  </el-form-item>
  <el-form-item label="月领取养老金">
    <el-input v-model="form.mon_annuity" readonly></el-input>
  </el-form-item>
  <el-form-item label="国家基础养老金">
    <el-input v-model="form.mon_annuityGov" readonly></el-input>
  </el-form-item>
</el-form>
  <h2 class="imtil">待遇领取信息</h2>
  <div class="wrap">
    <div class="masks"></div>
    <el-form ref="form" :model="form" class="forml" label-width="auto">
      <el-form-item label="领取方式">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="集体补助">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="利息">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" class="formr" label-width="auto">
      <el-form-item label="个人缴费">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="财政补贴">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="个人账户积累额">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
    </el-form>
  </div>
<div class="headImg">
 <div style="text-align:center;padding:9px;border-bottom:1px solid #EFF0F2;font-size:14px">领取人照片</div>
 <div class="headCon">
<img :src="form.personPhoto" alt="">
</div>
</div>
</div>
<h2 class="imtil">附件</h2>
<div class="imgcon">
<div class="demo-image__placeholder">
  <div class="block">
    <p class="demonstration">银行卡</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';

export default {
    data(){
        return{
            address:"",
            form:{

        },
          urls: [

        ],
        show:""
        }

    },
    methods:{
      //审核通过
      pass(){
         this.$confirm('是否审核通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

        }).then(() => {
           Loading.service();
           var data={
               recordId: sessionStorage.getItem("recordId"),
                examineState:1,
               remark:"",
               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:"信息审核"
          })
          }else{
             this.$message({
            type: 'info',
            message: res.message
          });
          }

        }).catch((res) => {
                let loadingInstance = Loading.service();
            that.$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: sessionStorage.getItem("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
          });
          }

        }).catch((res) => {
                let loadingInstance = Loading.service();
            that.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
               this.$message({
            type: 'info',
            message: '操作失败!'+res
          });
        });

          }else{
              let loadingInstance = Loading.service();
            that.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
          that.$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(){
      this.show=this.$route.params.show
      if(this.$route.params.info){
      sessionStorage.setItem("info",this.$route.params.info)
      }

      if(this.$route.params.info){
        var a=JSON.stringify(this.$route.params)
      sessionStorage.setItem("items",a)
      }
       this.form =JSON.parse(sessionStorage.getItem("info"))
     this.address=this.form.townName+this.form.villageName+this.form.groupName
        this.form.name=this.decrypt(this.form.name)
        this.form.identity_number=this.decrypt(this.form.identity_number)
        this.form.telphoneValue=this.decrypt(this.form.telphoneValue)
        var obj=JSON.parse(sessionStorage.getItem("items"))
        this.form.personPhoto="http://socialsecurity.oss-cn-beijing.aliyuncs.com/"+obj.specialPhotoPic
        this.urls.push("http://socialsecurity.oss-cn-beijing.aliyuncs.com/"+obj.bankpic)


        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)

      console.log(this.form)
         this.form.sex=  this.form.sex==1?"男":"女"
    }
}
</script>
<style>
.wrap{
  overflow: hidden;
  position: relative;
}
.forme{
    text-align: left;
    width: 80%;
    float: left;
}
.headImg{
    float: left;
    width: 17%;
    max-width: 200px;
    max-height: 100px;
    border: 1px solid lightgray;
}
/* .headCon{

} */
.block{
  width: 23%
}
.headImg img{
    width: 100%
}
.masks{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200
}

.forml {
  float: left;
  width: 45%
}

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

.imgcon{
  margin: 0 auto;
  box-shadow: 0 0 15px lightgray;
  overflow: hidden;
  margin-bottom: 40px
}
.block{
  float: left;
  height: 100%;
  margin-right: 20px
}
/*.block img{*/
/*  width: auto;*/
/*  height: 300px;*/
/*}*/
.imtil{
  padding:0 0 20px 0
}
.forme .el-form-item label:after {
        content: " ";
        display: inline-block;
        width: 100%;
    }

    .forme .el-form-item__label {
        text-align: justify
    }
    /* 这里去除必选字段的*,这个符号会造成一定影响,去掉之后我用了li列表进行定位,在前面加上" * ". */

</style>
