<template>
	<view class="page-container">
		<!-- 任务信息 -->
		<div class="card-container">
			<div class="card-header" @click="toggleCollapse">
				<span class="title">任务信息</span>
				<span style="color: #007AFF">{{ collapsed ? '展开' : '收起' }}</span>
			</div>

			<view v-show="!collapsed">
				<uni-forms :model="item" label-width="170rpx" :border="true">
					<uni-forms-item label="单位：" name="unitName">
						<span class="form-item">{{ item.unitName }}</span>
					</uni-forms-item>
					<uni-forms-item label="工程：" name="proName">
						<span class="form-item">{{ item.proName }}</span>
					</uni-forms-item>
					<uni-forms-item label="单号：" name="code">
						<span class="form-item">{{ item.code }}</span>
					</uni-forms-item>
					<uni-forms-item label="人员：" name="fieldPerson">
						<span class="form-item">{{ item.fieldPerson }}</span>
					</uni-forms-item>
					<uni-forms-item label="电话：" name="phone">
						<span class="form-item">{{ item.phone }}</span>
					</uni-forms-item>
				</uni-forms>
			</view>
		</div>

		<!-- 维修物资 -->
		<div class="card">
			<div class="card-header">
				<span class="title">维修物资</span>
			</div>
			<div class="select-area">
				<uni-row :gutter="24" style="display: flex; align-items: center">
					<uni-col :span="10">
						<view>
							<uni-data-select v-model="typeId" placeholder="请选择物资类型" :localdata="maTypeSelectList"
								@change="getMaCode" filterable>
							</uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="10">
						<view>
							<uni-data-select v-model="typeCode" placeholder="请选择规格型号" :localdata="maCodeSelectList"
								@change="selectMaCode">
							</uni-data-select>
						</view>
					</uni-col>
				</uni-row>
			</div>
			<scroll-view scroll-y class="scroll-container" @scrolltolower="onScrollTolower">
				<view v-for="(item, index) in typeList" :key="index" class="table-list-item">
					<div class="title">
						<div class="title-left">
							<span class="code">{{ item.materialName }}</span>
						</div>
						<div class="status-tag">
							<view @click.stop="deleteItem(item)" style="padding-right: 10rpx;">
								<uni-icons type="trash" size="24" color="#ff0000" />
							</view>

						</div>
					</div>
					<view class="line"></view>
					<template v-for="field in fieldMap" :key="field.label">
						<uni-row :gutter="24">
							<uni-col :span="field.labelSpan">{{ field.label }}：</uni-col>
							<uni-col :span="field.valueSpan">
								<view class="cont">
									{{ field.formatter ? field.formatter(item[field.key]) : (item[field.key] ?? field.default ?? '无') }}
								</view>
							</uni-col>
						</uni-row>
					</template>
					<uni-row :gutter="24">
						<uni-col :span="8">配件数量：</uni-col>
						<uni-col :span="16">
							<view class="cont">
								<uni-data-select v-model="item.charge" placeholder="请选择规格型号" :localdata="charge"
									@change="selectMaCode">
								</uni-data-select>
							</view>
						</uni-col>
					</uni-row>
					<uni-row :gutter="24">
						<uni-col :span="8">配件数量：</uni-col>
						<uni-col :span="16">
							<view class="cont">
								<uni-easyinput type="number" v-model="item.preNum" @input="onChangeNumber(item)"
									placeholder="输入数值" style="flex: 1;" />
							</view>
						</uni-col>
					</uni-row>
				</view>
			</scroll-view>
		</div>

		<!-- 底部按钮 -->
		<div class="footer-btn">
			<button class="btn-cont" @click="submitNum">确认</button>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getUseType,
		insertDetails
	} from '@/services/fieldMaintenance/fieldMaintenance.js'
	const maCodeSelectList = ref([])
	const charge = ref([{
		value: 1,
		text: '是',
	}, {
		value: 0,
		text: '否',
	}])
	const maTypeSelectList = ref([])
	const item = ref({})
	const typeId = ref("") //类型
	const typeCode = ref("") //规格型号
	const collapsed = ref(true)
	const typeList = ref([])
	const fieldMap = [{
			label: '规格型号',
			key: 'typeName',
			labelSpan: 8,
			valueSpan: 16
		},
		{
			label: '在用数',
			key: 'num',
			labelSpan: 8,
			valueSpan: 16
		}
	]
	const getMaType = () => {
		let obj = {
			"agreementId": item.value.agreementId,
		}
		getUseType(obj).then(res => {
			console.log(res)
			maTypeSelectList.value = res.data.map(option => {
				return {
					value: option.typeId,
					text: option.typeName,
				}
			});
		}).catch(error => {
			console.log(error)
		})
	}
	//规格
	const getMaCode = () => {
		let obj = {
			"agreementId": item.value.agreementId,
			"typeId": typeId.value
		}
		getUseType(obj).then(res => {
			console.log(res)
			maCodeSelectList.value = res.data.map(option => {
				let obj = {
					...option,
					bmFileInfos: [],
					value: option.typeId,
					text: option.typeName,
				}
				return obj
			});
		}).catch(error => {
			console.log(error)
		})
	}
	const generateUniqueId = () => {
		return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
	};

	const deleteItem = (item) => {
		typeList.value = typeList.value.filter(i => i.itemId !== item.itemId);
	};

	// 选择规格型号
	const selectMaCode = (e) => {
		const matched = maCodeSelectList.value.find(item => item.typeId == e);
		if (matched) {
			const itemCopy = JSON.parse(JSON.stringify(matched));
			itemCopy.itemId = generateUniqueId();
			itemCopy.preNum = 0;
			itemCopy.charge = 0;
			itemCopy.taskId = item.value.id;
			typeList.value.push(itemCopy);
		}
		console.log(typeList.value);
	};

	const toggleCollapse = () => (collapsed.value = !collapsed.value)
	const onChangeNumber = (item) => {
		console.log(item)
		let maxNum = Number(item.num)
		// outboundNum.value
		setTimeout(() => {
			if (item.unitValue == 1) {
				item.preNum = Number(String(item.preNum).replace(/[^\d.]/g, ''))
			} else {
				item.preNum = Number(String(item.preNum).replace(/[^\d]/g, ''))
			}
			if (Number(item.preNum) <= 0) {
				item.preNum = 0;
			}
			if (Number(item.preNum) > maxNum) {
				uni.showToast({
					title: '已达到当前资最大在用数量！',
					icon: 'none',
				})
				item.preNum = maxNum;
			}
		}, 500)
	}

	const submitNum = () => {
		console.log(item)
		const jsonData = JSON.stringify(typeList.value);
		console.log(jsonData)
		insertDetails(JSON.parse(jsonData)).then(res => {
			if(res.code==200){
				uni.showToast({ title: '编辑成功', icon: 'none' })
				uni.navigateBack({
					delta: 1 // 返回到已存在的页面
				});
			}else{
				uni.showToast({ title: res.msg, icon: 'none' })
			}
		}).catch(error => {
			console.log(error)
		})
	}

	onLoad((options) => {
		item.value = JSON.parse(options.item)
		getMaType()
	})
