<template>
<div>
  <div class="op">

    <Candode v-on:childByValue="childByValue" v-on:getTownlength="getTownlength"></Candode>

<!--<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"
import Candode from "../Core/candode"

  export default {
    components:{
      Candode
    },
       data() {

      return {
        list:[],
         name:"",
         town:"",
         village:"",
         defaultImg: defaultImg,
        townList:"",
        cit:"",
        Page:1,
        totals:0,
        idcard:"",
        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:"1",
        agemethList:[{
          value:"1",
          label:"按年计算",
        },{
          value:"2",
          label:"按月计算",
        }],
        //参保类型
        cblx:"",
        cblxList:[{
          value:"0",
          label:"城镇居民",
        },{
          value:"1",
          label:"机关事业",
        },{
          value:"2",
          label:"企业员工",
        }],
        townlen:1
      }
    },
    methods: {
      childByValue(val){
        this.townList=val
      },
      getTownlength(val){
        this.townlen=val
      },
      //搜索
      serch(){
        this.serchs(1)
      },
        serchs(p){
          if(this.townList =='' && this.townlen == 1){
            this.$message.error("请选择镇村！");
            return;
          }
          Loading.service();
          var start=""
          var end=""
          if(this.time){
          var d=this.time[0]
          var s=this.time[1]
           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],
         town_name: this.townList?this.townList[0]:'',
         village_name:this.townList?this.townList[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>
