<template>
	<view class="box" style="position: relative;">
		<image @click="back" class="bg_back"
			src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
		<view class="bg">
			<view class="user-info">
				<view class="item">
					<view class="lable">
						户主姓名
					</view>
					<view class="value">
						<u--input v-model="formData.name" color='#7A7A7A' border="none"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="lable">
						联系方式
					</view>
					<view class="value">
						<u--input v-model="formData.contact" color='#7A7A7A' border="none"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="lable">
						家庭人数
					</view>
					<view class="value">
						<u--input v-model="formData.family_count" color='#7A7A7A' border="none"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="lable">
						家庭地址
					</view>
					<view class="value" style="width: 400rpx;">
						<u--input v-model="formData.address" color='#7A7A7A' border="none"></u--input>
					</view>
				</view>
			</view>
		</view>

		<view class="tit">
			<view class="">
				助民惠农
			</view>
			<view class="">
				{{saveNum}}/5
			</view>
		</view>

		<!-- content -->
		<view class="">
			<view class="card">
				<view class="card-tit">
					<view class="" style="font-size: 32rpx;color: #7A7A7A;display: flex;align-items: center;">
						<view class="" :style="{color:SaveList[0]?'#FF5E0C':'' }">
							房子出租需求
						</view>
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/52556202401271437309444.png"
							width="36rpx" height="36rpx" style="margin-left: 5rpx;transform: translateY(2rpx);"
							@click='showFn(0)' />
					</view>
					<view class="" style="display: flex;align-items: center;color: #7A7A7A;" @click='open(0)'>
						展开
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png"
							width="24rpx" height="24rpx" class='icon'
							:style=" {transform:isOpen[0]? 'rotate(180deg)' :'rotate(0)'} " />
					</view>

				</view>
			</view>
			<!-- :style="{height:isOpen[0]?'0':getFormHeight('#formheight')+'px',padding: isOpen[0]?'0':'20rpx'  } " -->
			<view class="card-content" :style="{height:isOpen[0]?'0':'auto',padding: isOpen[0]?'0':'20rpx'  } "
				style="height: 0;padding: 0;">
				<view id="formheight1">
					<view class="form-tit">
						<view class="" :style="{color:SaveList[0]?'#FF5E0C':'' }">
							房子出租需求
						</view>
						<view class="submit" v-if='!SaveList[0]' @click="sava(0,'house_rent_info')">
							保存
						</view>
						<view class="edit-btn" v-if='SaveList[0]' @click="edit(0)">
							编辑
						</view>
					</view>
					<view class="form">
						<view class="item">
							<view class="lable">
								面积
							</view>
							<view class="value">
								<u--input v-model="formData.house_rent_info.area" :readonly='SaveList[0]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								出租年限
							</view>
							<view class="value">
								<u--input v-model="formData.house_rent_info.ageLimit" :readonly='SaveList[0]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								出租要求
							</view>
							<view class="value">
								<u--input v-model="formData.house_rent_info.request" :readonly='SaveList[0]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								主题结构是否完整
							</view>
							<view class="value">
								<u--input v-model="formData.house_rent_info.isFinish" :readonly='SaveList[0]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								是否允许装修
							</view>
							<view class="value">
								<u--input :readonly='SaveList[0]' v-model="formData.house_rent_info.fitment"
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
					</view>

				</view>


			</view>
		</view>
		<!-- content -->

		<view class="">
			<view class="card">
				<view class="card-tit">
					<view class="" style="font-size: 32rpx;color: #7A7A7A;display: flex;align-items: center;">
						<view class="" :style="{color:SaveList[1]?'#FF5E0C':'' }">
							空闲土地出租需求
						</view>
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/52556202401271437309444.png"
							width="36rpx" height="36rpx" style="margin-left: 5rpx;transform: translateY(2rpx);"
							@click='showFn(1)' />
					</view>
					<view class="" style="display: flex;align-items: center;color: #7A7A7A;" @click='open(1)'>
						展开
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png"
							width="24rpx" height="24rpx" class='icon'
							:style=" {transform:isOpen[1]? 'rotate(180deg)' :'rotate(0)'} " />
					</view>

				</view>
			</view>

			<view class="card-content" :style="{height:isOpen[1]?'0':'auto',padding: isOpen[1]?'0':'20rpx'  } "
				style="height: 0;padding: 0;">
				<view id="formheight2">
					<view class="form-tit">
						<view class="">
							空闲土地出租需求
						</view>
						<view class="submit" v-if='!SaveList[1]' @click="sava(1,'land_rent_info')">
							保存
						</view>
						<view class="submit" v-if='SaveList[1]' @click="edit(1)">
							编辑
						</view>
					</view>
					<view class="form">
						<view class="item">
							<view class="lable">
								是否可以种养
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.isBreeding" :readonly='SaveList[1]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								面积
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.area" :readonly='SaveList[1]' color='#7A7A7A'
									border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								种养要求
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.request" :readonly='SaveList[1]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								租金和支付方式
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.payInfo" :readonly='SaveList[1]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								土地优势
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.advantage" :readonly='SaveList[1]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								土地缺点
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.shortcoming" color='#7A7A7A'
									:readonly='SaveList[1]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								闲置原因
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.reson" color='#7A7A7A'
									:readonly='SaveList[1]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								使用年限
							</view>
							<view class="value">
								<u--input v-model="formData.land_rent_info.ageLimit" :readonly='SaveList[1]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<!-- content -->
		<view class="">
			<view class="card">
				<view class="card-tit">
					<view class="" style="font-size: 32rpx;color: #7A7A7A;display: flex;align-items: center;">
						<view class="" :style="{color:SaveList[2]?'#FF5E0C':'' }">
							农副产品出售需求
						</view>
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/52556202401271437309444.png"
							width="36rpx" height="36rpx" style="margin-left: 5rpx;transform: translateY(2rpx);"
							@click='showFn(2)' />
					</view>
					<view class="" style="display: flex;align-items: center;color: #7A7A7A;" @click='open(2)'>
						展开
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png"
							width="24rpx" height="24rpx" class='icon'
							:style=" {transform:isOpen[2]? 'rotate(180deg)' :'rotate(0)'} " />
					</view>

				</view>
			</view>

			<view class="card-content" :style="{height:isOpen[2]?'0':'auto',padding: isOpen[2]?'0':'20rpx'  } "
				style="height: 0;padding: 0;">
				<view id='formheight3'>
					<view class="form-tit">
						<view class="">
							农副产品出售需求
						</view>
						<view class="submit" v-if='!SaveList[2]' @click="sava(2,'product_info')">
							保存
						</view>
						<view class="submit" v-if='SaveList[2]' @click="edit(2)">
							编辑
						</view>
					</view>
					<view class="form">
						<view class="item">
							<view class="lable">
								种养类型
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.type" color='#7A7A7A' border="none"
									:readonly='SaveList[2]'></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								种养面积
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.area" :readonly='SaveList[2]' color='#7A7A7A'
									border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								土地性质
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.quality" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								种养方式
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.manner" :readonly='SaveList[2]' color='#7A7A7A'
									border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								成熟周期
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.maturationCycle" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								最近成熟时间
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.maturationTime" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								年产量
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.yield" color='#7A7A7A' :readonly='SaveList[2]'
									border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								自己消化/市场销售
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.sellType" color='#7A7A7A'
									:readonly='SaveList[2]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								销售方式
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.sellMethods" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								年销量
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.Sales" :readonly='SaveList[2]' color='#7A7A7A'
									border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								产品名称
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.productName" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								优势
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.advantage" :readonly='SaveList[2]'
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								产品有无品牌
							</view>
							<view class="value">
								<u--input :readonly='SaveList[2]' v-model="formData.product_info.isBrand"
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								是否进行粗加工
							</view>
							<view class="value">
								<u--input :readonly='SaveList[2]' v-model="formData.product_info.isProcessing"
									color='#7A7A7A' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								产品诉求
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.isDemands" color='#7A7A7A'
									:readonly='SaveList[2]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								急需解决的问题
							</view>
							<view class="value">
								<u--input v-model="formData.product_info.quesition" color='#7A7A7A'
									:readonly='SaveList[2]' border="none"></u--input>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<!-- content -->

		<view class="">
			<view class="card">
				<view class="card-tit">
					<view class="" style="font-size: 32rpx;color: #7A7A7A;display: flex;align-items: center;">
						<view class="" :style="{color:SaveList[3]?'#FF5E0C':'' }">
							空闲资产出租/出售需求
						</view>
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/52556202401271437309444.png"
							width="36rpx" height="36rpx" style="margin-left: 5rpx;transform: translateY(2rpx);"
							@click='showFn(3)' />
					</view>
					<view class="" style="display: flex;align-items: center;color: #7A7A7A;" @click='open(3)'>
						展开
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png"
							width="24rpx" height="24rpx" class='icon'
							:style=" {transform:isOpen[3]? 'rotate(180deg)' :'rotate(0)'} " />
					</view>

				</view>
			</view>

			<view class="card-content" :style="{height:isOpen[3]?'0':'auto',padding: isOpen[3]?'0':'20rpx'  } "
				style="height: 0;padding: 0;">
				<view id='formheight4'>
					<view class="form-tit">
						<view class="">
							空闲资产出租/出售需求
						</view>
						<view class="submit" v-if='!SaveList[3]' @click="sava(3,'idle_asset_rent_info')">
							保存
						</view>
						<view class="submit" v-if='SaveList[3]' @click="edit(3)">
							编辑
						</view>
					</view>
					<view class="form">
						<view class="item">
							<view class="lable">
								资产名称
							</view>
							<view class="value">
								<u--input v-model="formData.idle_asset_rent_info.area" color='#7A7A7A'
									:readonly='SaveList[3]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								资产优势
							</view>
							<view class="value">
								<u--input v-model="formData.idle_asset_rent_info.advantage" color='#7A7A7A'
									:readonly='SaveList[3]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								数量
							</view>
							<view class="value">
								<u--input v-model="formData.idle_asset_rent_info.num" color='#7A7A7A'
									:readonly='SaveList[3]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								增收方式 <text style="font-size: 24rpx;">(出租、出售、置换、捐赠) </text>
							</view>
							<view class="value">
								<u--input v-model="formData.idle_asset_rent_info.type" color='#7A7A7A'
									:readonly='SaveList[3]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								其他可变现
							</view>
							<view class="value">
								<u--input v-model="formData.idle_asset_rent_info.other" color='#7A7A7A'
									:readonly='SaveList[3]' border="none"></u--input>
							</view>
						</view>
					</view>

				</view>


			</view>
		</view>
		<!-- content -->

		<view class="">
			<view class="card">
				<view class="card-tit">
					<view class="" style="font-size: 32rpx;color: #7A7A7A;display: flex;align-items: center;">
						<view class="" :style="{color:SaveList[4]?'#FF5E0C':'' }">
							房屋装饰建设
						</view>
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/52556202401271437309444.png"
							width="36rpx" height="36rpx" style="margin-left: 5rpx;transform: translateY(2rpx);"
							@click='showFn(4)' />
					</view>
					<view class="" style="display: flex;align-items: center;color: #7A7A7A;" @click='open(4)'>
						展开
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png"
							width="24rpx" height="24rpx" class='icon'
							:style=" {transform:isOpen[4]? 'rotate(180deg)' :'rotate(0)'} " />
					</view>

				</view>
			</view>

			<view class="card-content" :style="{height:isOpen[4]?'0':'auto',padding: isOpen[4]?'0':'20rpx'  } "
				style="height: 0;padding: 0;">
				<view id='formheight5'>
					<view class="form-tit">
						<view class="">
							房屋装饰建设/出售
						</view>
						<view class="submit" v-if='!SaveList[4]' @click="sava(4,'house_decoration_construction')">
							保存
						</view>
						<view class="submit" v-if='SaveList[4]' @click="edit(4)">
							编辑
						</view>
					</view>
					<view class="form">
						<view class="item">
							<view class="lable">
								施工地点
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.area" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								开始时间
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.startTime" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								修/建标准
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.standard" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								事主要求
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.ask" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								房屋建设时长
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.time" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
						<view class="item">
							<view class="lable">
								设计服务
							</view>
							<view class="value">
								<u--input v-model="formData.house_decoration_construction.serve" color='#7A7A7A'
									:readonly='SaveList[4]' border="none"></u--input>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<!-- content -->
		<view class="login-btn" @click="submit"
			:style="{background:saveNum<2 ? '#F5F5F5':'',color:saveNum<2 ? '#ADADAD':'' }">
			确认提交
		</view>

		<u-overlay :show="showOverly" @click="showOverly = false">
			<view class="warp">
				<view class="toast">
					<view class="toast-tit">
						{{showText.title}}
					</view>
					<view class="toast-conntent">
						{{showText.content}}
					</view>
					<view class="off">
						<u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/496fd202401271436368155.png"
							width="50rpx" height="50rpx" />
					</view>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL_SIX
	} from "@/config/app.js"
	export default {
		data() {
			return {
				value: [],
				showPicker: false,
				showOverly: false,
				isOpen: [true, true, true, true, true],
				SaveList: [false, false, false, false, false],
				domHeight: [],
				columns: [
					['是', '否']
				],
				mode: 'add',
				formData: {
					shop_user_id: 1,
					name: "",
					contact: "",
					family_count: "",
					address: "",
					house_rent_info: {
						area: "",
						ageLimit: "",
						request: "",
						isFinish: "",
						fitment: ""
					},
					land_rent_info: {
						isBreeding: "",
						area: "",
						request: "",
						payInfo: "",
						advantage: "",
						shortcoming: "",
						reson: "",
						ageLimit: "",
					},
					product_info: {
						type: "",
						area: "",
						quality: "",
						manner: "",
						maturationCycle: "",
						maturationTime: "",
						yield: "",
						sellType: "",
						sellMethods: "",
						Sales: "",
						productName: "",
						advantage: "",
						isBrand: "",
						isProcessing: "",
						isDemands: "",
						quesition: ""
					},
					idle_asset_rent_info: {
						area: "",
						advantage: "",
						num: "",
						type: "",
						other: ""

					},
					house_decoration_construction: {
						area: "",
						startTime: "",
						standard: "",
						ask: "",
						time: "",
						serve: ""
					}
				},
				showText: {
					title: "",
					content: ""
				},
				textList: [{
						title: "房子出租需求",
						content: "宅基地出租（通过展示自己长期不在老家居住的宅基地，平台匹配宅基地租给有需求的打造，实现与原有宅基地所有者合作达到闲置资产增收）"
					},
					{
						title: "空闲资产出租/出售需求",
						content: "平台上提供（出租、出售、置换、抵押和捐赠等服务，让闲置资产价值最大化）"
					},
					{
						title: "农副产品出售需求",
						content: "种养土地（收集土地上作物信息，平台展示、包装，助农销售增收）"
					},
					{
						title: "空闲资产出租/出售需求",
						content: "房屋修缮及建设（提供房屋设计、修缮等服务）"
					},
					{
						title: "空闲土地出租需求",
						content: "闲置土地（了解闲置土地面积，平台整合资源，帮助其匹配订单种养殖、出租、认养认等服务，让闲置土地增收）。"
					},
				]

			}
		},
		computed: {
			saveNum() {
				return this.SaveList.filter(item => item === true).length;
			},
		},
		onReady() {
			for (let i = 1; i < 6; i++) {
				this.domHeight[i - 1] = this.getFormHeight(`#formheight` + i)
			}
		},

		onLoad() {
			let user = this.$store.state.app.userInfo;
			if (typeof user == 'string') user = JSON.parse(user);
			this.formData.shop_user_id = user.uid;
			uni.request({
				url: HTTP_REQUEST_URL_SIX + '/api/index/getVillagerInfo', //仅为示例，并非真实接口地址。
				method: 'GET',
				data: {
					shop_user_id: user.uid
				},
				success: (res) => {
					if (res.data.data.length != 0) {
						this.mode = 'edit'
						this.formData = res.data.data
						this.formData.house_rent_info = JSON.parse(this.formData.house_rent_info)
						this.formData.land_rent_info = JSON.parse(this.formData.land_rent_info)
						this.formData.product_info = JSON.parse(this.formData.product_info)
						this.formData.idle_asset_rent_info = JSON.parse(this.formData.idle_asset_rent_info)
						this.formData.house_decoration_construction = JSON.parse(this.formData
							.house_decoration_construction)
						if (this.formData.house_rent_info.area) this.SaveList.splice(0, 1, true);
						if (this.formData.land_rent_info.area) this.SaveList.splice(1, 1, true);
						if (this.formData.product_info.area) this.SaveList.splice(2, 1, true);
						if (this.formData.idle_asset_rent_info.area) this.SaveList.splice(3, 1, true);
						if (this.formData.house_decoration_construction.area) this.SaveList.splice(4, 1, true);
						console.log(this.SaveList, "salist")
						console.log(this.saveNum, "num")
					}
				},
				fail: (err) => {
					uni.showToast({
						icon: 'none',
						title: err.msg || err.message || err
					})
				}
			});


		},
		methods: {
			getFormHeight(dom) {
				let height
				const query = uni.createSelectorQuery().in(this);
				query
					.select(dom)
					.boundingClientRect((data) => {
						height = (data.height + 20)
					})
					.exec()
				return height + 'px'

			},
			back() {
				uni.navigateBack();
			},
			showFn(i) {
				this.showText = this.textList[i]
				this.showOverly = true
			},


			open(index) {
				this.isOpen.forEach((item, i) => {
					if (i == index) {
						this.isOpen.splice(index, 1, this.isOpen[index] ? false : true);
					} else {
						this.isOpen.splice(i, 1, true);
					}
				})
			},

			async submit() {
				if (this.saveNum < 2) return
				let that = this
				uni.request({
					url: HTTP_REQUEST_URL_SIX + (that.mode == 'add' ? '/api/index/addVillagerInfo' :
						'/api/index/editVillagerInfo'),
					method: 'POST',
					data: {
						...this.formData
					},
					success: (res) => {
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							success: () => {
								this.$u.sleep(1500).then(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								})
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: err.msg || err.message || err
						})
					}
				});
			},

			sava(index, key) {
				for (let keys in this.formData[key]) {
					if (this.formData[key][keys] == '') {
						this.$u.toast('请填写完整')
						return
					}
				}
				this.SaveList.splice(index, 1, true);
				this.open(index)
			},
			edit(index) {
				this.SaveList.splice(index, 1, false);
			},

		}
	}
