<template>
  <div class="screeningSearch">
    <div class="top">
      <form-components ref="formList" :forms="formList"></form-components>
    </div>
    <div class="bot">
      <customs-table
        ref="table"
        :table-data="tableData"
        :columns="columns"
        :header-class="'newHeader'"
        :list-loading="listLoading"
        :current-page="pageIndex"
        :total-count="total"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import FormComponents from "@/components/FormComponents"
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
import { getEncryptList } from "@/api/encrtpttest"
// import * as CryptoJS from "crypto-js"
import getSha256 from "crypto-js/sha256"
import md5 from "js-md5"
export default {
  components: {
    CustomsTable,
    FormComponents,
  },
  mixins: [paginationMixin],
  data() {
    return {
      listLoading: false,
      modifiedFlag: false,
      encryptIdcard: "",
      columns: [
        {
          label: "姓名",
          value: "name",
          minWidth: 120,
        },

        {
          label: "生日",
          value: "birthday",
          minWidth: 120,
        },
        {
          label: "身份证",
          value: "encryptedIdCard",
          minWidth: 120,
        },
      ],
      tableData: [],
      formList: [
        {
          xs: 24,
          sm: 12,
          md: 12,
          lg: 7,
          xl: 7,
          type: "input",
          label: "身份证",
          prop: "idCard",
          placeholder: "请输入身份证",
          rules: [],
        },
        {
          xs: 1,
          sm: 2,
          md: 2,
          lg: 2,
          xl: 2,
          type: "btn",
          list: [
            {
              btnType: "button",
              type: "",
              style: {
                width: "80px",
                height: "32px",
                borderRadius: "4px",
                fontSize: "14px",
                marginLeft: "40px",
              },
              btnText: "查询",
              func: () => {
                this.onSearch()
              },
            },
          ],
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.handleSearch()
  },
  methods: {
    changeModified() {
      this.modifiedFlag = !this.modifiedFlag
    },
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    changePage(v) {
      this.page[v.type] = v.value
      console.log(this.page)
      this.$refs.customTable.loading = false
    },
    onSearch() {
      let idCard = this.$refs.formList.form.idCard
      if (idCard) {
        let data = md5(idCard)
        data = "pa" + data + "1+"
        const sha256Encrypt = getSha256(data).toString() // data - 需要加密的数据
        //增量计算哈希值，减少内存
        // const encryptedHexStr = CryptoJS.enc.Hex.parse(sha256Encrypt)
        // const mic = CryptoJS.enc.Base64.stringify(encryptedHexStr) // base64加密
        this.encryptIdcard = sha256Encrypt
        this.handleSearch()
      } else {
        this.encryptIdcard = ""
        this.handleSearch()
      }
    },
    handleSearch() {
      let params = {
        current: this.pageIndex,
        size: this.pageSize,
      }
      if (this.encryptIdcard) {
        params.idCard = this.encryptIdcard
      }
      console.log(params)
      getEncryptList(params).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.screeningSearch {
  .top {
    width: 100%;
    // height: 72px;
    padding: 0 116px 0 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bot {
    padding: 0 24px;
  }
}
</style>
