<template>
	<view class="form-page">
		<form @submit="onSubmit">
			<!-- 开户卡 -->
			<view class="card">
				<view class="form-title">
					开户
				</view>
				<view class="form-group" style="display: flex;align-items: center">
					<label>开户类型:</label>
					<picker mode="selector" :range="accountTypeOptions" @change="onAccountTypeChange" class="input">
						<view class="input-value">{{ selectedAccountType || '请选择开户类型' }}</view>
					</picker>
				</view>
			</view>
			<!-- 千川账户部分 -->
			<view class="card" v-if="selectedAccountType === '千川账户'">
				<view class="form-title">
					千川授权
				</view>
				<view class="form-group">
					<label>授权:</label>
					<view class="radio-group">
						<radio-group @change="onAuthorizationChange"
							style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
							<view v-for="(option, index) in authorizationOptions" :key="index">
								<radio :value="option.value" :checked="selectedAuthorization === option.value" />
								{{ option.label }}
							</view>
						</radio-group>
					</view>
				</view>
				<view class="form-group" style="display: flex;align-items: center">
					<label>报备标签:</label>
					<picker mode="selector" :range="baobeitagOptions" @change="baobeitagChange" class="input">
						<view class="input-value">{{ baobeitag || '请选择报备标签' }}</view>
					</picker>
				</view>
				<view class="form-group">
					<label>店铺ID:</label>
					<input type="text" v-model="shopId" placeholder="请输入店铺ID" class="input" />
				</view>
				<view class="form-group">
					<label>店铺名称:</label>
					<input type="text" v-model="shopName" placeholder="请输入店铺名称" class="input" />
				</view>
				<view class="form-group">
					<label>数量:</label>
					<picker mode="selector" :range="quantityOptions" @change="onQuantityChange" class="input">
						<view class="input-value">{{ selectedQuantity || '请选择数量' }}</view>
					</picker>
				</view>
			</view>
			<!-- 本地推账户部分 -->
			<view class="card" v-if="selectedAccountType === '本地推账户'">
				<view class="form-title">
					本地推账户
				</view>
				<view class="form-group">
					<label>授权:</label>
					<view class="radio-group">
						<radio-group @change="onAuthorizationChange"
							style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
							<view v-for="(option, index) in authorizationOptions" :key="index">
								<radio :value="option.value" :checked="selectedAuthorization === option.value" />
								{{ option.label }}
							</view>
						</radio-group>
					</view>
				</view>
				<view class="form-group" style="display: flex;align-items: center">
					<label>报备标签:</label>
					<picker mode="selector" :range="baobeitagOptions" @change="baobeitagChange" class="input">
						<view class="input-value">{{ baobeitag || '请选择报备标签' }}</view>
					</picker>
				</view>
				<view class="form-group">
					<label>商家账户:</label>
					<input type="text" v-model="shopId" placeholder="请输入商家账户" class="input" />
				</view>
				<view class="form-group">
					<label>商铺名称:</label>
					<input type="text" v-model="shopName" placeholder="请输入商铺名称" class="input" />
				</view>
				<view class="form-group">
					<label>数量:</label>
					<picker mode="selector" :range="quantityOptions" @change="onQuantityChange" class="input">
						<view class="input-value">{{ selectedQuantity || '请选择数量' }}</view>
					</picker>
				</view>
			</view>
			<!-- 巨量广告部分 -->
			<view class="card" v-if="selectedAccountType === '巨量广告'">
				<view class="form-title">
					巨量广告
				</view>
				<view class="form-group_pro">
					<label>授权:</label>
					<view class="radio-group">
						<radio-group @change="onAuthorizationChange"
							style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
							<view v-for="(option, index) in authorizationOptions" :key="index">
								<radio :value="option.value" :checked="selectedAuthorization === option.value" />
								{{ option.label }}
							</view>
						</radio-group>
					</view>
				</view>
				<view class="form-group" style="display: flex;align-items: center"
					v-if="selectedAuthorization === 'ad_new'||selectedAuthorization === 'ad_rekh' ">
					<label>报备标签:</label>
					<picker mode="selector" :range="baobeitagOptions" @change="baobeitagChange" class="input">
						<view class="input-value">{{ baobeitag || '请选择报备标签' }}</view>
					</picker>
				</view>
				<view class="form-group" style="display: flex;align-items: center"
					v-if="selectedAuthorization === 'ad_new'">
					<label>认证方式:</label>
					<picker mode="selector" :range="rztypeOptions" @change="rztypeChange" class="input">
						<view class="input-value">{{ rztype == 0 ? '人脸识别' : rztype == 1 ? '对公打款' : '请选择认证方式'}}</view>
					</picker>
				</view>
				<view class="form-group" v-if="rztype=='1'">
					<label>银行名称:</label>
					<input type="text" v-model="bankname" placeholder="请输入银行名称" class="input" />
				</view>
				<view class="form-group" v-if="rztype=='1'">
					<label>银行账号:</label>
					<input type="text" v-model="bankNo" placeholder="请输入银行账号" class="input" />
				</view>
				<view class="form-group" v-if="selectedAuthorization === 'ad_new'">
					<label>法人邮箱:</label>
					<input type="text" v-model="email" placeholder="请输入法人邮箱" class="input" />
				</view>

				<view class="form-group" v-if="selectedAuthorization === 'ad_new'">
					<label>联系电话:</label>
					<input type="text" v-model="telphone" placeholder="请输入联系电话" class="input" />
				</view>
				<view class="form-group_pro"
					v-if="selectedAuthorization === 'ad_new'||selectedAuthorization === 'ad_rekh'">
					<label>营业执照:</label>
					<FileUploader ref="imageUploader1" />
				</view>
				<view class="form-group_pro" v-if="selectedAuthorization === 'ad_new'">
					<label>身份证:</label>
					<FileUploader ref="imageUploader2" />
				</view>
				<view class="form-group"
					v-if="selectedAuthorization === 'ad_rekh' || selectedAuthorization === 'ad_copy'">
					<label>账户ID:</label>
					<input type="text" v-model="shop_id" placeholder="请输入账户ID" class="input" />
				</view>
				<view class="form-group"
					v-if="selectedAuthorization === 'ad_rekh' || selectedAuthorization === 'ad_copy'">
					<label>账户名称:</label>
					<input type="text" v-model="shop_name" placeholder="请输入账户名称" class="input" />
				</view>
				<view class="form-group_pro"
					v-if="selectedAuthorization === 'ad_new' || selectedAuthorization === 'ad_rekh'">
					<label>投放内容:</label>
					<textarea v-model="Xcontent" placeholder="请输入投放内容" class="input"></textarea>
				</view>
				<view class="form-group"
					v-if="selectedAuthorization === 'ad_new'||selectedAuthorization === 'ad_rekh'||selectedAuthorization === 'ad_copy'  ">
					<label>数量:</label>
					<picker mode="selector" :range="quantityOptions" @change="onQuantityChange" class="input">
						<view class="input-value">{{ selectedQuantity || '请选择数量' }}</view>
					</picker>
				</view>
			</view>
			<button form-type="submit" class="submit-button">提交</button>
		</form>
		<!-- 任务列表卡片 -->
		<view class="task-list">
			<view class="card" v-for="item in missionkList" :key="item.id">
				<view class="form-group">
					<label>任务ID:</label>
					<view class="input-value">{{ item.id }}</view>
				</view>
				<view class="form-group">
					<label>任务类别:</label>
					<view class="input-value">
						{{
		            item.RWtype === 'qc_kh' ? '千川开户' :
		            item.RWtype === 'qc_sq' ? '千川授权' :
		            item.RWtype === 'bdt_kh' ? '本地推开户' :
		            item.RWtype === 'bdt_sq' ? '本地推授权' :
		            item.RWtype === 'ad_jd' ? '巨量广告建档' :
		            item.RWtype === 'ad_kh' ? '巨量广告开户' :
		            item.RWtype === 'ad_rz' ? '巨量广告认证' :
		            item.RWtype === 'ad_sq' ? '巨量广告授权' :
		            item.RWtype === 'ad_copy' ? '巨量广告复制账户' :
		            '未知类型'
		          }}
					</view>
				</view>
				<view class="form-group">
					<label>商户ID:</label>
					<view class="input-value" style="display: flex;justify-content: space-between;align-items: center;">
						{{ item.Shopid ||item.advid }}
						<view class="copy-button" @click="copyToClipboard(item.Shopid)">复制</view>
					</view>
				</view>
				<view class="form-group" v-if="item.RWtype === 'ad_kh'">
					<label>商户名称:</label>
					<view class="input-value">{{ item.ClassName}}</view>
					<view class="input-value">
						{{item.ShopName}}
					</view>
				</view>
				<view class="form-group" v-else-if="item.RWtype==='ad_jd'">
					<label>商户名称:</label>
					<view class="input-value">{{ item.ClassName}}</view>
					<view class="input-value">
						{{item.ShopName}}
					</view>
				</view>
				<view class="form-group">
					<label>创建时间:</label>
					<view class="input-value">{{ item.addtime }}</view>
				</view>
				<view class="form-group" v-if="item.RWState == '处理中'">
					<label>处理时间:</label>
					<view class="input-value">{{ item.updatetime }}</view>
				</view>
				<view class="form-group">
					<label>状态:</label>
					<view class="input-value" :class="{ 'status-failed': item.RWState === '失败' }">{{ item.RWState }}
					</view>
				</view>
				<view class="form-group" v-if="item.RWState === '失败'">
					<label>失败原因:</label>
					<view class="input-value">{{ item.Message }}</view>
				</view>
				<view class="form-group">
					<label>渠道名称:</label>
					<view class="input-value">{{ item.qudaoName }}</view>
				</view>
			</view>
			<view class="card" v-if="missionkList.length==0">
				<o-empty />
			</view>
			<!-- <view class="loading-indicator" v-if="isLoading && !isFinished">
				加载中...
			</view> -->
			<view class="end-of-list" v-if="isFinished">
				已到底
			</view>
		</view>
		<view :style="buttonStyle" class="floating-button" @click="Refresh()">
			<uni-icons type="loop" size="25" color="#ffffff;"></uni-icons>
		</view>
	</view>

