<template>
	<view class="padding page">
		<view class="padding bg-white radius">
			<view class="flex justify-between margin-bottom">
				<view class="text-bold text-black">发现火苗</view>
				<view>已审核</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">隐患日期：</view>
				<view class="text-black">2025-11-11</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">责任单位：</view>
				<view class="text-black">吉首网络有限公司</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">判定人员：</view>
				<view class="text-black">张起</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">创建时间：</view>
				<view class="text-black">2025-11-14 06:33:49</view>
			</view>
			<view class="flex justify-between">
				<view></view>
				<view><button class="bg-blue round cu-btn lg" @click="editor()">查看详情</button></view>
			</view>
		</view>
		<button class="cuIcon-add bg-blue round margin-top" @click="showAddPopup = true">新增</button>
		<!-- 弹出框 -->
		<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>
				<view class="popup-body">
					<view class="flex margin-bottom">
						<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>
					<view>
						<up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker>
					</view>
					<view class="margin-bottom margin-top">隐患治理责任单位</view>
					<up-input placeholder="请输入隐患治理责任单位"></up-input>
					<view class="margin-bottom margin-top">主要负责人</view>
					<up-input placeholder="请输入主要负责人"></up-input>
					<view class="margin-bottom margin-top">主要治理内容</view>
					<up-textarea v-model="value" placeholder="请输入主要治理内容" ></up-textarea>
					<view class="margin-bottom margin-top">隐患治理完成内容</view>
					<up-textarea v-model="value" placeholder="请输入隐患治理完成情况" ></up-textarea>
					<view class="margin-bottom margin-top">隐患治理责任单位自行验收的情况</view>
					<up-textarea v-model="value" placeholder="请输入隐患治理责任单位自行验收的情况" ></up-textarea>
				</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
	} from 'vue'

	// 弹窗控制
	const showAddPopup = ref(false);

	// 确定新增
	const handleAdd = () => {
		// 在这里处理新增逻辑
		showAddPopup.value = false;
		uni.showToast({
			title: '新增成功',
			icon: 'success'
		});
	};
	// 整改时限
	const value1 = ref(Date.now());
	const editor = () => {
		uni.navigateTo({
				url: '/pages/closeout/editor'
			})
	}
</script>

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

	.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;
			color: #333;
		}

		.popup-close {
			font-size: 40rpx;
			color: #999;
			line-height: 1;
		}
	}

	.popup-body {
		padding: 30rpx;
		max-height: 800rpx;
		overflow-y: auto;
	}

	.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: #fff;
			color: #666;
		}

		.btn-confirm {
			color: #fff;
		}
	}
</style>