<template>
	<div class="todo-task">
		
		<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: '已检查'},

	]
}
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;
	height: calc(100vh - 620px);
}
</style>
