<template>
  <div class="comom-title">
    <div class="title">重点人发掘情况</div>
  </div>
  <div class="comom-cnt" id="fjfk">
    <MyTable
      @changePage="changePage"
      customClass="zdy_bkcz_table"
      :tableData="pageData.tableData"
      :tableColumn="pageData.tableColumn"
      :tableHeight="pageData.tableHeight"
      :key="pageData.keyCount"
      :tableConfiger="pageData.tableConfiger"
    >
    </MyTable>
  </div>
</template>
    
<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { fa } from "element-plus/es/locale.mjs";
import { reactive, onMounted,ref } from "vue";
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    haveControls: false,
    showSelectType: "null",
    showIndex: false,
    stripe: true
  },
  tableColumn: [
    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
    { label: "手机号码", prop: "rySjhm", showOverflowTooltip: true },
    { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
    { label: "户籍地址", prop: "ryHjdz", showOverflowTooltip: true },
  ]
});

const total = ref(0);
const pageNum = ref(1);

onMounted(() => {
  getList()
  tabHeightFn();
});



// 获取列表
const getList = () => {
  pageData.tableConfiger.loading = true;
  let data = { sfZbkry: 1, pageSize:10 , pageCurrent:pageNum.value};
  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
    let arr = res.records || [];
    pageData.tableData = pageNum.value == 1 ? arr :  pageData.tableData.concat(arr);
    total.value = res.total;
    pageData.tableConfiger.loading = false;
  })
  .catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

const changePage = () => {
  if(pageData.tableData.length == total.value) return false;
  pageNum.value++;
  getList()

};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =  document.getElementById('fjfk').offsetHeight - 10;
    window.onresize = function () {
      tabHeightFn();
    };
};

</script>
    
    
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
::v-deeep .comom-title {
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}
::v-deep .el-table td.el-table__cell {
  color: #ffffff;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: rgba(0, 61, 130, 0.75);
}
</style>
<style lang="scss">

.zdy_bkcz_table td.el-table__cell {
  color: #ffffff !important;
}
.zdy_bkcz_table th.el-table__cell {
  color: #ffffff !important;
  font-size: 15px;
}
</style>