<template>
<div>
  <div class="op">
  
 
<div class="add" style="margin-left:0">
   <el-select clearable size="mini" @change="handleChange" v-model="town" placeholder="请选择乡/镇">
    <el-option
      v-for="item in list"
      :key="item.town_id"
      :label="item.town_name"
      :value="item.town_id+','+item.town_name">
    </el-option>
  </el-select>
  </div>
  <div class="add">
  <el-select size="mini" clearable @change="torz" v-model="village" placeholder="请选择村">
    <el-option
      v-for="item2 in list2"
      :key="item2.village_id"
      :label="item2.village_name"
      :value="item2.village_id+','+item2.village_name">
    </el-option>
  </el-select>
</div>
<div class="nam">
  <el-input v-model="name" clearable size="mini" placeholder="请输入姓名"></el-input>
</div>
  <div class="idc">
  <el-input v-model="idcard" size="mini" clearable placeholder="请输入身份证号"></el-input>
</div>
 <div class="add">
  <el-select size="mini" @change="torz" clearable  v-model="state" placeholder="所有状态">
    <el-option
      v-for="item3 in stateList"
      :key="item3.value"
      :label="item3.label"
      :value="item3.value">
    </el-option>
  </el-select>
</div>
<div class="add">
    <el-date-picker
      v-model="time"
      size='mini'
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  
</div>
 
</div>
<div class="op" style="margin-top:10px">
   <div class="add"  style="margin-left:0">
  <el-select size="mini" @change="torz" clearable  v-model="cblx" placeholder="参保类型">
    <el-option
      v-for="item6 in cblxList"
      :key="item6.value"
      :label="item6.label"
      :value="item6.value">
    </el-option>
  </el-select>
</div>
<div class="add">
    <el-select size="mini" @change="torz" clearable v-model="age" placeholder="选择年龄">
    <el-option
      v-for="item4 in ageList"
      :key="item4.value"
      :label="item4.label"
      :value="item4.value">
    </el-option>
  </el-select>
</div>
<div class="add">
    <el-select size="mini" @change="torz" clearable v-model="agemeth" placeholder="年龄计算方式">
    <el-option
      v-for="item5 in agemethList"
      :key="item5.value"
      :label="item5.label"
      :value="item5.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%"
    stripe>
    <el-table-column
      prop="idNumber"
      label="身份证号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="姓名"
      width="180">
    </el-table-column>
     <el-table-column
      prop="telNumber"
      label="手机号">
    </el-table-column>
    <el-table-column
      prop="match_stateStr"
      label="认证状态">
    </el-table-column>
     <el-table-column
      prop="addressRelation"
      label="地区关系">
    </el-table-column>
     <el-table-column
      prop="nowAddress"
      label="认证地区">
    </el-table-column>
     <el-table-column
      prop="createTime"
      label="认证时间">
    </el-table-column>
     <el-table-column
      prop="createtime"
      label="认证照片">
      <template slot-scope="scope">
        <el-popover
    placement="left"
    title=""
    trigger="hover">
                     <img slot="reference" :src="scope.row.recordPhotoStr||defaultImg" height="70"  class="head_pic">
                    <img :src="scope.row.recordPhotoStr"  height="200px"  class="head_pic"/>
                    </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
  }
  .add{
      margin-left: 20px
  }
</style>

<script>
import Axios from "axios"
import Cookies from "js-cookie";
 import CryptoJS from 'crypto-js'
 import { Loading } from 'element-ui';
 import {listtown} from '../../utils/address'
import {baseUrl2} from "../../utils/global"
import defaultImg from "../../assets/defaultPicture.jpg"
  export default {
       data() {
        
      return {
        list:[],
         name:"",
         town:"",
         village:"",
         defaultImg: defaultImg,
        cit:"",
        Page:1,
        totals:0,
        idcard:"",
        ywtype:"",
        info:'',
        ywtype:'',
        tableData: [],
        list2:[],
        //认证状态
        state:"",
        stateList:[{
          value:"0",
          label:"认证成功",
        },{
          value:"2",
          label:"认证失败",
        },{
          value:"3",
          label:"未认证",
        }],
        //时间
        time:"",
        //年龄
        age:"",
        ageList:[{
          value:"0",
          label:"所有年龄段",
        },{
          value:"1",
          label:"55岁以下",
        },{
          value:"2",
          label:"55-59岁",
        },{
          value:"3",
          label:"60岁以上",
        },{
          value:"4",
          label:"90岁以上",
        },{
          value:"5",
          label:"100岁以上",
        }],
        //年龄计算方式
        agemeth:"",
        agemethList:[{
          value:"1",
          label:"按年计算",
        },{
          value:"2",
          label:"按月计算",
        }],
        //参保类型
        cblx:"",
        cblxList:[{
          value:"0",
          label:"城镇居民",
        },{
          value:"1",
          label:"机关事业",
        },{
          value:"2",
          label:"企业员工",
        }]
      }
    },
    methods: {
      //搜索
      serch(){
        Loading.service();
        this.serchs(1)
      },
      serchs(p){
        
        var start=""
        var end=""
        if(this.time){
        var d=this.time[0]
        var s=this.time[1]
        console.log(d)
         var mon=(parseInt(d.getMonth()) + 1)
         var emon=(parseInt(s.getMonth()) + 1)
         start = d.getFullYear()+"-"+mon+"-"+d.getDate()
        
         end=s.getFullYear()+"-"+emon+"-"+s.getDate()
        
        }
     var data={
       province_name:"四川省",
       city_name:"南充市",
       county_name:"西充县",
       pageSize:10,
       page:p,
       town_name:this.town.split(",")[1],
       village_name:this.village.split(",")[1],
       iDCard:this.idcard,
       match_state:this.state,
       begin_time:start,
       end_time:end,
       siType:this.cblx,
       personName:this.name,
       address:this.agemeth,
       birthday:this.age
     }   
     Axios.get(baseUrl2+'/search/authentication.do',{
      params:data
})
.then(res => {
   let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
  this.tableData=res.data.obj
  this.totals=res.data.page.total_count
})
.catch(err => {
   let loadingInstance = Loading.service();
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
});
       
      },
      //流程
      progress(d,s){
       
      },
      
      current_change(ss){
        this.serchs(ss)
      },
      //
      handleChange(){
        Axios.get(baseUrl2+'/show/getVillageList.do?town_id='+this.town.split(",")[0],{
 
})
.then(res => {
  this.list2=res.data
})
.catch(err => {
  console.log(err);
});
      },
      torz(){

      },
      //查看
       handle(s,d){
        
        },
        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 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)

Axios.get(baseUrl2+'/show/getTownList.do?county_id=511325000000',{
 
})
.then(res => {
 this.list=res.data
})
.catch(err => {
  console.log(err);
});
  
      
    }
  }
</script>