</template>

<script>
	import FileUploader from './components/FileUploader.vue'
	export default {
		name: 'FormPage',
		components: {
			FileUploader
		},
		data() {
			return {
				accountTypeOptions: ['千川账户', '本地推账户', '巨量广告'],
				baobeitagOptions: ['自运营', '走量'],
				baobeitag: '',
				authorizationOptions: [],
				quantityOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
				selectedAccountType: '',
				selectedAuthorization: '',
				shopId: '',
				shopName: '',
				selectedQuantity: '',
				email: '',
				telphone: '',
				shop_id: '',
				shop_name: '',
				Xcontent: '',
				// missionkList: [],
				rztypeOptions: ['人脸识别', '对公打款'],
				bankname: '',
				bankNo: '',
				rztype: '0',
				missionkList: [],
				currentPage: 1,
				pagesize: 10,
				isLoading: false,
				isFinished: false
			};
		},
		onLoad() {
			// this.MissionKHList();
		},
		onShow() {
			this.MissionKHList();
		},

		methods: {
			onAccountTypeChange(e) {
				this.selectedAccountType = this.accountTypeOptions[e.detail.value];

				// 动态更新授权选项
				if (this.selectedAccountType === '千川账户') {
					this.authorizationOptions = [{
							value: 'qc_kh',
							label: '已授权'
						},
						{
							value: 'qc_sq',
							label: '未授权'
						}
					];
				} else if (this.selectedAccountType === '本地推账户') {
					this.authorizationOptions = [{
							value: 'bdt_kh',
							label: '已授权'
						},
						{
							value: 'bdt_sq',
							label: '未授权'
						}
					];
				} else if (this.selectedAccountType === '巨量广告') {
					this.authorizationOptions = [{
							value: 'ad_new',
							label: '全新开户'
						},
						{
							value: 'ad_rekh',
							label: '重新开户'
						},
						{
							value: 'ad_copy',
							label: '复制账户'
						}
					];
				}
				// 重置相关字段
				this.shopId = '';
				this.shopName = '';
				this.selectedQuantity = '';
				this.email = '';
				this.telphone = '';
				this.shop_id = '';
				this.shop_name = '';
				this.Xcontent = '';
				this.bankname = '',
					this.bankNo = '',
					this.rztype = '0'
			},
			onAuthorizationChange(e) {
				this.selectedAuthorization = e.detail.value;
				// 重置特定于巨量广告的字段
				if (this.selectedAuthorization === 'ad_new') {
					this.shopId = '';
					this.shopName = '';
					this.selectedQuantity = '';
					this.email = '';
					this.telphone = '';
					this.shop_id = '';
					this.shop_name = '';
					this.Xcontent = '';
					this.bankname = '';
					this.bankNo = '';
					this.rztype = '0';
					this.img1url = '';
					this.img1id = '';
					this.img2url = '';
					this.img2id = '';
					this.baobeitag = ''
					this.$refs.imageUploader1 = ''

				} else if (this.selectedAuthorization === 'ad_rekh' || this.selectedAuthorization === 'ad_copy') {
					this.shopId = '';
					this.shopName = '';
					this.selectedQuantity = '';
					this.email = '';
					this.telphone = '';
					this.shop_id = '';
					this.shop_name = '';
					this.Xcontent = '';
					this.bankname = '';
					this.bankNo = '';
					this.rztype = '0';
					this.img1url = '';
					this.img1id = '';
					this.img2url = '';
					this.img2id = '';
					this.baobeitag = '';
					this.$refs.imageUploader1 = ''

				} else if (this.selectedAuthorization === 'ad_rekh') {
					this.shopId = '';
					this.shopName = '';
					this.selectedQuantity = '';
					this.email = '';
					this.telphone = '';
					this.shop_id = '';
					this.shop_name = '';
					this.Xcontent = '';
					this.bankname = '';
					this.bankNo = '';
					this.rztype = '0';
					this.img1url = '';
					this.img1id = '';
					this.img2url = '';
					this.img2id = '';
					this.baobeitag = ''
					this.$refs.imageUploader1 = ''
				}
			},
			onQuantityChange(e) {
				this.selectedQuantity = this.quantityOptions[e.detail.value];
			},
			baobeitagChange(e) {
				this.baobeitag = this.baobeitagOptions[e.detail.value]
			},
			rztypeChange(e) {
				this.rztype = e.detail.value
			},
			onSubmit(e) {
				if (this.selectedAccountType === '千川账户') {
					if (!this.shopId) {
						uni.showToast({
							title: '请输入店铺ID',
							icon: 'none'
						});
						return;
					}
					if (!this.shopName) {
						uni.showToast({
							title: '请输入店铺名称',
							icon: 'none'
						});
						return;
					}
					if (!this.selectedAuthorization) {
						uni.showToast({
							title: '请选择授权选项',
							icon: 'none'
						});
						return;
					}

					if (!this.baobeitag) {
						uni.showToast({
							title: '请选择报备标签',
							icon: 'none'
						});
						return;
					}
					if (!this.selectedQuantity) {
						uni.showToast({
							title: '请选择数量',
							icon: 'none'
						});
						return;
					}
				}

				const formData = {
					account_type: this.selectedAccountType,
					shop_id: this.shopId,
					shop_name: encodeURIComponent(encodeURIComponent(this.shopName)),
					authorization: this.selectedAuthorization,
					quantity: this.selectedQuantity,
					baobeitag: encodeURIComponent(encodeURIComponent(this.baobeitag))
				};
				if (this.selectedAccountType === '巨量广告') {
					if (this.selectedAuthorization === 'ad_new') {
						if (!this.baobeitag) {
							uni.showToast({
								title: '请选择报备标签',
								icon: 'none'
							});
							return;
						}
						if (!this.rztype) {
							uni.showToast({
								title: '请选择认证方式',
								icon: 'none'
							});
							if (this.rztype == '1') {
								console.log(this.bankname);
								if (!this.bankname) {
									uni.showToast({
										title: '请输入银行名称',
										icon: 'none'
									});
									return
								}
								if (!this.bankNo) {
									uni.showToast({
										title: '请输入银行账号',
										icon: 'none'
									});
									return
								}
							}
						} else {
							console.log(this.rztype);
							if (this.rztype == '1') {
								console.log(this.bankname);
								if (!this.bankname) {
									uni.showToast({
										title: '请输入银行名称',
										icon: 'none'
									});
									return
								}
								if (!this.bankNo) {
									uni.showToast({
										title: '请输入银行账号',
										icon: 'none'
									});
									return
								}
							}
						}
						if (!this.telphone) {
							uni.showToast({
								title: '请输入联系电话',
								icon: 'none'
							});
							return;
						}
						//营业执照
						const imageUploader1 = this.$refs.imageUploader1.getUploadedData() || '';

						if (!imageUploader1.imagePath) {
							uni.showToast({
								title: '请上传营业执照',
								icon: 'none'
							});
							return;
						}
						const imageUploader2 = this.$refs.imageUploader2.getUploadedData() || '';
						if (!imageUploader2.imagePath) {
							uni.showToast({
								title: '请上传身份证',
								icon: 'none'
							});
							return;
						}
						if (!this.Xcontent) {
							uni.showToast({
								title: '请输入投放内容',
								icon: 'none'
							});
							return;
						}
						if (!this.selectedQuantity) {
							uni.showToast({
								title: '请选择数量',
								icon: 'none'
							});
							return;
						}

						formData.img1url = imageUploader1.imagePath
						formData.img1id = imageUploader1.imageId
						//身份证
						formData.img2url = imageUploader2.imagePath
						formData.img2id = imageUploader2.imageId
						formData.Xcontent = this.Xcontent;
						formData.email = this.email;
						formData.telphone = this.telphone;
						formData.rztype = this.rztype,
							formData.bankname = this.bankname,
							formData.bankNo = this.bankNo
					} else if (this.selectedAuthorization === 'ad_rekh' || this.selectedAuthorization === 'ad_copy') {
						if (!this.baobeitag) {
							uni.showToast({
								title: '请选择报备标签',
								icon: 'none'
							});
							return;
						}
						const imageUploader1 = this.$refs.imageUploader1.getUploadedData() || '';
						if (!imageUploader1.imagePath) {
							uni.showToast({
								title: '请上传营业执照',
								icon: 'none'
							});
							return;
						}
						if (!this.shop_id) {
							uni.showToast({
								title: '请输入账户ID',
								icon: 'none'
							});
							return;
						}
						if (!this.shop_name) {
							uni.showToast({
								title: '请输入账户名称',
								icon: 'none'
							});
							return;
						}
						if (!this.selectedQuantity) {
							uni.showToast({
								title: '请选择数量',
								icon: 'none'
							});
							return;
						}

						formData.img1url = imageUploader1.imagePath
						formData.img1id = imageUploader1.imageId
						formData.shop_id = this.shop_id;
						formData.shop_name = this.shop_name;
						formData.Xcontent = this.Xcontent;
					} else if (this.selectedAuthorization === 'ad_new' || this.selectedAuthorization === 'ad_rekh') {
						if (!this.Xcontent) {
							uni.showToast({
								title: '请输入投放内容',
								icon: 'none'
							});
							return;
						}
					}
				}
				this.submitFormData(formData);
			},
			submitFormData(formData) {
				if (!this.selectedAccountType) {
					uni.showToast({
						title: '请选择开户类型',
						icon: 'none'
					});
					return;
				}
				if (!formData.authorization) {
					uni.showToast({
						title: '请选择授权方式',
						icon: 'none'
					});
					return;
				}
				let authorizationValue;

				if (this.selectedAccountType === '千川账户') {
					authorizationValue = formData.authorization === '已授权' ? 'qc_kh' : 'qc_sq';
				} else if (this.selectedAccountType === '本地推账户') {
					authorizationValue = formData.authorization === '已授权' ? 'bdt_kh' : 'bdt_sq';
				} else if (this.selectedAccountType === '巨量广告') {
					authorizationValue = formData.authorization;
				}
				const that =this
				this.$request({
					url: '/APIxcx/MissionKHAdd/',
					method: 'POST',
					data: {
						ApiUser: 'xcx',
						ApiPass: 'sdagtew65447DFG',
						userid: uni.getStorageSync('userid'),
						qudaoid: uni.getStorageSync('selectedChannel').qudaoid,
						shop_id: formData.shop_id,
						shop_name: encodeURIComponent(encodeURIComponent(this.shopName)),
						num: formData.quantity,
						type: authorizationValue,
						email: formData.email || '',
						telphone: formData.telphone || '',
						shop_id: formData.shop_id || '',
						shop_name: formData.shop_name || '',
						Xcontent: encodeURIComponent(encodeURIComponent(formData.Xcontent)) || '',
						img1url: formData.img1url || '',
						img1id: formData.img1id || '',
						img2url: formData.img2url || '',
						img2id: formData.img2id || '',
						baobeitag: formData.baobeitag || '',
						rztype: formData.rztype || '',
						bankname: encodeURIComponent(encodeURIComponent(formData.bankname)) || '',
						bankNo: formData.bankNo || ''
					}
				}).then(item => {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});

					this.MissionKHList();
					this.shopId = '';
					this.shopName = '';
					this.selectedQuantity = '';
					this.email = '';
					this.telphone = '';
					this.shop_id = '';
					this.shop_name = '';
					this.Xcontent = '';
					this.bankname = '';
					this.bankNo = '';
					this.rztype = '0';
					this.img1url = '';
					this.img1id = '';
					this.img2url = '';
					this.img2id = '';
					this.baobeitag = ''
				});
			},

			copyToClipboard(shopId) {
				const textToCopy = 商户ID: ${shopId};
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
						console.error('复制失败:', err);
					}
				});
			},
			Refresh() {
				this.MissionKHList()
			},
			MissionKHList(page) {
				if (this.isLoading || this.isFinished) return;
				this.isLoading = true;

				this.$request({
					url: '/APIxcx/MissionKHList/',
					method: 'POST',
					data: {
						ApiUser: "xcx",
						ApiPass: "sdagtew65447DFG",
						userid: uni.getStorageSync('userid'),
						qudaoid: "", //预留
						type: "",
						pagesize: this.pagesize,
						page: page
					}
				}).then(response => {
					const newList = response.list.map(task => ({
						...task,
						RWState: this.$util.decodeUrl(task.RWState),
						qudaoName: this.$util.decodeUrl(task.qudaoName),
						ShopName: this.$util.decodeUrl(task.ShopName),
						Message: this.$util.decodeUrl(task.Message),
						ClassName: this.$util.decodeUrl(task.ClassName),
						Shopid: task.Shopid // 修改这里，确保Shopid正确赋值
					}));
					console.log(newList);

					if (newList.length > 0) {
						this.missionkList.push(...newList);
						this.currentPage++;
					} else {
						this.isFinished = true;
					}
					this.isLoading = false;
				});
			},

		},
		onReachBottom() {
			this.MissionKHList(this.currentPage);
		},
		mounted() {
			this.MissionKHList(this.currentPage);
		},
		onReady() {
			// 在页面初始化时初始c化 debouncedSubmitFormData
			console.log(this.$util);
			this.debouncedSubmitFormData = this.$util.debounce(this.submitFormData, 5000);
		},
		onUnload() {
			// 在页面卸载时清除定时器
			if (this.debouncedSubmitFormData && this.debouncedSubmitFormData.cancel) {
				this.debouncedSubmitFormData.cancel();
			}
		}
	}
