<template>
	<!--我的职位-->
	<div class="p-manage-myJob">
		<div class="m-select g_flex_row_between">
			<!-- <div class="g_flex_row_start">
				<div class="g_w_320 g-search-btn g_mr_16">
					<a-input-search v-model:value="tableData.keyword" placeholder="请输入姓名" @search="searchList" @change="handleChangeSearch" allowClear />
				</div>
			</div> -->
			<div>
   
				<!-- <a-button type="primary" @click="openAdd" :icon="h(PlusOutlined)">新增用户</a-button> -->
				<!-- <a-button type="" class="g_border_d g_ml_16" @click="handleToForm('add', { id: 0 })" :icon="h(DownloadOutlined)">导出模版</a-button> -->
				<!-- 
        <a-dropdown :trigger="['click']">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="goShareList">共享职位</a-menu-item>
              <a-menu-item key="2" @click="handleToForm('add',{id:0})">自有职位</a-menu-item>
            </a-menu>
          </template>
          <a-button>
            新增职位
            <DownOutlined style="zoom:.8" />
          </a-button>
        </a-dropdown> -->
			</div>
		</div>
		<div class="m-table g_mt_20 antd-table">
			<a-table sticky :columns="columns" :scroll="{x:1000}" :data-source="tableData.records" size="middle" :pagination="false" :loading="tableData.loading" class="g_clear_scroll" style="max-width: calc(100% - 0px)">
				<template #bodyCell="{ column, record }">
				</template>
			</a-table>
			<div class="g_pb_16 g_pt_16 g_pageBottom" v-if="tableData.records.length > 0">
				<a-pagination v-model:current="tableData.page" v-model:page-size="tableData.size" :total="tableData.total" :pageSize="tableData.size" :show-total="(total) => `共 ${total} 条`" @change="handleModalPage" @showSizeChange="handleModalSize" :show-quick-jumper="tableData.total < tableData.size ? false : true" :showSizeChanger="tableData.total < tableData.size ? false : true" :hideOnSinglePage="false" />
			</div>
		</div>
	</div>
</template>

<script setup>
import request from "../../utils/request"; // 引入基础路径
import { ref, onMounted, getCurrentInstance, h, watch } from "vue";
import { PlusOutlined, EllipsisOutlined, UploadOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import {getLoginLogApi} from "../../api/login";
import { DownloadOutlined } from "@ant-design/icons-vue";
import idCardPanel from "../components/upload/image.vue";

/* #################### 初始化事件 #################### */
const router = useRouter(); // 应用路由
const route = useRoute();
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;


onMounted(() => {
	getTable();
});




/* #################### 表格事件 #################### */
const tableData = ref({
	keyword: "",
	page: 1,
	limit: 20,
	total: 0,
	count: 0,
	loading: false,
	records: [],
});
const getTable = () => {
	console.log(tableData.value);
	tableData.value.loading = true;
	getLoginLogApi({ limit: tableData.value.limit, page: tableData.value.page}).then((res) => {
		console.log(res);
		tableData.value = { ...res.data, page: res.data.current, limit: res.data.size };
    tableData.value.records.forEach((item, index) => {
			item.rank = index + 1;
		});
	});
};
const columns = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
	},
	{
		title: "姓名",
		key: "username",
    width:"120px",
		dataIndex: "username",
	},
  {
		title: "电话",
		key: "name",
    width:"180px",
		dataIndex: "name",
	},
	{
		title: "登录时间",
		key: "updateTime",
		dataIndex: "updateTime",
		ellipsis: true,
	},
]);


/* #################### 分页器事件 #################### */
const handleModalPage = ($page, $size) => {
	// 监听明细页码
	console.log($page);
	console.log($size);
	tableData.value.page = $page;
	getTable();
};
const handleModalSize = ($page, $size) => {
	// 监听明细size
	tableData.value.page = 1;
	tableData.value.size = $size;
	getTable();
};

</script>

<style lang="less">

.ant-table-cell:empty::before{
  content: "-";
}
.p-manage-myJob {
	position: relative;
	min-height: calc(100vh - 213px);
	width: 100%;
	height: 100px;
	.btn-active {
		width: 40px;
		height: 24px;
		margin-left: 6.5px;
		font-size: 12px;
		color: #f6343e;
		background-color: #fff3f3;
		padding: 1px 3px;
		zoom: 0.6;
		margin-top: 8px;
		text-align: center;
	}
}
.ant-spin-blur .ant-empty {
	opacity: 0;
}
</style>
