<template>
  <section class="eltab3">
    <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="tableData" :tableloading="tableloading"
      :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
      <template #sex="{ row }">
        <dict-tag v-if="row.sex" :options="D_BZ_XB" :value="row.sex" :tag="false" />
        <span v-else>无</span>
      </template>
      <template #countyorgname="{ row }">
        <span>{{ row.countyorgname ? row.countyorgname : row.cityorgname }}</span>
      </template>
      <template #thebidtype="{ row }">
        {{ row.thebidtype == "1" ? "上岗证" : "准驾证" }}
      </template>
    </MOSTY.Table>
    <div class="fenye">
      <Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
      </Pages>
    </div>
  </section>

</template>
<script setup>
// 引入
import { onMounted, ref, getCurrentInstance, reactive, watch, defineProps, defineExpose } from "vue";
import { postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import Pages from '@/components/aboutTable/Pages/index.vue'
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
// 数据
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const tableloading = ref(false);
const tableData = ref([]);
const pageData = reactive({
  tableColumns: [
    {
      title: "姓名",
      prop: "drivername"
    },
    {
      title: "性别",
      prop: "sex",
      slot: true
    },
    {
      title: "证件类型",
      prop: "thebidtype",
      slot: true
    },
    {
      title: "单位",
      prop: "countyorgname",
      slot: true
    },
    {
      title: "上岗证初次领证时间",
      prop: "fristpoststime"
    },
    {
      title: "审验时间",
      prop: "verificationtime"
    },
    {
      title: "证件号码",
      prop: "idnumber"
    },
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
})
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
});
const props = defineProps({
  dict: {
    type: Object,
    default: { D_BZ_XB: [] }
  },
  params: Object,//查询参数
})
// 导出表格
const export2Excel = () => {
  let title = {
    drivername: "姓名",
    sex: "性别",
    categorys: "证件类型",
    countyorgname: "单位",
    fristpoststime: "初次领证时间",
    verificationtime: "审验时间",
    idnumber: "证件号码"
  };
  listQuery.value.pageCurrent = 1
  listQuery.value.pageSize = 10000
  postApi(listQuery.value, "/mosty-jcgl/driverposts/queryDriverpostsList").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].sex = data[i].sex ? proxy.$getDictVal(data[i].sex, { value: props.dict.D_BZ_XB }) : '无';
          data[i].categorys = data[i].thebidtype == '1' ? '上岗证' : '准驾证';
        }
        let tablename = "上岗证审验记录列表.xlsx";
        exportXlsx(title, data, '上岗证审验记录列表', tablename);
      } else {
        proxy.$message.warning('暂无数据');
      }
    }
  });
};

// 获取表格数据
function getListData() {
  tableloading.value = true;
  postApi(listQuery.value, `/mosty-jcgl/driverposts/queryDriverpostsList`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageData.pageConfiger.total = res.total
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  );
}

//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  pageData.pageConfiger.pageCurrent = val;
  getListData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  pageData.pageConfiger.pageSize = val;
  getListData();
};
watch(() => props.params, val => {
  if (val) {
    listQuery.value.pageCurrent = 1
    listQuery.value = { ...listQuery.value, ...val }
    getListData()
  }
})
onMounted(() => {
  if (props.params && props.params.orgcode) {
    listQuery.value.orgcode = props.params.orgcode
    getListData()
  }
})
defineExpose({
  export2Excel
})
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 430px);
}
</style>