</script>

<style lang="scss">
	.page-container {
		display: flex;
		height: 97vh;
		padding: 24rpx;
		flex-direction: column;
		background-color: #f7f8fa;

		.card-container {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			margin-bottom: 24rpx;

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				cursor: pointer;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #262626;
					position: relative;
					padding-left: 24rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6rpx;
						height: 28rpx;
						background: #3784fb;
						border-radius: 6rpx;
					}
				}

				.header-action {
					color: #007aff;
					padding-left: 10rpx;
				}
			}
		}

		.card {
			height: 77vh;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			margin-bottom: 24rpx;
			overflow: hidden;
			/* 超出隐藏 */

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				cursor: pointer;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #262626;
					position: relative;
					padding-left: 24rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6rpx;
						height: 28rpx;
						background: #3784fb;
						border-radius: 6rpx;
					}
				}

				.header-action {
					color: #007aff;
					padding-left: 10rpx;
				}
			}

			.scroll-container {
				padding: 24rpx;
				height: 85%;

				.table-list-item {
					margin: 24rpx 0;
					padding: 24rpx;
					background-color: #fff;
					min-height: 300rpx;
					border-radius: 20rpx;
					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
					transition: all 0.3s ease;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin-bottom: 20rpx;

						.title-left {
							.code {
								font-size: 32rpx;
								font-weight: 300;
								color: #3784fb;
								letter-spacing: 1rpx;
							}
						}

						span.status {
							padding: 8rpx 28rpx;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: 600;

							&.completed {
								background-color: rgba(82, 196, 26, 0.1);
								color: #52c41a;
							}

							&.pending {
								background-color: rgba(250, 140, 22, 0.1);
								color: #fa8c16;
							}
						}
					}

					.line {
						margin: 24rpx 0;
						height: 2rpx;
						background: linear-gradient(90deg,
								rgba(232, 232, 232, 0) 0%,
								rgba(232, 232, 232, 1) 50%,
								rgba(232, 232, 232, 0) 100%);
					}

					:deep(.uni-row) {
						margin-bottom: 20rpx;

						.uni-col-6 {
							color: #8c8c8c;
							font-size: 28rpx;
							font-weight: 500;
						}
					}

					.cont {
						display: flex;
						justify-content: flex-end;
						line-height: 1.8;
						color: #262626;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}

			.loading-text {
				text-align: center;
				font-size: 26rpx;
				color: #8c8c8c;
				padding: 32rpx 0;
				letter-spacing: 1rpx;
			}
		}

		.form-item {
			height: 100%;
			display: flex;
			align-items: center;
		}

		.count-input {
			display: flex;
			align-items: center;
		}

		.footer-btn {
			margin-top: auto;
			padding: 32rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 92%;
			z-index: 999;
			/* 保证在顶层 */
			display: flex;
			justify-content: center;

			.btn-cont {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
				color: #fff;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
					box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
				}
			}
		}
	}
</style>