</script>
<style lang="scss" scoped>
	.box {
		background: linear-gradient(to bottom, #FFF4DB, #FFEAC3);
		min-height: 100vh;
		font-size: 28rpx;
		padding-bottom: 5vh;
	}

	.bg {
		width: 750rpx;
		height: 660rpx;
		background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/44f25202401271436185198.png');
		background-size: 100% 100%;
		position: relative;

	}

	.user-info {
		width: 750rpx;
		margin: 0 auto;
		height: 550rpx;
		background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/549b3202401271438211224.png');
		background-size: 100% 100%;
		position: absolute;
		top: 370rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #FFF2D9;
		padding-top: 10rpx;
		// background-color: red;
		margin-bottom: 10rpx;



		.lable {
			font-size: 28rpx;
			color: #2E2E2E;
			font-weight: 700;
			width: 112rpx;
			text-align: center;
		}

		.value {
			margin-left: 60rpx;
			width: 400rpx;
			// background-color: red;
		}
	}

	.tit {
		display: flex;
		width: 638rpx;
		margin: 230rpx auto 30rpx;
		justify-content: space-between;
		font-size: 28rpx;
		color: #2E2E2E;
	}

	.card {
		width: 686rpx;
		margin: 0 auto;
		background-color: white;
		padding: 30rpx;
		border-radius: 20rpx;
		position: relative;

		.card-tit {
			display: flex;
			justify-content: space-between;
		}

		.finsh {
			// background-color: red;
			width: 190rpx;
			text-align: center;
			height: 90rpx;
			position: absolute;
			right: 30rpx;
			top: 120rpx;

			.finsh-top {
				height: 10rpx;
				background-color: #F98144;
				border-radius: 100rpx 100rpx 0 0;
			}

			.finsh-cont {
				height: 70rpx;
				width: 162rpx;
				margin: 0 auto;
				background-color: #F98144;
				font-size: 32rpx;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				line-height: 60rpx;
				color: white;

			}

			// right: 0;


		}
	}

	.card-content {
		background-color: #FFE7B9;
		border-radius: 20rpx;
		padding: 20rpx;
		overflow: hidden;
		transition: 300ms;
		width: 690rpx;
		margin: 30rpx auto;



		.form {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
		}

		.form-tit {
			font-size: 32rpx;
			color: #FF5E0C;
			display: flex;
			align-items: center;
			display: flex;
			justify-content: space-between;

			.submit {
				width: 162rpx;
				height: 58rpx;
				background: #FD7F4A;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				color: white;
				text-align: center;
				line-height: 58rpx;
			}

			.edit-btn {
				width: 162rpx;
				height: 58rpx;
				// background: #FD7F4A;
				color: #FD7F4A !important;
				border: 1px solid #FD7F4A;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				color: white;
				text-align: center;
				line-height: 50rpx;
			}

			.submit:active {
				background-color: grey;
			}
		}


	}

	.icon {
		margin-left: 10rpx;
		transform: translateY(2rpx);
		transition: 300ms !important;
	}

	.toast {
		width: 588rpx;
		height: 340rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/56970202401271438059755.png');
		background-size: 100% 100%;


		.toast-tit {
			text-align: center;
			font-size: 32rpx;
			line-height: 45rpx;
			color: white;
			padding-top: 10rpx;
		}

		.toast-conntent {
			padding: 35rpx 50rpx;
			text-indent: 2em;
			font-size: 28rpx;
			color: #7A7A7A;
			line-height: 42rpx;

		}

		.off {
			position: absolute;
			right: 40rpx;
			top: -40rpx;
		}
	}

	.login-btn {
		width: 690rpx;
		height: 88rpx;
		background: #FF8056;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		font-size: 30rpx;
		color: white;
		margin: 50rpx auto;
	}

	.login-btn:active {
		background-color: grey;
	}

	.bg_back {
		height: 34rpx;
		width: 20rpx;
		position: absolute;
		top: calc(var(--status-bar-height) + 30rpx);
		left: 30rpx;
		z-index: 999;
	}
</style>