<template>
	<view class="page padding">
		<!-- 检查表列表 -->
		<view class="checklist-card" v-for="item in list" :key="item.id">
			<view class="card-main">
				<view class="card-info">
					<view class="card-name">{{ item.name }}</view>
					<view class="card-meta" v-if="item.deptName || item.pointCount">
						<text v-if="item.deptName">{{ item.deptName }}</text>
						<text v-if="item.deptName && item.pointCount" class="meta-dot">·</text>
						<text v-if="item.pointCount">检查项 {{ item.pointCount }} 项</text>
					</view>
				</view>
				<button class="detail-btn" @click.stop="goToDetail(item)">详情</button>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-if="list.length === 0" class="empty-tip">
			<text>暂无检查表</text>
		</view>
		
		<!-- 新增按钮 -->
		<button class="add-btn" @click="goToAdd">
			<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'
	})
}

const goToDetail = (item) => {
	if (!item?.id) return
	uni.navigateTo({
		url: `/pages/checklist/detail?id=${item.id}`
	})
}

onShow(() => {
	fetchList()
})
</script>

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

.checklist-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-main {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.card-info {
	flex: 1;
	min-width: 0;
}

.card-name {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

.card-meta {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.meta-dot {
	margin: 0 8rpx;
}

.detail-btn {
	flex-shrink: 0;
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0;
	margin: 0;
	background: #fff;
	border: 2rpx solid #2667E9;
	border-radius: 30rpx;
	color: #2667E9;
	font-size: 26rpx;

	&::after {
		border: none;
	}
}

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

	&::after {
		border: none;
	}
}
</style>
