<template>
<div>
  <div class="op">
  <div class="idc">
  <el-input v-model="idcard" size="mini" placeholder="请输入身份证号"></el-input>
</div>
 <div class="ywtyoe">
 <el-select v-model="ywtype" placeholder="请选择业务类型" size="mini">
   <el-option
  v-for="item in options1"
  :key="item.value"
  :label="item.label"
  :value="item.value">
</el-option>
   </el-select>
</div>
 <el-button type="primary" size="mini" style="background:#148A9B;margin-left:10px" icon="el-icon-search" @click="serch">搜索</el-button>
</div>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="idcard"
      label="身份证号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="recordtype"
      label="业务类型">
    </el-table-column>
     <el-table-column
      prop="createtime"
      label="创建时间">
    </el-table-column>
     <el-table-column
      prop="townname"
      label="镇">
    </el-table-column>
     <el-table-column
      prop="villagename"
      label="村">
    </el-table-column>
     <el-table-column
      prop="nowExamine"
      label="当前状态">
    </el-table-column>
    
     <el-table-column 
      width="180"
     label="操作">
      <template slot-scope="scope">
        <el-button
        type="primary"
          size="mini"
          icon="el-icon-s-check"
          @click="handle(scope.$index, scope.row)">审核</el-button>
          <el-popover
          placement="right"
          width="180"
          trigger="click">
            <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :timestamp="activity.timestamp"
      :timestamp2="123">
      {{activity.content}}
      <p style="font-size:13px;color:#909399" v-show="activity.timestamp">审核人:{{activity.name}}</p>
      <p style="font-size:13px;color:#909399" v-show="activity.examineRemark">原因:{{activity.examineRemark}}</p>
    </el-timeline-item>
  </el-timeline>
        <el-button
        @click="progress(scope.$index, scope.row)"
          size="mini"
          slot="reference"
           type="success"
         >流程</el-button>
          </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  	class="pone"
      :page-size='10'
      layout="total, prev, pager, next, jumper"
      :total="totals"
      :current-page.sync="Page"
      @current-change="current_change"
>

    </el-pagination>
  </div>
</template>