</script>


<style scoped>
	.form-page {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f5f5f5;
		height: 100vh;
		width: 750rpx;
		box-sizing: border-box;
		position: relative;
	}

	form {
		width: 714rpx;
		border-radius: 25rpx;
		margin: 0 auto;
		box-sizing: border-box;
		box-shadow: none;
		/* 移除阴影 */
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.form-title {
		font-size: 32rpx;
		color: #333;
		text-align: left;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.form-group_pro {

		width: 100%;
		border-bottom: 1rpx solid #ccc;
		padding: 10rpx 0;
	}

	.form-group {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1rpx solid #ccc;
		padding: 10rpx 0;
	}

	label {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
		width: 150rpx;
		/* 固定宽度，可以根据需要调整 */
		text-align: left;
	}

	.input {
		flex: 1;
		padding: 10rpx 0;
		/* 调整上下间距 */
		font-size: 28rpx;
		color: #666;
		background-color: transparent;
		line-height: 40rpx;
		/* 调整行高 */
	}

	.input-value {
		font-size: 28rpx;
		color: #666;
		line-height: 40rpx;
	}

	.radio-group {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.radio-group label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
	}

	.submit-button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1aad19;
		color: #ffffff;
		font-size: 35rpx;
		font-weight: 500;
		border-radius: 44rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		margin-top: 20rpx;
	}

	.submit-button:active {
		background-color: #149a15;
		transform: translateY(4rpx);
	}

	.task-list {
		margin-top: 20rpx;
	}

	.task-list .card {
		margin-bottom: 20rpx;
	}

	.task-list .form-group {
		border-bottom: none;
		margin-bottom: 10rpx;
	}

	.task-list .input-value {
		flex: 1;
		padding: 10rpx 0;
		font-size: 28rpx;
		color: #666;
		line-height: 40rpx;
	}

	.task-list .status-failed {
		color: red;
	}

	.copy-button {
		/* 	width: 100rpx;
	height: 60rpx; */
		/* line-height: 60rpx; */
		color: #1aad19;
		/* color: #ffffff; */
		font-size: 24rpx;
		font-weight: 500;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		margin-left: 10rpx;
	}

	.copy-button:active {
		color: #149a15;
		transform: translateY(2rpx);
	}

	.floating-button {
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		width: 70rpx;
		height: 70rpx;
		background-color: #1aad19;
		border-radius: 50%;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 1000;
		transition: background-color 0.3s ease;
		user-select: none;
		/* 防止文本选择 */
		touch-action: none;
		/* 防止默认触摸行为 */
	}

	.floating-button:active {
		background-color: #149a15;
	}
</style>当我提交成功后  重新加载页面