<template>
	<view class="joinInCooperationIndex">
		<u-navbar title="合作加盟" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar>
		<view class="formMenu">
			<view class="menuItem">
				<view class="menulabel">
					加盟板块
				</view>
				<view class="ckeckRadio prickerStyle" @click="onPalteListshow(true)">
					<view class="">
						{{palteVal ||"请选择加盟板块"}}
					</view>
					<image src="../../static/common/big_gray_right_arrow.png" class="planeImg1" mode=""></image>
				</view>
			</view>
			<!-- 名称 -->
			<view class="menuItem">
				<view class="menulabel">
					个人信息
				</view>
				<input type="text" v-model="name" placeholder="请填写您的真实姓名" />
				<input type="number" v-model="phone" maxlength="11" placeholder="请填写您的常用手机号" />
			</view>
			<!-- 加盟区域 -->
			<view class="menuItem">
				<view class="menulabel">
					加盟区域
				</view>
			</view>

			<view class="menuItem">
				<picker mode="region" @change="getCityData">
					<view class="ckeckRadio prickerStyle">
						<view class="">
							{{cityVal ||"请选择加盟区域"}}
						</view>
						<image src="../../static/common/big_gray_right_arrow.png" class="planeImg1" mode=""></image>
					</view>
				</picker>
			</view>
			<!-- 加盟类型 -->
			<!-- <view class="menuItem">
				<view class="menulabel">
					加盟类型
				</view>
				<input type="text" v-model="leagueType" placeholder="请输入加盟类型" />
			</view> -->
			<!-- 投入资金 -->
			<view class="menuItem">
				<view class="menulabel">
					投入资金
				</view>
				<input type="text" v-model="investcapital" placeholder="请输入计划投入资金" />
			</view>
			<!-- 是否线下门店 -->
			<view class="menuItem">
				<view class="menulabel">
					是否线下门店
				</view>
				<view class="ckeckRadio">
					<u-radio-group v-model="offlineFlag">
						<u-radio activeColor="red" label="是" name="1"></u-radio>
						<u-radio activeColor="red" label="否" name="0"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- 是否汽修行业 -->
			<!-- <view class="menuItem">
				<view class="menulabel">
					是否汽修行业
				</view>
				<view class="ckeckRadio">
					<u-radio-group v-model="vehicleRepairing">
						<u-radio activeColor="red" label="是" name="1"></u-radio>
						<u-radio activeColor="red" label="否" name="0"></u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<view class="btn" @click="submitMenu">
				提交申请
			</view>
		</view>
		<u-picker :closeOnClickOverlay="true" :show="palteListshow" :columns="palteList" @confirm="getpaltedata"
			@cancel="onPalteListshow(false)" @close="onPalteListshow(false)"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				phone: "",
				leagueType: "",
				investcapital: "",
				offlineFlag: '1',
				vehicleRepairing: "1",
				palteList: [],
				palteListshow: false,
				palteVal: "",
				cityVal: "",
				options: []
			}
		},
		onShow() {
			if (this.User.userinfo.phoneNumber) {
				this.phone = this.User.userinfo.phoneNumber
			}
			this.getStoreAndGoodsData()
		},
		methods: {
			onPalteListshow(b) {
				this.palteListshow = b
			},
			submitMenu() {
				if (!this.palteVal) {
					uni.showToast({
						icon: "none",
						title: '请选择加盟板块'
					})
					return
				} else if (!this.name) {
					uni.showToast({
						icon: "none",
						title: '请填写名称'
					})
					return
				} else if (!this.phone) {
					uni.showToast({
						icon: "none",
						title: '请填写联系方式'
					})
					return
				} else if (!this.cityVal) {
					uni.showToast({
						icon: "none",
						title: '请选择加盟区域'
					})
					return
				}
				// } else if (!this.leagueType) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: '请填写加盟类型'
				// 	})
				// 	return
				// }
				// else if (!this.investcapital) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: '请输入计划投入资金'
				// 	})
				// }
				this.submitData()
			},
			submitData() {
				this.$http.post('/api/client/franchise/add', {
					franchiseSection: this.palteVal,
					realName: this.name,
					phoneNumber: this.phone,
					provinceName: this.options[0],
					cityName: this.options[1],
					areaName: this.options[2],
					franchiseType: this.leagueType,
					investment: this.investcapital,
					isOfflineStores: this.offlineFlag,
					isAutoRepairIndustry: this.vehicleRepairing
				}).then(res => {

					uni.showToast({
						icon: "",
						title: '提交成功'
					})
					let timer = setInterval(() => {
						console.log("定时器执行一次");
						uni.navigateBack({
							delta: 1
						});
						clearInterval(timer); // 清除定时器，确保只执行一次
						console.log("定时器已清除");
					}, 1000);
				})
			},
			getStoreAndGoodsData() {
				this.$http.get('/api/client/index/storeAndGoods').then(res => {
					let newArr = []
					res.data.data.storeTypeInfoVOList.forEach((item, index) => {
						newArr.push(item.name)
					})
					this.palteList.push(newArr)
					console.log("aaaa", this.palteList);
				})
			},
			getpaltedata(e) {
				this.palteVal = e.value[0]
				console.log(e, 'e');
				this.palteListshow = false
			},
			getCityData(e) {
				this.options = e.detail.value
				this.cityVal = e.detail.value.join(',')
				console.log(e.detail.value, "e");
			}
		}
	}
</script>

<style lang="scss">
	.joinInCooperationIndex {
		min-height: 100vh;
		background-color: #fafbff;

		.formMenu {
			padding: 28rpx 24rpx;
			box-sizing: border-box;
			width: 100%;

			.menuItem {
				.menulabel {
					margin-top: 25rpx;
					margin-bottom: 25rpx;
					padding-left: 10rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					border-left: 6rpx solid #FF4502;
				}

				input {
					padding-left: 20rpx;
					width: 702rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					box-sizing: border-box;
				}

				.ckeckRadio {
					display: flex;
					align-items: center;
					padding-left: 20rpx;
					box-sizing: border-box;
					width: 702rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;

					.u-radio {
						margin-right: 60rpx;
					}
				}

				.prickerStyle {
					padding-right: 20rpx;
					display: flex;

					view {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.planeImg1 {
						display: block;
						margin-left: auto;
						width: 13rpx;
						height: 23rpx;
					}
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				margin-top: 50rpx;
				width: 702rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>