<template>
	<scroll-view class="plan-detail-container" scroll-y @scrolltolower="loadMoreMaterials" lower-threshold="100"
		@refresherrefresh="refreshMaterials" refresher-enabled="true" :refresher-triggered="materialLoading">
		<!-- 计划信息卡片 -->
		<view class="plan-info-card">
			<view class="plan-info-header">
				<text class="plan-info-title">盘点计划详情</text>
			</view>
			
			<view class="plan-info-content">
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">计划名称</text>
						<text class="info-value">{{planInfo.name || '暂无'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">计划编号</text>
						<text class="info-value">{{planInfo.no || '暂无'}}</text>
					</view>
				</view>
				
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">盘点类型</text>
						<text class="info-value type-text">{{getTypeText(planInfo.type)}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">物资数量</text>
						<text class="info-value count-text">{{planInfo.chart_total || 0}} 项</text>
					</view>
				</view>
				
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">开始时间</text>
						<text class="info-value">{{formatDate(planInfo.start_date)}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">结束时间</text>
						<text class="info-value">{{formatDate(planInfo.end_date)}}</text>
					</view>
				</view>
				
				<view class="status-row">
					<view class="status-item">
						<text class="status-label">计划状态</text>
						<view class="status-badge" :class="'status-' + planInfo.status">
							<text class="status-text">{{getStatusText(planInfo.status)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 物资列表 -->
		<view class="material-list-card">
			<view class="material-list-header">
				<text class="material-list-title">盘点物资列表</text>
				<text class="material-count">共 {{materialTotal}} 项</text>
			</view>
			
			<!-- 表头 -->
			<view class="material-list">
				<view class="material-item" style="font-weight:600;">
					<view class="material-info material-name-col">
						<text class="material-name">物资名称</text>
					</view>
					<view class="material-info material-model-col">
						<text class="material-time">物资型号</text>
					</view>
					<view class="material-info material-spec-col">
						<text class="material-time">物资规格</text>
					</view>
					<view class="material-info material-status-col">
						<text class="material-time">状态</text>
					</view>
					<view class="material-info material-action-col">
						<text class="material-time">操作</text>
					</view>
				</view>
				<!-- 数据行 -->
				<view class="material-item" v-for="item in materialList" :key="item.id">
					<view class="material-info material-name-col">
						<text class="material-name">{{item.inventory?.zichanmingcheng || '未知物资'}}</text>
					</view>
					<view class="material-info material-model-col">
						<text class="material-time">{{item.inventory?.guigexinghao || '暂无'}}</text>
					</view>
					<view class="material-info material-spec-col">
						<text class="material-time">{{item.inventory?.wuziguige || '暂无'}}</text>
					</view>
					<view class="material-info material-status-col">
						<text class="material-status" :class="'status-' + (item.status || 0)">{{getInventoryStatusText(item.status)}}</text>
					</view>
					<view class="material-info material-action-col">
						<view class="inventory-action-btn" @click.stop="startInventory(item)">
							<text class="inventory-btn-text">盘点</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="materialLoading">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			<view class="load-more" v-else-if="!materialHasMore && materialList.length > 0">
				<text class="no-more-text">— 没有更多数据了 —</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { getInventoryMaterialList } from '@/api.js';
	
	export default {
		data() {
			return {
				planId: null, // 计划ID
				planInfo: {}, // 计划信息
				materialList: [], // 物资列表
				materialPage: 1, // 当前页码
				materialPageSize: 10, // 每页数量
				materialTotal: 0, // 总数
				materialLoading: false, // 加载状态
				materialHasMore: true // 是否还有更多数据
			}
		},
		
		onLoad(options) {
			// 获取传入的计划信息
			if (options.planInfo) {
				try {
					this.planInfo = JSON.parse(decodeURIComponent(options.planInfo));
					this.planId = this.planInfo.id;
				} catch (e) {
					console.error('解析计划信息失败:', e);
				}
			}
			
			if (options.planId) {
				this.planId = options.planId;
			}
			
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: this.planInfo.name || '盘点计划详情'
			});
			
			// 加载物资列表
			this.getMaterialList(true);
		},
		
		methods: {
			// 获取物资列表
			async getMaterialList(isRefresh = false) {
				if (this.materialLoading || !this.planId) return;
				
				try {
					this.materialLoading = true;
					
					// 如果是刷新，重置页码
					if (isRefresh) {
						this.materialPage = 1;
						this.materialHasMore = true;
					}
					
					const params = {
						page: this.materialPage,
						page_size: this.materialPageSize,
						'filter[0][key]': 'material_infos_plan_id',
						'filter[0][op]': 'eq',
						'filter[0][value]': this.planId
					};
					
					const res = await getInventoryMaterialList(params);
					console.log("物资列表响应:", res);
					
					// 处理登录失效
					if(res.data && res.data.errcode === 40001){
						uni.showToast({
							title: res.data?.errmsg || '获取物资列表失败',
							icon: 'none'
						});
						uni.reLaunch({
							url: '/pages/login/login'
						});
						return;
					}
					
					if (res.data && res.data.list) {
						const data = res.data.list;
						const newList = data.data || [];
						
						if (isRefresh) {
							this.materialList = newList;
						} else {
							this.materialList = [...this.materialList, ...newList];
						}
						
						this.materialTotal = data.total || 0;
						this.materialHasMore = newList.length === this.materialPageSize;
						
						if (this.materialHasMore) {
							this.materialPage++;
						}
					} else {
						uni.showToast({
							title: res.data?.message || '获取物资列表失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取物资列表失败:', error);
					uni.showToast({
						title: '获取物资列表失败',
						icon: 'none'
					});
				} finally {
					this.materialLoading = false;
				}
			},
			
			// 刷新物资列表
			refreshMaterials() {
				this.getMaterialList(true);
			},
			
			// 加载更多物资
			loadMoreMaterials() {
				if (!this.materialHasMore || this.materialLoading) return;
				this.getMaterialList(false);
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '未开始',
					1: '进行中', 
					2: '已完成'
				};
				return statusMap[status] || '未知状态';
			},
			
			// 获取盘点类型文本
			getTypeText(type) {
				const typeMap = {
					1: '年度',
					2: '季度'
				};
				return typeMap[type] || '未知类型';
			},
			
			// 获取盘点状态文本
			getInventoryStatusText(status) {
				const statusMap = {
					0: '待盘点',
					1: '已盘点'
				};
				return statusMap[status] || '待盘点';
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 开始盘点
			startInventory(item) {
				console.log('开始盘点物资:', item);
				// uni.showToast({
				// 	title: `开始盘点: ${item.name}`,
				// 	icon: 'none'
				// });
				if(item.inventorys_id){
					uni.navigateTo({
					    url: `/pages/inventory/inventory?code=${item.inventorys_id}`
					});
				}else{
					uni.showToast({
						title: '暂无盘点信息',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	.plan-detail-container {
		height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	/* 计划信息卡片样式 */
	.plan-info-card {
		background: #fff;
		border-radius: 22rpx;
		box-shadow: 0 4px 18px rgba(64,158,255,0.07);
		padding: 28rpx 24rpx;
		margin-bottom: 24rpx;
	}

	.plan-info-header {
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 2px solid #f0f0f0;
	}

	.plan-info-title {
		font-size: 32rpx;
		color: #222;
		font-weight: 700;
	}

	.plan-info-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.info-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.info-label {
		font-size: 22rpx;
		color: #999;
		font-weight: 500;
	}

	.info-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
	}

	.type-text {
		color: #409eff;
	}

	.count-text {
		color: #52c41a;
	}

	.status-row {
		display: flex;
		justify-content: center;
		margin-top: 16rpx;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.status-label {
		font-size: 22rpx;
		color: #999;
		font-weight: 500;
	}

	.status-badge {
		padding: 12rpx 24rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.status-badge.status-0 {
		background: linear-gradient(135deg, #fff3e0, #ffe0b2);
		color: #f57c00;
		border: 1px solid #ffcc80;
	}

	.status-badge.status-1 {
		background: linear-gradient(135deg, #e3f2fd, #bbdefb);
		color: #1976d2;
		border: 1px solid #90caf9;
	}

	.status-badge.status-2 {
		background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
		color: #388e3c;
		border: 1px solid #a5d6a7;
	}

	/* 物资列表卡片样式 */
	.material-list-card {
		background: #fff;
		border-radius: 22rpx;
		box-shadow: 0 4px 18px rgba(64,158,255,0.07);
		padding: 28rpx 24rpx 18rpx 24rpx;
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.material-list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.material-list-title {
		font-size: 28rpx;
		color: #222;
		font-weight: 700;
	}

	.material-count {
		font-size: 24rpx;
		color: #409eff;
		font-weight: 600;
	}


	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		color: #999;
	}

	.empty-text {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 22rpx;
	}

	/* 物资列表表格样式 */
	.material-list {
		display: flex;
		flex-direction: column;
		gap: 14rpx;
	}

	.material-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 0;
		border-bottom: 1px solid #f0f0f0;
		width: 100%;
		box-sizing: border-box;
	}

	.material-item:last-child {
		border-bottom: none;
	}

	.material-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
	}

	.material-name-col {
		flex: 1;
		min-width: 0;
		max-width: 200rpx;
	}

	.material-model-col {
		width: 180rpx;
		min-width: 0;
	}

	.material-spec-col {
		width: 120rpx;
		min-width: 0;
	}

	.material-status-col {
		width: 100rpx;
		align-items: center;
	}

	.material-action-col {
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.material-name {
		font-size: 24rpx;
		color: #333;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.material-time {
		font-size: 20rpx;
		color: #999;
		margin-top: 2rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.material-status {
		font-size: 18rpx;
		padding: 4rpx 10rpx;
		border-radius: 16rpx;
		white-space: nowrap;
	}

	.material-status.status-0 {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.material-status.status-1 {
		background-color: #e8f5e9;
		color: #388e3c;
	}

	.completed-text {
		color: #388e3c;
		font-size: 20rpx;
		font-weight: 500;
	}

	.inventory-action-btn {
		background: linear-gradient(135deg, #409eff, #66b1ff);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		padding: 8rpx 16rpx;
		font-size: 22rpx;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(64,158,255,0.3);
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		min-width: 80rpx;
	}

	.inventory-action-btn:active {
		transform: scale(0.95);
		box-shadow: 0 1px 4px rgba(64,158,255,0.4);
		opacity: 0.9;
	}

	.inventory-btn-text {
		color: #fff;
		font-size: 22rpx;
		font-weight: 500;
	}

	/* 加载更多样式 */
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 30rpx 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid #f0f0f0;
		border-top: 3rpx solid #409eff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		color: #409eff;
		font-weight: 500;
	}

	.no-more-text {
		color: #ccc;
		font-size: 22rpx;
	}
</style>
