<template>
	<!--我的职位-->
	<div class="p-manage-myJob">
		<div class="m-select g_flex_row_between g_pt_16">
			<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="showAdd = true" :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" :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 v-if="column.key === 'job'">
						<!-- @click="goDetail(record)" -->
						<div class="btn g_fs_14 g_cursor_point g_mr_13 g_flex_row_start">
							<div class="g_ell_1">{{ "斯琴高娃" }}</div>
						</div>
					</template>
					<template v-if="column.key === 'age'">
						<div class="g_ell_1">{{ record.sex + " " + record.age }}</div>
					</template>
					<template v-if="column.key === 'price'">
						<!-- <div v-html="record.price"></div> -->
					</template>
					<template v-if="column.key === 'status'">
						<a-switch @change="(e) => handleStatus(e, record)" :checked="record.status == 1 ? true : false" checked-children="正常" un-checked-children="禁用" />
					</template>

					<template v-if="column.key === 'state'">
						<div class="g_flex_row_between">
							<!-- <div
								class="btn g_fs_14 g_mr_13"
								:class="'g_c_main g_cursor_point'"
								:style="{
									cursor: !record.statusBool ? 'not-allowed' : '',
									color: !record.statusBool ? '#d8d8d8' : '#1677ff',
								}"
								@click="handleApplication(record)"
							>
								报名
							</div>
							<div class="btn g_c_main g_fs_14 g_cursor_point g_mr_13" @click="handleToForm('edit', record)">编辑</div> -->
							<div class="btn g_c_main g_fs_14 g_cursor_point" @click="handleDel(record)">删除</div>
						</div>
					</template>
				</template>
				<!-- <template #summary class="fixed-obj">
					<div style="width: 70vw" class="g_pb_16 g_pt_16">
						<a-table-summary fixed="bottom"> </a-table-summary>
					</div>
				</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>
		<a-modal v-model:open="showAdd" title style="width: 734px" :destroyOnClose="true">
			<a-form>
				<a-form-item class="g_mb_58" :label-col="{ span: 8 }" name="contactAvatar" :rules="[{ required: false, message: '请选择' }]">
					<template #label>
						<div class="g_c_6" style="">联系人头像</div>
					</template>
					<div class="g_flex_row_start" style="min-width: 200px; align-items: end">
						<img v-if="addInfo.contactAvatar" :src="addInfo.contactAvatar" class="g_w_60 g_h_60 g_br_6" alt="" />
						<img v-else src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/defaultAvatar.png" class="g_w_60 g_h_60 g_br_6" alt="" />
						<a-button class="g_position_rela g_ml_16">
							<DownloadOutlined />更换
							<idCardPanel class="g_position_abso img_upload" style :url="addInfo.contactAvatar" @submitEvent="updateAvatar" />
						</a-button>
					</div>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>

<script setup>
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 { getUserListApi, updateUserStatusApi, addUserApi, delUserApi } from "../../api/userList/userList";
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;
const speed = ref(0);
const showAdd = ref(0);
onMounted(() => {
	getTable();
});
/**
 * 搜索事件
 */
const searchList = (e) => {
	console.log("searchList", e);
	tableData.value.page = 1;
	getTable();
};
/* #################### 顶部事件 #################### */
const handleChangeSearch = (e) => {
	if (tableData.value.keyword == "") {
		getTable();
	}
};

/* #################### 表格事件 #################### */
const tableData = ref({
	keyword: "",
	page: 1,
	limit: 20,
	total: 0,
	count: 0,
	loading: false,
	records: [],
	jobType2Num: "-",
	jobType1Num: "-",
});
const getTable = () => {
	console.log(tableData.value);
	tableData.value.loading = true;
	getUserListApi({ limit: tableData.value.limit, page: tableData.value.page, keyword: tableData.value.keyword }).then((res) => {
		console.log(res);
		tableData.value = { ...res.data, keyword: tableData.value.keyword, 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: "name",
		dataIndex: "name",
		width: "110px",
	},

	{
		title: "电话（用户名）",
		key: "phone",
		dataIndex: "phone",
		ellipsis: true,
		width: "140px",
	},
	{
		title: "身份证号",
		key: "idcard",
		dataIndex: "idcard",
		width: "200px",
		ellipsis: true,
	},
	{
		title: "备注",
		key: "description",
		dataIndex: "description",
		ellipsis: true,
	},
	{
		title: "状态",
		key: "status",
		dataIndex: "status",
		ellipsis: true,
		width: "75px",
	},
	{
		title: "操作",
		key: "state",
		dataIndex: "state",
		width: "60px",
		ellipsis: true,
	},
]);
/**
 * 切换用户状态
 */
const handleStatus = (e, $data) => {
	updateUserStatusApi({ id: $data.id, status: e ? 1 : 0 }).then(() => {
		message.success("更新成功");
		getTable();
	});
};
const addInfo = ref({});
/**
 * 新增用户
 */
const addUser = (e, $data) => {
	addUserApi({
		description: "测试备注",
		idcard: "123123123123123123",
		name: "测试真名",
		phone: "13214534564",
		password: 123456,
		status: 0,
		username: "测试用户名",
	}).then(() => {
		message.success("新增成功");
		getTable();
	});
};
const  updateAvatar = (e)=>{
    console.log(e);
}
const goDetail = ($item) => {
	console.log($item);
	// 前往详情页
	if ($item.jobType == 1) {
		// 共享
		router.push({
			path: "/merchantManagement/shareJobDetail",
			query: {
				id: $item.templateId,
				shared: $item.shared,
				form: "joblist",
			},
		});
	} else {
		// 自有
		router.push({
			path: "/merchantManagement/jobDetail",
			query: {
				id: $item.id,
			},
		});
	}
};
const handleApplication = (record) => {
	console.log(record);
	if (!record.statusBool) {
		return false;
	}
	// 报名事件
	router.push({
		path: "/merchantManagement/recordJob",
		query: {
			company: record.boss,
			job: record.job,
			jobId: record.id,
			templateId: record.templateId,
			jobType: record.jobType,
		},
	});
};

const handleToForm = ($type, $data) => {
	if ($data.id > 0) {
		// if ($data.jobType == 1) {
		// 	return false;
		// }
		router.push({
			path: "/merchantManagement/jobForm",
			query: {
				id: $data.id ? $data.id : 0,
				type: $type,
				templateId: $data.templateId ? $data.templateId : 0,
			},
		});
	} else {
		router.push({
			path: "/merchantManagement/jobForm",
			query: {
				id: $data.id ? $data.id : 0,
				type: $type,
			},
		});
	}
};
const handleDel = ($data) => {
	commonJS.gConfirmModal(
		"删除",
		"确认删除该职位吗？",
		() => {
			delUserApi($data.id).then(() => {
				message.success("删除成功");
				getTable();
			});
		},
		() => {}
	);
};

/* #################### 分页器事件 #################### */
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">
.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>
