<template>
	<view class="page padding">
		<!-- 检查表列表 -->
		<view class="checklist-card" v-for="item in list" :key="item.id">
			<view class="card-name">{{ item.name }}</view>
		</view>
		
		<!-- 空状态 -->
		<view v-if="list.length === 0" class="empty-tip">
			<text>暂无检查表</text>
		</view>
		
		<!-- 新增按钮 -->
		<button class="add-btn" @click="goToAdd">
			<text class="cuIcon-add"></text>
			<text>新增检查表</text>
		</button>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getCheckTableList } from '@/request/api.js'

const list = ref([])

// 获取检查表列表
const fetchList = async () => {
	try {
		const res = await getCheckTableList({ pageNum: 1, pageSize: 100 });
		if (res.code === 0) {
			list.value = res.data.records || [];
		}
	} catch (error) {
		console.error('获取检查表列表失败:', error);
	}
}

// 跳转到新增页面
const goToAdd = () => {
	uni.navigateTo({
		url: '/pages/editchecklist/editchecklist'
	})
}

// 每次显示页面时刷新数据
onShow(() => {
	fetchList();
})
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #EBF2FC;
	padding-bottom: 120rpx;
}

.checklist-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.card-name {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
}

.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

.add-btn {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
	height: 90rpx;
	background: linear-gradient(135deg, #667eea 0%, #2668EA 100%);
	border-radius: 45rpx;
	color: #fff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
	
	.cuIcon-add {
		margin-right: 10rpx;
		font-size: 36rpx;
	}
}
</style>