<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="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" :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="modalInfo.isShow" 
							:title="modalInfo.title" 
							width="640px" 
							centered
							:destroyOnClose="true" 
							:forceRender="true"
		>
		   <div class="g_pt_30 modal-box">
		      <a-form :model="modalInfo.form" 
									name="basic" 
									:label-col="{ span: 6 }" 
									:wrapper-col="{ span: 18 }" 
									autocomplete="off" 
									style="width: 80%;" 
									class="g_ml_51"
				  >
		       <a-form-item label="职位要求标签" name="name" required>
		         <a-input style="width: 100%" placeholder="请输入职位要求标签" v-model:value="modalInfo.form.name" />
		       </a-form-item>
					 <a-form-item label="标签类型" name="typeClassify" required>
					   <a-select v-model:value="modalInfo.form.typeClassify" 
											:getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode" 
											placeholder="请选择职位分类" 
											@change="handleUpdateSelect"
						 >
					   	<a-select-option v-for="item in typeClassifyList" :value="item.id" :title="item.id">{{ item.name }}</a-select-option>
					   </a-select>
					 </a-form-item>
					 <a-form-item label="说明" name="desp">
					   <a-textarea :rows='6' style="width: 100%" placeholder="请输入职位说明" v-model:value="modalInfo.form.desp" />
					 </a-form-item>
		      </a-form>
		   </div>
		   <template #footer>
		     <a-button @click="modalInfo.isShow = false">关闭</a-button>
				 <a-button @click="submitForm" type="primary">确定</a-button>
		   </template>
		</a-modal> -->



		<a-modal v-model:open="showAdd" :title="modalInfo.title" style="width: 734px" :destroyOnClose="true">
			<div class="g_pt_30 modal-box">
		      <a-form :model="modalInfo.form" 
									name="basic" 
									:label-col="{ span: 6 }" 
									:wrapper-col="{ span: 18 }" 
									autocomplete="off" 
									style="width: 80%;" 
									class="g_ml_51"
				  >
		       <a-form-item label="姓名" name="name" required>
		         <a-input style="width: 100%" placeholder="请输入姓名" v-model:value="modalInfo.form.name" />
		       </a-form-item>
		       <a-form-item label="电话" name="name" required>
		         <a-input style="width: 100%" placeholder="请输入电话" v-model:value="modalInfo.form.username" />
		       </a-form-item>
		       <a-form-item label="密码" name="name">
		         <a-input style="width: 100%" placeholder="请输入密码" v-model:value="modalInfo.form.idcard" />
		       </a-form-item>
					
					 <a-form-item label="备注" name="desp">
					   <a-textarea :rows='6' style="width: 100%" placeholder="请输入备注" v-model:value="modalInfo.form.description" />
					 </a-form-item>
		      </a-form>
		   </div>
		   <template #footer>
		     <a-button @click="showAdd = false" >关闭</a-button>
				 <a-button @click="submitForm" type="primary">确定</a-button>
		   </template>
		</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,updateUserApi } 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 modalInfo = ref({
  title:'新增用户',
  id:0,
	form:{
		name:"",
		username:'',
    idcard:'',
		description:''
	}
})


const submitForm = ()=>{
	let url = '',params = {};
	params = {
		name:modalInfo.value.form.name,
		username:modalInfo.value.form.username,
		idcard:modalInfo.value.form.idcard,
		description:modalInfo.value.form.description,
    password:'123456',
    id:modalInfo.value.id
	}


  if (!commonJS.regular(modalInfo.value.form.username, 'tel')) {
    message.warning('请输入正确的手机号')
    return false
  }


  if(modalInfo.value.id){
      delete params.password;
      updateUserApi(params).then((res)=>{
      showAdd.value = false;
      message.success("修改成功");
      getTable();
    });
  }else{
      addUserApi(params).then((res)=>{
      showAdd.value = false;
      message.success("新增成功");
      getTable();
    });

  }
	
 
}
const handleToForm = ($type, $data) => {
  showAdd.value = true;
  console.log($data.id);
  modalInfo.value = {
			isShow:true,
			title:'修改用户',
			form:{
				name:$data.name,
				username:$data.username,
        idcard:$data.idcard,
        description:$data.description,
			},
			id:$data.id
		}

  // updateUserApi({
	// 	description: "测试备注",
	// 	idcard: "123123123123123123",
	// 	name: "测试真名",
	// 	username: "13214534564",
	// 	password: 123456,
	// 	status: 0,
	// 	username: "测试用户名",
	// }).then(() => {
	// 	message.success("新增成功");
	// 	getTable();
	// });
	// if ($data.id > 0) {
	// 	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 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 openAdd = () =>{
  showAdd.value = true
  modalInfo.value.id = 0;
  modalInfo.value = {
    title : "新增用户",
    form:{
    name:"",
		username:'',
    idcard:'',
		description:''
    }
  }

}
const columns = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
	},
	{
		title: "姓名",
		key: "name",
		dataIndex: "name",
		width: "110px",
	},

	{
		title: "电话",
		key: "username",
		dataIndex: "username",
		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: "90px",
		ellipsis: true,
	},
]);
/**
 * 切换用户状态
 */
const handleStatus = (e, $data) => {
	updateUserStatusApi({ id: $data.id, status: e ? 1 : 0 }).then(() => {
		message.success("更新成功");
		getTable();
	});
};
const addInfo = ref({});

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 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">

.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>
