<template>
  <div>
    <div class="op">
      <Candode class="candode" v-on:childByValue="childByValue"></Candode>
      <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.label">
          </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>
      <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="10%"
        label="待遇发放状态">
      </el-table-column>
      <el-table-column
        prop="townName"
        min-width="10%"
        label="乡镇">
      </el-table-column>
      <el-table-column
        prop="villageName"
        min-width="10%"
        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="10%"
        label="当前月领取标准">
      </el-table-column>
      <el-table-column
        min-width="10%"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-s-check"
            @click="handle(scope.$index, scope.row)">详情
          </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>
    <div>
      <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="1200px">
        <el-form :model="data" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="个人编号">
                <el-input v-model="data.personNum" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="常住地地址">
                <el-input v-model="data.permanentAddress" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离退休日期">
                <el-input v-model="data.retirementDate" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="乡镇">
                <el-input v-model="data.townName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="村（社区）">
                <el-input v-model="data.villageName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="村组">
                <el-input v-model="data.groupName" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="银行">
                <el-input v-model="data.bank" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户名">
                <el-input v-model="data.householdName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行账号">
                <el-input v-model="data.bankAccount" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="视同缴费月数">
                <el-input v-model="data.treatAsMonths" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际缴费月数">
                <el-input v-model="data.realMonths" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="军龄折算月数">
                <el-input v-model="data.militaryMonths" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="特殊工种折算月数">
                <el-input v-model="data.specialWorkMonths" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前月领取标准">
                <el-input v-model="data.presentBenchmark" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="个人账户总金额">
                <el-input v-model="data.privateAccountTotal" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="省级财政部分所占比例">
                <el-input v-model="data.provicePercent" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市级财政部分所占比例">
                <el-input v-model="data.cityPercent" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="县级财政部分所占比例">
                <el-input v-model="data.countyPercent" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="集体补助部分所占比例">
                <el-input v-model="data.collectivePercent" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="个人缴费部分所占比例">
                <el-input v-model="data.individualPercent" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

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

  .candode {
    margin-right: 20px;
  }

  .idc {
    margin-right: 20px;
  }

  .nam {
    margin-right: 20px;
  }

  /*.grantState {*/
  /*  margin-right: 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 Candode from "../Core/candode"

  export default {
    components: {
      Candode
    },
    data() {
      return {
        list: [],
        name: "",
        activities: [],
        options1: [{
          value: '正常发放',
          label: '正常发放'
        }, {
          value: '暂停发放',
          label: '暂停发放'
        }, {
          value: '终止发放',
          label: '终止发放'
        }],
        pageNum: 1,
        totals: 0,
        idCard: "",
        grantState: "",
        info: '',
        tableData: [],
        dialogTableVisible: false,
        data: {},
        townList: "",
      }
    },
    methods: {
      //搜索
      search() {
        Loading.service();
        let data = {
          idCard: this.idCard ? this.Encrypt(this.idCard) : "",
          name: this.name ? this.Encrypt(this.name) : "",
          grantState: this.grantState,
          townName: this.townList ? this.townList[0] : "",
          villageName: this.townList ? this.townList[1] : "",
        };
        this.$api.getlist.getGrantList(data).then((res) => {
          for (var i in res.data.list) {
            res.data.list[i].idcard = res.data.list[i].idcard ? this.decrypt(res.data.list[i].idcard) : "";
            res.data.list[i].name = res.data.list[i].name ? this.decrypt(res.data.list[i].name) : "";
          }
          this.tableData = res.data.content;
          this.totals = res.data.totalSize;
          this.pageNum = res.data.pageNum;
          let loadingInstance = Loading.service();
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
        }).catch((res) => {
          let loadingInstance = Loading.service();
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
        });
      },
      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,
          townName: this.townList ? this.townList[0] : "",
          villageName: this.townList ? this.townList[1] : "",
        };
        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);
          }
          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(index, row) {
        this.dialogTableVisible = true;
        this.data = row;
        let d = new Date(this.data.retirementDate);
        let mon = (parseInt(d.getMonth()) + 1);
        this.data.retirementDate = d.getFullYear() + "-" + mon + "-" + d.getDate();
      },
      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(_ => {
          });
      },
      childByValue(val) {
        this.townList = val;
      },
    },
    created() {
      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);
        }
        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();
        });
      });
    }
  }
</script>
