<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar :title="type+'车辆'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
			:border="false">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y="true">
			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 车牌号 -->
				<view class="form-item">
					<view class="item-label">车牌号</view>
					<input class="item-input" v-model="formData.plateNo" placeholder="请输入"
						placeholder-class="input-placeholder" @blur="inputChange('车牌号')" />
				</view>


				<!-- 车辆品牌选择 -->
				<view class="form-item" @click="selectItem('车辆品牌')">
					<text class="item-label">车辆品牌</text>
					<text class="item-placeholder"
						:class="{selected:formData.carBrandName}">{{ formData.carBrandName || '请选择' }}</text>
					<text class="item-arrow"></text>
				</view>

				<!-- 车辆型号 -->
				<view class="form-item">
					<view class="item-label">车辆型号</view>
					<input class="item-input" v-model="formData.model" placeholder="请输入"
						placeholder-class="input-placeholder" @blur="inputChange('车辆型号')" />
				</view>

				<!-- 车辆颜色 -->
				<view class="form-item">
					<view class="item-label">车辆颜色</view>
					<input class="item-input" v-model="formData.color" placeholder="请输入"
						placeholder-class="input-placeholder" @blur="inputChange('车辆颜色')" />
				</view>

				<!-- 车辆图片上传 -->
				<view class="form-item upload-item">
					<view class="item-label">车辆图片</view>
					<view class="upload-box" @click="chooseImage">
						<!-- 未上传：显示加号+文字 -->
						<view v-if="!formData.carImg" class="upload-tip">
							<text class="plus-icon">+</text>
							<text class="upload-text">上传照片</text>
						</view>
						<!-- 已上传：显示图片 -->
						<image v-else :src="formData.carImg" class="car-image" mode="aspectFill" />
					</view>
				</view>
			</view>





		</scroll-view>
		<!-- 底部下一步按钮 -->
		<view class="bottom-btn-wrap">
			<button class="next-btn" @click="saveCar">保存</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {


		},

		created() {

		},
		onShow() {

		},
		onLoad(option) {
			if (uni.getStorageSync('operationType') == 'update') {
				this.id = option.id;
				this.type = '修改';
				//根据id获取回显数据
				this.formData.plateNo = '京A88888';
				this.formData.carBrandName = '宝马';
				this.formData.model = 'X5';
				this.formData.color = '白色';
				this.formData.carImg = '/static/propertyImgs/carImg.png';
				this.formData.carBrandId = '1';

			} else if (uni.getStorageSync('operationType') == 'add') {
				this.id = undefined;
				this.type = '添加';
			}

		},

		onUnload() {},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				id: undefined,
				type: '',
				// 表单数据
				formData: {
					plateNo: uni.getStorageSync('plateNo'),
					carBrandName: uni.getStorageSync('carBrandName'),
					model: uni.getStorageSync('model'),
					color: uni.getStorageSync('color'),
					carImg: uni.getStorageSync('carImg') // 车辆图片路径
				}
			}
		},


		methods: {
			inputChange(type) {
				if (type == '车牌号') {

					uni.setStorageSync('plateNo', this.formData.plateNo)
				} else if (type == '车辆型号') {
					uni.setStorageSync('model', this.formData.model)
				} else if (type == '车辆颜色') {
					uni.setStorageSync('color', this.formData.color)
				}



			},
			// 选择图片（上传照片）
			chooseImage() {
				uni.chooseImage({
					count: 1, // 只选1张
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"], // 相册/相机
					success: (res) => {
						// 赋值图片路径
						uni.setStorageSync('carImg', res.tempFilePaths[0]);
						this.formData.carImg = res.tempFilePaths[0];
					}
				});
			},

			// 保存车辆信息
			saveCar() {
				// 表单校验
				if (!this.formData.plateNo) {
					return uni.showToast({
						title: "请输入车牌号",
						icon: "none"
					});
				}
				if (!this.formData.carBrandName) {
					return uni.showToast({
						title: "请输入车辆品牌",
						icon: "none"
					});
				}
				if (!this.formData.model) {
					return uni.showToast({
						title: "请输入车辆型号",
						icon: "none"
					});
				}
				if (!this.formData.color) {
					return uni.showToast({
						title: "请输入车辆颜色",
						icon: "none"
					});
				}

				uni.showModal({
					title: '确认提交',
					content: '保存后进入审核',
					success: (res) => {

						uni.showLoading({
							title: '提交中...',
							mask: true
						});
						setTimeout(() => {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
						}, 1000);
						setTimeout(() => {
							// 提交成功后跳转列表页
							uni.hideLoading();
							this.goBack();
						}, 3000);
					}
				})
			},




			// 选择项点击事件（可替换为picker/弹窗选择）
			selectItem(type) {
				if (type === '车辆品牌') {
					uni.redirectTo({
						url: '/pages/my/selectCarBrand',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			goBack() {

				uni.removeStorageSync('plateNo');
				uni.removeStorageSync('carBrandName');
				uni.removeStorageSync('model');
				uni.removeStorageSync('color');
				uni.removeStorageSync('carImg');
				uni.removeStorageSync('carBrandId');
				uni.removeStorageSync('checkType');
				// if (uni.getStorageSync('operationType') == 'update') {
				// 	uni.redirectTo({
				// 		url: '/pages/my/houseDetail?id=' + this.id,
				// 		success: res => {},
				// 		fail: () => {},
				// 		complete: () => {}
				// 	});
				// } else if (uni.getStorageSync('operationType') == 'add') {
				uni.redirectTo({
					url: '/pages/my/myCarIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				// }

			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style>
	/* 全局样式：去掉switch的×号，保证开关纯净 */
	.my-switch::before {
		display: none !important;
	}

	.my-switch {
		background-color: #e5e5e5 !important;
		border: none !important;
		width: 90rpx !important;
		height: 48rpx !important;
		border-radius: 50rpx !important;
	}

	.my-switch[checked="true"] {
		background-color: #1677ff !important;
	}

	.my-switch::after {
		width: 44rpx !important;
		height: 44rpx !important;
		border-radius: 50% !important;
		margin: 2rpx !important;
	}
</style>

<style scoped>
	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		background-color: #fff;
	}



	/* 步骤条 */
	.step-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 15px 20rpx;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.step-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ccc;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin-bottom: 16rpx;
	}

	.step-item.active .step-circle {
		background-color: #1677ff;
	}

	.step-text {
		font-size: 14px;
		color: #999;
	}

	.step-item.active .step-text {
		color: #1677ff;
		font-weight: 500;
	}

	.step-line {
		width: 150rpx;
		height: 4rpx;
		background-color: #ccc;
		margin: 0 20rpx;
		margin-bottom: 40rpx;
	}

	/* 表单容器 */
	.form-container {
		padding: 0 0px;
		/* height: calc(100vh - 220px); */
		/* overflow-y: scroll; */

	}

	/* 表单项 */
	.form-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-label {
		font-size: 14px;
		color: #000;
		width: 90px;
		font-weight: 600;
	}

	.item-placeholder {
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.item-placeholder.selected {
		flex: 1;
		font-size: 14px;
		color: #333;
	}


	.item-arrow {
		display: inline-block;
		width: 5px;
		height: 5px;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right: 5px;
	}

	/* 开关项 */
	.switch-item {
		justify-content: space-between;
	}

	/* 底部按钮 */
	.bottom-btn-wrap {
		padding: 10px 15px 20px;
		display: flex;
		gap: 20rpx;
		background-color: #fff;
	}

	.next-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 12rpx;
		border: none;
	}
</style>
<style>
	/* 注意：这里不能加 scoped！必须写全局样式 */

	/* 隐藏 switch 关闭状态的 × 号 */
	.no-cross-switch::before {
		display: none !important;
	}

	.no-cross-switch {
		transform: scale(0.85);
		border-radius: 50rpx !important;
	}

	.no-cross-switch>>>.uni-switch-input-checked {
		background-color: #007aff !important;
	}
</style>
<style scoped>
	/* 表单项 —— 和你页面保持一致 */
	.form-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.label {
		font-size: 14px;
		color: #000;
		width: 90px;
		font-weight: 600;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 14px;
		color: #999;
		margin-right: 10rpx;
	}

	.arrow {
		font-size: 28rpx;
		color: #ccc;
	}

	/* 遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	/* 底部弹出框 */
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 100;
		max-height: 60vh;
	}

	.popup-header {
		padding: 15px;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.close {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #666;
	}

	/* 选项列表 */
	.list {
		padding: 0 15px;
	}

	.item {
		padding: 15px 0;
		text-align: center;
		font-size: 14px;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.item:last-child {
		border-bottom: none;
	}
</style>
<style scoped>
	/* 表单 */


	.form-item {
		display: flex;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		position: relative;
	}

	.label {
		width: 180rpx;
		font-size: 14px;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 14px;
		text-align: left;
		color: #333;
	}

	.ph {
		color: #999 !important;
	}

	.arrow-item::after {
		content: '>';
		position: absolute;
		right: 0;
		color: #ccc;
		font-size: 28rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 14px;
		color: #999;
		padding-right: 40rpx;
	}

	.item-input {
		flex: 1;
		height: 40rpx;
		font-size: 14px;
		color: #333;
		border: none;
		outline: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999 !important;
		font-size: 14px !important;
	}

	/* ===================== 图片上传区域 ===================== */
	.upload-item {
		align-items: flex-start;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		border-bottom: none;
	}

	.upload-box {
		width: 280rpx;
		height: 280rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
	}

	.upload-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.plus-icon {
		font-size: 80rpx;
		color: #999;
		line-height: 1;
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #999;
	}

	.car-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	/* 弹窗遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 100;
		max-height: 60vh;
	}

	.popup-header {
		padding: 15px;
		text-align: center;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
	}

	.close {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #666;
	}

	.popup-list {
		padding: 0 15px;
		max-height: 40vh;
		overflow-y: auto;
	}

	.item {
		padding: 15px 0;
		text-align: center;
		font-size: 14px;
		border-bottom: 1rpx solid #f5f5f5;
	}

	/* 成功提示弹窗 */
	.toast-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		z-index: 9999;
	}

	.toast-content {
		background-color: rgba(0, 0, 0, 0.8);
		padding: 40rpx 60rpx;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toast-icon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #1677ff;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toast-text {
		color: #fff;
		font-size: 28rpx;
	}
</style>