<template>
	<view class="padding">
		<view class="padding">
			<view class="text-gray  text-center margin-top-xl margin-bottom-xl">暂无设备</view>
			<button class="cuIcon-add round bg-blue" @click="toAdd">新增</button>
		</view>

		<!-- 新增弹出框 -->
		<u-popup :show="showAddPopup" mode="center" round="20" @close="showAddPopup = false">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title text-bold">新增设备</view>
					<view class="popup-close" @click="showAddPopup = false">×</view>
				</view>
				<scroll-view class="popup-body" scroll-y :style="{ height: '60vh' }">
					<!-- 在这里填写表单内容 -->
					<view class="flex">
						<view class=" margin-bottom">型号</view>
						<view class="text-red">*</view>
					</view>
					<up-input placeholder="请输入型号"></up-input>
					<view class="flex margin-bottom margin-top">
						<view >名称</view>
						<view class="text-red">*</view>
					</view>
					<up-input placeholder="请输入名称"></up-input>
					<view class=" margin-bottom margin-top">参数</view>
					<up-input placeholder="请输入参数"></up-input>
					<view class="flex margin-bottom margin-top">
						<view>数量(单位：台)</view>
						<view class="text-red">*</view>
					</view>
					<up-input placeholder="请输入数量"></up-input>
					<view class="flex margin-bottom margin-top">
						<view >购买时间</view>
						<view class="text-red">*</view>
					</view>
					<up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker>
					<view class="flex margin-bottom margin-top">
						<view >设备预警时间</view>
						<view class="text-red">*</view>
					</view>
					<up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker>
					<view class="flex margin-bottom margin-top">
						<view >区域</view>
						<view class="text-red">*</view>
					</view>
					<up-input placeholder="请输入区域"></up-input>
					<view class="margin-top-sm margin-bottom-sm margin-bottom margin-top">上传资料</view>
					<view class="upload-area" @click="chooseFile">
						<view class="upload-icon">
							<text class="cuIcon-upload" style="font-size: 60rpx; color: #999;"></text>
						</view>
						<view class="upload-text">点击选择文件</view>
						<view class="upload-tip">支持Word、Excel、PDF、图片等格式</view>
						<button class="cu-but bg-blue">选择文件</button>
					</view>
					<!-- 已上传文件列表 -->
					<view class="file-list" v-if="fileList.length > 0">
						<view class="file-item" v-for="(file, index) in fileList" :key="index">
							<text class="file-name">{{ file.name }}</text>
							<text class="file-delete text-red" @click.stop="removeFile(index)">×</text>
						</view>
					</view>
					<view class="margin-top-sm margin-bottom margin-top">备注</view>
					<up-textarea v-model="value1" placeholder="请输入备注"></up-textarea>
				</scroll-view>
				<view class="popup-footer">
					<button class="btn-cancel" @click="showAddPopup = false">取消</button>
					<button class="btn-confirm bg-blue" @click="handleAdd">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// 弹出框显示状态
	const showAddPopup = ref(false);

	// 文件列表
	const fileList = ref([]);

	// 打开新增弹出框
	const toAdd = () => {
		showAddPopup.value = true;
	};

	// 选择文件
	const chooseFile = () => {
		uni.chooseMessageFile({
			count: 10,
			type: 'all',
			success: (res) => {
				const files = res.tempFiles.map(file => ({
					name: file.name,
					path: file.path,
					size: file.size
				}));
				fileList.value = [...fileList.value, ...files];
			},
			fail: () => {
				// 如果不支持chooseMessageFile，使用chooseImage
				uni.chooseImage({
					count: 9,
					success: (res) => {
						const files = res.tempFilePaths.map((path, index) => ({
							name: `文件${fileList.value.length + index + 1}`,
							path: path,
							size: 0
						}));
						fileList.value = [...fileList.value, ...files];
					}
				});
			}
		});
	};

	// 移除文件
	const removeFile = (index) => {
		fileList.value.splice(index, 1);
	};

	// 确定新增
	const handleAdd = () => {
		// 在这里处理新增逻辑

		showAddPopup.value = false;
		uni.showToast({
			title: '新增成功',
			icon: 'success'
		});
	};
	// 选择时间
	const show = ref(false);
	const value1 = ref(Date.now());
</script>

<style lang="scss" scoped>
	.popup-content {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.popup-title {
		font-size: 32rpx;
	}

	.popup-close {
		font-size: 40rpx;
		color: #999;
		cursor: pointer;
	}

	.popup-body {
		padding: 30rpx;
	}

	.popup-footer {
		display: flex;
		border-top: 1rpx solid #eee;

		button {
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 0;
			font-size: 30rpx;

			&::after {
				border: none;
			}
		}

		.btn-cancel {
			background: #f5f5f5;
			color: #666;
		}

		.btn-confirm {
			color: #fff;
		}
	}

	// 上传区域样式
	.upload-area {
		background: #F8F8F;
		border: 2rpx dashed #C5D4F5;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 16rpx;
	}

	.upload-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 24rpx;
	}

	.upload-btn {
		padding: 16rpx 48rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 40rpx;
	}

	// 文件列表样式
	.file-list {
		margin-top: 20rpx;
	}

	.file-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 20rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		margin-bottom: 12rpx;
	}

	.file-name {
		font-size: 26rpx;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.file-delete {
		font-size: 36rpx;
		padding-left: 20rpx;
	}
</style>