<template>
  <div>
    <div class="op">
      <div class="nam">
        <el-input v-model="name" size="mini" placeholder="请输入姓名" clearable></el-input>
      </div>
      <div class="idc">
        <el-input v-model="idCard" size="mini" placeholder="请输入身份证号" clearable></el-input>
      </div>
      <div class="grantState">
        <el-select v-model="grantState" placeholder="请选择待遇发放状态" size="mini" clearable>
          <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="search">搜索
      </el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="idcard"
        label="身份证号"
        min-width="15%">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        min-width="10%">
      </el-table-column>
      <el-table-column
        prop="grantState"
        min-width="15%"
        label="待遇发放状态">
      </el-table-column>
      <el-table-column
        prop="lastGrantMonth"
        min-width="10%"
        label="最大发放期">
      </el-table-column>
      <el-table-column
        prop="treatAsMonths"
        min-width="10%"
        label="视同缴费月数">
      </el-table-column>
      <el-table-column
        prop="realMonths"
        min-width="10%"
        label="实际缴费月数">
      </el-table-column>
      <el-table-column
        prop="presentBenchmark"
        min-width="15%"
        label="当前月领取标准">
      </el-table-column>
<!--      <el-table-column-->
<!--        min-width="15%"-->
<!--        label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            size="mini"-->
<!--            icon="el-icon-s-check"-->
<!--            @click="drawer = true">详情-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
      class="pone"
      :page-size='10'
      layout="total, prev, pager, next, jumper"
      :total="totals"
      :current-page.sync="pageNum"
      @current-change="current_change"
    >
    </el-pagination>
<!--    <el-drawer-->
<!--      title="我是标题"-->
<!--      :visible.sync="drawer"-->
<!--      :before-close="handleClose">-->
<!--      <span>我来啦!</span>-->
<!--    </el-drawer>-->
  </div>
</template>

<style>
  .op {
    display: flex;
    align-items: center;

  }

  .idc {

    min-width: 200px
  }

  .nam {
    margin-right: 20px
  }

  .grantState {
    min-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 baseUrl from "../../globe/globeUrl"

  export default {
    data() {
      return {
        list: [],
        name: "",
        activities: [],
        options1: [{
          value: '正常发放',
          label: '正常发放'
        }, {
          value: '暂停发放',
          label: '暂停发放'
        }, {
          value: '终止发放',
          label: '终止发放'
        }],
        pageNum: 1,
        totals: 0,
        idCard: "",
        grantState: "",
        info: '',
        tableData: [],
        drawer: false,
      }
    },
    methods: {
      //搜索
      search() {
        let data = {
          idCard: this.idCard ? this.Encrypt(this.idCard) : "",
          name: this.name ? this.Encrypt(this.name) : "",
          grantState: this.grantState
        };
        this.$api.getlist.getGrantList(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 ? "信息变更" : ''
          }
          this.tableData = res.data.content
          this.totals = res.data.totalSize
          this.pageNum = res.data.pageNum
        }).catch((res) => {

        });
      },
      //流程
      progress(d, s) {
        console.log(s)
        this.activities = []
        var data = {
          recordId: s.id,
          type: s.recordtype == "参保登记" ? 1 : s.recordtype == "信息变更" ? 2 : ''
        }
        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) {
        let data = {
          pageNum: ss,
          pageSize: 10,
          idCard: this.idCard ? this.Encrypt(this.idCard) : "",
          name: this.name ? this.Encrypt(this.name) : "",
          grantState: this.grantState
        };
        Loading.service();
        this.$api.getlist.getGrantList(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 ? "信息变更" : ''
          }
          this.tableData = res.data.content
          this.totals = res.data.totalSize
          this.pageNum = res.data.pageNum
        }).catch((res) => {
          let loadingInstance = Loading.service();
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
        });
      },
      //查看
      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);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
    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)
      Loading.service();
      let data = {};
      this.$api.getlist.getGrantList(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 ? "信息变更" : ''
        }
        this.tableData = res.data.content
        this.totals = res.data.totalSize
        this.pageNum = res.data.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>
