<template>
	<div class="todo-task">
		<div class="search-container">
			<span class="search-title">筛选:</span>
			<el-select style="max-width: 300px;" v-model="searchType" placeholder="请选择" @change="handleSearchType">
				<el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" />

			</el-select>
			<el-select style="max-width: 300px;" v-model="timeType" placeholder="到期时间筛选" @change="handleTimeType">
				<el-option v-for="(item, index) in timeItems" :key="index" :label="item.label" :value="item.value" />
			</el-select>
		</div>
		<div class="table-container">
			<el-table :data="listData" :row-key="getRowKey" height="100%" border stripe>
				<el-table-column prop="todoName" label="待办事项" width="330" show-overflow-tooltip />
				<el-table-column prop="personName" label="发送人" width="80" />
				<el-table-column prop="time" label="到期时间" />
				<el-table-column prop="statusName" label="状态">
					<template #default="{ row }">
						<span v-if="row.statusName == '未超期'" class="no-overdue">未超期</span>
						<span v-else-if="row.statusName == '已超期'" class="overdue">已超期</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";

/** table数据 */
const listData = ref([]);

const searchType = ref('');
const timeType = ref('');
const timeItems = ref([]);
const typeOptions = ref([]);
const setTimeItems = () => {
	// 获取最近7年下拉
	timeItems.value = [];
	for (let i = 0; i < 7; i++) {
		timeItems.value.push({
			label: new Date().getFullYear() - i,
			value: new Date().getFullYear() - i,
		});
	}
}
setTimeItems()
const setTypeOptions = () => {
	typeOptions.value = [
		{ label: '所有', value: '' },
		{ label: '待办', value: '0' },
		{ label: '已办', value: '1' },
	]
}
setTypeOptions()
const handleSearchType = () => {
	console.log('searchType: ', searchType.value);
}
const handleTimeType = () => {
	console.log('timeType: ', timeType.value);
}
const getTableData = () => {
	console.log('getTableData');
	// postApi('/dutyBook/tzgg/getTodoTaskList', {}).then(res => {
	// 	console.log('res: ', res);
	// 	listData.value = res.data
	// })
	listData.value = [
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '未超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
		{ todoName: '水库管理中心关于开展安全应急救护，等培训的通知', personName: '张三', time: '2024-09-09', statusName: '已超期' },
	]
}
onMounted(() => {
	// setTimeItems()
	getTableData()
})
</script>

<style lang="scss" scoped>
.todo-task {
	// border: 1px solid #ccc;
	padding: 6px;

	.search-container {
		display: flex;
		align-items: center;
		// justify-content: flex-start;
		gap: 10px;

		.search-title {
			display: inline-block;
			width: 32px;
			white-space: nowrap;
		}
	}
}

.no-overdue {
	color: #67C23A;
}

.overdue {
	color: #F56C6C;
}

.table-container {
	margin-top: 10px;
	// height: calc(100% - 40px);
	height: 290px;
}
</style>
