<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" :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 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="handleViewDetail(record)">预览</div>

							<div class="btn g_c_main g_fs_14 g_cursor_point" @click="handleToForm('edit', 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 destroyOnClose ref="modalRef" v-model:open="tableDetail.isShow" title="持股详情" width="1200px" :bodyStyle="{ 'border-radius': '4px'}">
			<div class="g_pt_8 g_pb_16" style=" overflow-y: auto">
        <div class="g_float_right">
          <a href="//a.matripe.com.cn/api_stock/admin/user/stock/record/download">
          <a-button class="g_mr_12">
            <template #icon>
              <DownloadOutlined />
            </template>
            导出模板
          </a-button>
          </a>
          <a-upload :action="baseUrl + '/admin/user/stock/record/import'" :data="{userId}" accept=".xlsx, .xls, .xlsm, .xltx, .xltm" @change="getMoreInfo">
						<a-button type="primary"><PlusOutlined />导入文件</a-button>
					</a-upload>
        </div>
          <div class="g_float_none"></div>
			
				<div class="g_mt_16 g_clear_scroll" style="max-height: calc(100vh - 464px); overflow-y: auto">
					<a-table :columns="tableDetail.columns" :data-source="tableDetail.list" size="middle" :pagination="false">
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'rank'">
								<span>{{ record.rank }}</span>
							</template>
						</template>
					</a-table>
				</div>
				<div class="g_mt_20">
					<a-pagination v-model:current="tableDetail.page" v-model:page-size="tableDetail.size" :total="tableDetail.count" :pageSize="tableDetail.size" :show-total="(total) => `共 ${total} 条`" @change="handleModalDetailPage" @showSizeChange="handleModalDetailSize" :show-quick-jumper="tableDetail.count < tableDetail.size ? false : true" :showSizeChanger="tableDetail.count < tableDetail.size ? false : true" :hideOnSinglePage="false" />
				</div>
			</div>
      <template #footer>
		     <a-button @click="tableDetail.isShow = false"  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>
            <span class="ant-form-text">{{modalInfo.form.name}}</span>
		         <!-- <a-input style="width: 100%" placeholder="请输入姓名" v-model:value="modalInfo.form.name" /> -->
             <!-- <a-select ref="select" v-model:value="modalInfo.form.name" placeholder="请选择用户" @focus="focus" @change="handleChange">
                <a-select-option v-for="item in userList" :value="item.id" :title="item.id">{{ item.name }}</a-select-option>
              </a-select> -->
		       </a-form-item>
		       <a-form-item label="持股数" name="num" required>
		         <a-input style="width: 100%" placeholder="请输入持股数" v-model:value="modalInfo.form.num" />
		       </a-form-item>
		       <a-form-item label="持股比例" name="percent" required>
		         <a-input style="width: 100%" placeholder="请输入持股比例" v-model:value="modalInfo.form.percent" />
		       </a-form-item>
		       <a-form-item label="持股价值（元）" name="amount" required>
		         <a-input style="width: 100%" placeholder="请输入持股价值" v-model:value="modalInfo.form.amount" />
		       </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 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 { getUserListApi, updateUserStatusApi, addUserApi, delUserApi,updateUserStockApi,getStockUserListApi,addStockUserApi, getUserMoreListApi} 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);
const userList = ref([]);
const userId = ref(0);
let baseUrl = ref(request.userCustom);

const handleChange = value => {
  console.log(`selected ${value}`);
  modalInfo.value.form.userId = value
};


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

const tableDetail = ref({
	page: 1,
	size: 50,
	count: 0,
	list: [],
	speed: -1,
	isShow: false,
	keys: "",
	columns: [],
	pagination: {},
});


const handleViewDetail = (item) => {
	// 打开明细弹窗
	tableDetail.value = {
		page: 1,
		size: 20,
    limit: 20,
		count: 0,
		list: [],
		speed: -1,
		isShow: true,
		keys: "",
		columns: [],
		pagination: {},
	};
  userId.value = item.userId
	
	// itemData.value = {
	// 	userId: item.id,
	// 	agencyTeamId: item.agencyTeamId,
	// };
	getModalDetail();
};

