<template>
<div>
  <div class="op">
    <Candode v-on:childByValue="childByValue"></Candode>

    <div class="nam">
  <el-input v-model="name" size="mini" placeholder="请输入姓名"></el-input>
  </div>
  <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>
<div>
  <!-- <el-cascader
    size="mini"
    :options="list"
    :props="{ checkStrictly: true }"
    clearable></el-cascader> -->
</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%"
    stripe
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="idcard"
      label="身份证号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="recordtype"
      width="150"
      label="业务类型">
    </el-table-column>
     <el-table-column
      prop="createtime"
      width="200"
      label="创建时间">
    </el-table-column>
     <el-table-column
      prop="townname"
      width="150"
      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
  }
  .nam{
    margin-right: 20px
  }
  .ywtyoe{
    width: 200px;
    margin-left: 20px
  }
  .el-table .warning-row {
    background: oldlace;
  }

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

<script>
 import CryptoJS from 'crypto-js'
 import { Loading } from 'element-ui';
 import {listtown} from '../../utils/address'
 import Candode from "../Core/candode"

 // import baseUrl from "../../globe/globeUrl"
  export default {
    components:{
      Candode
    },
       data() {

      return {
        list:[],
         name:"",
       activities: [],
      options1: [],
        Page:1,
        totals:0,
        idcard:"",
        ywtype:"",
        info:'',
        tableData: [],
        townList:""
      }
    },
    methods: {
      childByValue(val){
        this.townList=val
      },
      //搜索
      serch(){

        var data={
          name:this.name?this.Encrypt(this.name):"",
          idcard:this.idcard?this.Encrypt(this.idcard):"",
          recordType:this.ywtype?parseInt(this.ywtype):"",
          townName: this.townList?this.townList[0]:'',
          villageName:this.townList?this.townList[1]:''

        }
      this.$api.getlist.record(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)
            res.data.list[i].recordtype=this.getType(res.data.list[i].recordtype)
          }
               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:this.regetType(s.recordtype)
        }
        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{


               if(res.data[i].examineState=="审核失败"){
                 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:'black'
              })
                return
              }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"
              })
              }
            }
            }
        }).catch((res)=>{

        })
      },
      tableRowClassName({row, rowIndex}) {
        // console.log(row)
        // if (row.recordtype ==="参保登记") {
        //   return 'warning-row';
        // } else if (row.recordtype === "信息变更") {
        //   return 'success-row';
        // }
        // return '';
      },
      current_change(ss){
        var data={
          pageNum:ss,
          pageSize:10,
          idcard:this.idcard,
          type:this.ywtype
        }
         Loading.service();
         this.$api.getlist.record(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)
            res.data.list[i].recordtype=this.getType(res.data.list[i].recordtype)
          }
               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:false
            }
          })
          }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:false
            }
          })
          }else if(d.recordtype=="待遇申请"){
             this.$router.push({
               name:"待遇申请审核",
               params:{
                 treApp: {
                   name: this.tableData[s].name,
                   recordId: this.tableData[s].recordId,
                   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:false
                 }
               }
             })
           } else if(d.recordtype === "参保注销") {
             // sessionStorage.setItem("recordId",this.tableData[s].recordId)
             this.$router.push({
               name:"参保注销审核",
               params:{
                 insCan: {
                   name: this.tableData[s].name,
                   recordId: this.tableData[s].recordId,
                   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:false
                 }
               }
             })
           } else if(d.recordtype === "补缴保费") {
             // sessionStorage.setItem("recordId",this.tableData[s].recordId)
             this.$router.push({
               name:"补缴保费审核",
               params:{
                 supPay: {
                   name: this.tableData[s].name,
                   recordId: this.tableData[s].recordId,
                   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:false
                 }
               }
             })
           } else if(d.recordtype === "升档改办") {
             // sessionStorage.setItem("recordId",this.tableData[s].recordId)
             this.$router.push({
               name:"升档改办审核",
               params:{
                 upgReo: {
                   name: this.tableData[s].name,
                   recordId: this.tableData[s].recordId,
                   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:false
                 }
               }
             })
           } else if(d.recordtype === "关系转移") {
             // sessionStorage.setItem("recordId",this.tableData[s].recordId)
             this.$router.push({
               name:"关系转移审核",
               params:{
                 traRel: {
                   name: this.tableData[s].name,
                   recordId: this.tableData[s].recordId,
                   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:false
                 }
               }
             })
           }
        },
        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(){
      for(var i=1;i<=7;i++){
        this.options1.push({
          label:this.getType(i),
          value:i
        })
      }
      for(var i in listtown){
    this.list.push({
        value:listtown[i].town_name,
        label:listtown[i].town_name,
        children:[]
    })
    for(var j in listtown[i].chirld){
        this.list[i].children.push({
            value: listtown[i].chirld[j].village_name,
            label: listtown[i].chirld[j].village_name
        })
    }
}
     console.log(this.list)
        Loading.service();
        var data={
          idcard:'',
          recordType:''

        }
         this.$api.getlist.record(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)
            res.data.list[i].recordtype=this.getType(res.data.list[i].recordtype)
          }
               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>