<style>
.op{
  display: flex;
  align-items: center;
 
}
  .idc{
  
    width: 200px
  }
  .ywtyoe{
    width: 200px;
    margin-left: 20px
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .pone{
    margin-top: 40px
  }
</style>

<script>
 import CryptoJS from 'crypto-js'
 import { Loading } from 'element-ui';
// import baseUrl from "../../globe/globeUrl"
  export default {
       data() {
      return {
       activities: [],
      options1: [{
      value: '1',
      label: '参保登记'
    }, {
      value: '2',
      label: '信息变更'
    }, {
      value: '3',
      label: '待遇申请'
    }],
        Page:1,
        totals:0,
        idcard:"",
        ywtype:"",
        info:'',
        ywtype:'',
        tableData: []
      }
    },
    methods: {
      //搜索
      serch(){
     
        var data={
          idcard:this.idcard?this.Encrypt(this.idcard):"",
          recordType:this.ywtype?parseInt(this.ywtype):""
          
        }
      this.$api.getlist.getlist(data).then((res) => {
            for(var i in res.data.list){
            res.data.list[i].idcard=this.decrypt(res.data.list[i].idcard)
            res.data.list[i].name=this.decrypt(res.data.list[i].name)
            var d=new Date(res.data.list[i].createtime)
            var mon=(parseInt(d.getMonth()) + 1)
            res.data.list[i].createtime=d.getFullYear()+"-"+mon+"-"+d.getDate()+" "+d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
            res.data.list[i].recordtype=res.data.list[i].recordtype==1?"参保登记":res.data.list[i].recordtype==2?"信息变更":res.data.list[i].recordtype==3?"待遇申请":res.data.list[i].recordtype==4?"参保注销":""
          }
               this.tableData=res.data.list
                this.totals=res.data.total
                this.page=res.data.total.pageNum
        
        }).catch((res) => {
          
        });
      },
      //流程
      progress(d,s){
        console.log(s)
        this.activities=[]
        var data={
          recordId:s.id,
          type:s.recordtype=="参保登记"?1:s.recordtype=="信息变更"?2:s.recordtype=="待遇申请"?3:s.recordtype=="参保注销"?4:''
        }
        this.$api.getlist.progress(data).then((res)=>{
            for(var i in res.data){
              if(res.data[i].examineState=="进行中"){
                 this.activities.push({
                content:res.data[i].role,
                //timestamp:res.data[i].examinePerson+"审核于"+res.data[i].examineTime,
                color:'#0bbd87',
                size: 'large'
              })
              }else{
                
              this.activities.push({
                content:res.data[i].role,
                timestamp:res.data[i].examinePerson?res.data[i].examineTime:"",
                name:res.data[i].examinePerson?res.data[i].examinePerson:"",
                examineRemark:res.data[i].examineRemark?res.data[i].examineRemark:'',
                color:res.data[i].nowNode?"#97E5CE":"lightgray"
              })
               if(res.data[i].examineState=="审核失败"){
                 this.activities.push({
                content:"审核失败",
                timestamp:res.data[i].examinePerson?res.data[i].examineTime:"",
                name:res.data[i].examinePerson?res.data[i].examinePerson:"",
                examineRemark:res.data[i].examineRemark?res.data[i].examineRemark:'',
                color:'black'
              })
                return
              }
            }
            }
        }).catch((res)=>{

        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      current_change(ss){
        var data={
          pageNum:ss,
          pageSize:10,
          idcard:this.idcard,
          type:this.ywtype
        }
         Loading.service();
         this.$api.getlist.getlist(data).then((res) => {
           let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
            for(var i in res.data.list){
            res.data.list[i].idcard=this.decrypt(res.data.list[i].idcard)
            res.data.list[i].name=this.decrypt(res.data.list[i].name)
            var d=new Date(res.data.list[i].createtime)
            res.data.list[i].createtime=d.getFullYear()+"-"+d.getMonth() + 1+"-"+d.getDate()+d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
            res.data.list[i].recordtype=res.data.list[i].recordtype==1?"参保登记":res.data.list[i].recordtype==2?"信息变更":''
          }
               this.tableData=res.data.list
                this.totals=res.data.total
                this.page=res.data.total.pageNum
        
        }).catch((res) => {
          let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
        });
      },
      //审核
       handle(s,d){
        if(d.recordtype=="参保登记"){
         sessionStorage.setItem("recordId",this.tableData[s].recordId)
          this.$router.push({
            name:"参保登记审核",
            params:{info:this.tableData[s].info,
            bankpic:this.tableData[s].bankpic,
            idcardbackpic:this.tableData[s].idcardbackpic,
            idcardfrontpic:this.tableData[s].idcardfrontpic,
            signpic:this.tableData[s].signpic,
            
            show:true
            }
          })
          }else if(d.recordtype=="信息变更"){
            sessionStorage.setItem("recordId",this.tableData[s].recordId)
          this.$router.push({
            name:"信息变更审核",
            params:{info:this.tableData[s].info,
            bankpic:this.tableData[s].bankpic,
            idcardbackpic:this.tableData[s].idcardbackpic,
            idcardfrontpic:this.tableData[s].idcardfrontpic,
            signpic:this.tableData[s].signpic,
            specialPhotoPic:this.tableData[s].specialPhotoPic,
            bookPic:this.tableData[s].bookPic,
            show:true
            }
          })
          }
        },
        handleDelete(g,h){
            console.log(g)
            console.log(h)
        },
        Encrypt(word) { //aes加密
				var key = CryptoJS.enc.Utf8.parse("KkweInfo23255625");
				let srcs = CryptoJS.enc.Utf8.parse(word);
				let encrypted = CryptoJS.AES.encrypt(srcs, key, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});
				return encrypted.toString();
			},
         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(){
        Loading.service();
        var data={
          idcard:'',
          recordType:''
          
        }
         this.$api.getlist.getlist(data).then((res) => {
           let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
            for(var i in res.data.list){
            res.data.list[i].idcard=this.decrypt(res.data.list[i].idcard)
            res.data.list[i].name=this.decrypt(res.data.list[i].name)
            var d=new Date(res.data.list[i].createtime)
            var mon=(parseInt(d.getMonth()) + 1)
            res.data.list[i].createtime=d.getFullYear()+"-"+mon+"-"+d.getDate()+" "+d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
             res.data.list[i].recordtype=res.data.list[i].recordtype==1?"参保登记":res.data.list[i].recordtype==2?"信息变更":res.data.list[i].recordtype==3?"待遇申请":res.data.list[i].recordtype==4?"参保注销":""
          }
               this.tableData=res.data.list
                this.totals=res.data.total
                this.page=res.data.total.pageNum
        
        }).catch((res) => {
          let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
        });
    //   var that=this
    //     baseUrl.setToken()
    //      $.ajax({
    //      url:baseUrl.baseUrl+"examine/listExamining",
    //      type:'post',
    //      data:{
    //        userId:1
    //      },
    //     success(res){
    //       for(var i in res.data.list){
    //         res.data.list[i].idcard=that.decrypt(res.data.list[i].idcard)
    //         res.data.list[i].name=that.decrypt(res.data.list[i].name)
    //         res.data.list[i].recordtype=res.data.list[i].recordtype==1?"参保登记":""
    //       }
    //      that.tableData=res.data.list
    //     that.totals=res.data.total
    //     that.page=res.data.total.pageNum
       
          
    //     }
    //   })
    }
  }
</script>