const getModalDetail = () => {

  tableDetail.value.columns = [
			{
				title: "序号",
				key: "rank",
				dataIndex: "rank",
				width: "50px",
				ellipsis: true,
			},
			{
				title: "取得方式",
				key: "sourceFrom",
				dataIndex: "sourceFrom",
				ellipsis: true,
				minWidth: "100px",
			},
			{
				title: "持股主体",
				key: "name",
				dataIndex: "name",
				width: "240px",
				ellipsis: true,
			},
			{
				title: "持股数量",
				key: "num",
				dataIndex: "num",
				width: "200px",
				ellipsis: true,
			},
		];

    getUserMoreList();
};





/**
 * 搜索事件
 */
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:null,
		num:'',
    percent:'',
		amount:'',
	}
})


const submitForm = ()=>{
	let url = '',params = {};

console.log(userList.value);
console.log(modalInfo.value.form.userId);
//   let obj = userList.value.find(item => item.id ===  modalInfo.value.form.userId)

// console.log(obj);

	params = {
		name:modalInfo.value.form.name,
		num:modalInfo.value.form.num,
		percent:modalInfo.value.form.percent,
		amount:modalInfo.value.form.amount,
    userId:modalInfo.value.form.userId,
    id:modalInfo.value.id
	}

  if(modalInfo.value.id){
      delete params.password;
      updateUserStockApi(params).then((res)=>{
      showAdd.value = false;
      message.success("修改成功");
      getTable();
    });
  }else{
    addStockUserApi(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,
				num:$data.num,
        percent:$data.percent,
        amount:$data.amount,
        userId:$data.userId
			},
			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;
	getStockUserListApi({ 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:null,
		username:'',
    idcard:'',
		description:''
    }
  }

  getUserListApi({ limit:100, page: 1, keyword:""}).then((res)=>{
    userList.value = res.data.records
    // modalInfo.value.name = res.data.records[0].name
    console.log(res);
  });
};
const columns = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
	},
	{
		title: "姓名",
		key: "name",
		dataIndex: "name",
	},

	{
		title: "持股数",
		key: "num",
		dataIndex: "num",
		ellipsis: true,
		width: "240px",
	},
	{
		title: "持股比例",
		key: "percent",
		dataIndex: "percent",
		width: "240px",
		ellipsis: true,
    customRender: (record) => {
			return record.record.percent ? record.record.percent : '-';
		},
	},
	
	{
		title: "持股价值（元）",
		key: "amount",
		dataIndex: "amount",
		ellipsis: true,
		width: "240px",
	},
	{
		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();
};
/* #################### 分页器事件 #################### */
const handleModalDetailPage = ($page, $size) => {
	// 监听明细页码
	console.log($page);
	console.log($size);
	tableDetail.value.page = $page;
	getUserMoreList();
};
const handleModalDetailSize = ($page, $size) => {
	// 监听明细size
	tableDetail.value.page = 1;
	tableDetail.value.size = $size;
  getUserMoreList();
};

/**
 * 获取持股列表
 */
 const getUserMoreList = () => {
	getUserMoreListApi({ limit: tableDetail.value.limit, page: tableDetail.value.page, userId: userId.value }).then((res) => {
		console.log(res);
    
    // tableDetail.value = { ...res.data, keyword: tableData.value.keyword, page: res.data.current, limit: res.data.size };
    tableDetail.value.list = res.data.records
    tableDetail.value.count = res.data.total
    tableDetail.value.list.forEach((item, index) => {
			item.rank = index + 1;
		});
		// stockMoreList.value = res.data;
		// stockMoreList.value.forEach((item, index) => {
		// 	item.rank = index + 1;
		// });
	});
};

/**
 * 上传持股文件
 */
 const getMoreInfo = (info) => {
	console.log(info);
	if (info.file.response) {
		if (info.file.response.code == 200) {
			getUserMoreList();
			message.success("操作成功");
		}
	}
};



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