<template>
	<view class="join">
		<view class="banner">
			<image src="/static/other/banner.png" mode=""></image>
		</view>
		<view class="top">
			<view class="content">
				<view class="page-section">
					<view class="name">您的姓名</view>
					<view class="inp">
						<!-- <input class="weui-input" v-model="form.cName" placeholder="请输入姓名,最多四个字" /> -->
						<u-input v-model="form.cName" :type="type" placeholder="输入您的姓名" maxlength='4' />
					</view>
				</view>
				<view class="page-section">
					<view class="name">您的性别</view>
					<u-radio-group v-model="form.nSex">
						<u-radio v-for="(item, index) in sex" :key="index" 
							:name="item.value" :label="item.label" 
							:customStyle="{ margin: '0 12rpx' }"
						/>
					</u-radio-group>
				</view>
				<view class="page-section">
					<view class="name">手机号:</view>
					<view class="inp">
						<!-- <input class="weui-input" v-model="form.cPhone" placeholder="请输入手机号" /> -->
						<u-input v-model="form.cPhone" placeholder="请输入手机号" maxlength='11' />
					</view>
				</view>
				<view class="input-box">
					<u-input
						v-model="code"
						type="number"
						maxlength="6"
						placeholder="请输入手机验证码"
						placeholder-style="color: #999"
						class="input-item code-input"
					></u-input>
					<view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
						<text v-if="countdown === 60">获取验证码</text>
						<text v-else>{{ countdown }}s 后重新获取</text>
					</view>
				</view>
				<view class="page-section">
					<view class="name">合作意向城市</view>
					<view class="inp select" @click="show = true">
						<text>{{form.city}}</text>
						<img src="/static/identify/down.png" alt="" />
						<!-- <view class="city" @click="selectCity" v-if="form.city == ''">
							入驻城市
						</view>
						<view class="city" @click="selectCity" v-else>
							{{form.city}}
						</view> -->
						<!-- 	<view class="city" v-if="form.city == ''">
							选择所在城市(自动定位)
						</view> -->
						<!-- <view class="city" v-else  @click="goCity"> -->
						<!-- <view class="city" v-else>
							{{form.city}}市
						</view> -->
						<!-- <input class="weui-input" v-model="form.cNickName" placeholder="请输入昵称" /> -->
						<!-- <u-input v-model="form.cNickName" :type="type" placeholder="请输入昵称" maxlength = '4'/> -->
					</view>
					<u-picker :show="show" :columns="[cityList]" keyName="label" 
						@cancel="show = false" @confirm="onSelect"
					></u-picker>
				</view>
				<view class="page-section">
					<view class="name">开通服务</view>
					<u-radio-group v-model="form.serveType">
						<u-radio v-for="(item, index) in serveArr" :key="index" 
							:name="item.value" :label="item.label" 
							:customStyle="{ margin: '0 12rpx' }"
						/>
					</u-radio-group>
				</view>
				<!-- <view class="page-section">
					<view class="name">您所在的位置:</view>
					<view class="weui-cells weui-cells_after-title location" @click="getAddress">
						<text class="point" v-if="!form.address">请选择</text>
						<text class="point active" v-else>{{form.address}}{{form.name}}</text>
					</view>
				</view> -->
				<view class="updata" style="border:0;">
					<view class="name">工作形象照</view>
					
					<view class="images">
						<Upload
							:maxCount="2"
							@fileList="onUpload($event, 'cImgList')"
						/>
					</view>
					<view class="title">
						请上传本人近期照片，图片大小不超过10M (建议清晰正脸照)
					</view>
				</view>
			</view>

			<view class="submits">
				
				<view class="btn" @click="submit">
					提交
				</view>
				<text>平台不会通过任何渠道泄漏你的个人信息，请放心输入</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getInfo,
	getCityList,
} from '@/api/index';
import {
	netStaffAdd,
} from '@/api/staff';
import Upload from '@/components/upload/index.vue';
export default {
	components: {
		Upload
	},
	data() {
		return {
			countdown: 60,
			cityList: [],
			show: false,
			isLogin: false,
			type: 'text',
			isShow: false,
			sex: [
				{
					value: 1,
					label: '男'
				},
				{
					value: 0,
					label: '女'
				}
			],
			serveArr: [
				{
					value: 1,
					label: '上门按摩'
				},
				{
					value: 0,
					label: '同城陪玩'
				}
			],
			form: {
				id: '',
				cName: '',
				cNickName: '',
				cPortrait: '',
				cPhone: '',
				cJianjie: '',
				nSex: 0,
				serveType:0,
				cSfzImg: [],
				cImgList: [],
				latitude: '',
				longitude: '',
				name: '0',
				address: '',
				cOpenId: '',
				cBhList: '',
				city: '请选择'
			},
			token: '',
		}
	},
	onLoad() {
		this.isLogin = !!uni.getStorageSync('access-token');
	},
	onShow() {
		this.getinfo()
		this.getCity()

		// let city = uni.getStorageSync('selectCity')
		// let lastCity = city.charAt(city.length - 1)
		// lastCity == '市' ? this.form.city = city.slice(0, -1) : this.form.city = city
		// this.form.city = uni.getStorageSync('selectCity')
	},
	methods: {
		// upload事件
		onUpload(e, t) {
			this.form[t] = e.map(item => item.url);
		},
		goCity() {
			uni.navigateTo({
				url: '/pages/identify/city?type=' + 'indent'
			})
		},
		getAddress() {
			uni.chooseLocation({
				success: res => {
					this.form.name = res.name;
					this.form.latitude = res.latitude;
					this.form.longitude = res.longitude;
					// this.form.address = res.address
				}
			});
		},
		getinfo() {
			getInfo().then(res => {
				if (res.data.code == 200) {
					this.isLogin = true
					// this.info = res.data.data,
					// this.dBalance = res.data.data.dBalance.toFixed(2)
				} else if (res.data.code == 401) {
					uni.showModal({
						title: '请先登录！',
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/my/my'
								})
							} else if (res.cancel) {
								return
							}
						}
					})
				}
			})
		},
		//提交
		submit() {
			// var openids = uni.getStorageSync('wx_copenid')
			// this.form.cOpenId = openids
			// this.form.cAddress =this.form.cAddress
			// this.form.cSfzImg = this.idCard
			// that.data.form.cBhList = that.data.form.cBhList.join(", ")
			if (this.form.cName == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				return
			}
			if (!/^1[3456789]\d{9}$/.test(this.form.cPhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if (this.form.city == '') {
				uni.showToast({
					title: '请选择所在城市',
					icon: 'none'
				});
				return
			}
			if (this.form.cImgList.length < 1) {
				uni.showToast({
					title: '最少上传一张生活照片',
					icon: 'none'
				});
				return
			} else {
				netStaffAdd(this.form).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "申请成功",
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else if (res.data.code == 401) {
						uni.showModal({
							title: '请先登录！',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/my/my'
									})
								} else if (res.cancel) {
									return
								}

							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}
		},
		getCity() {
			getCityList().then(res => {
				this.cityList = res.data.data.map(({
					deptId,
					deptName
				}) => ({
					value: deptId,
					label: deptName
				}))
			});
		},
		selectCity() {
			this.show = true
		},
		onSelect(e) {
			this.form.city = e.value[0].label
			this.form.deptId = e.value[0].value
			this.show = false
		},
	},
	mounted() {
		this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
	}
}
</script>

<style lang="scss" scoped>
.join {
	min-height: 100vh;

	.banner {
		width: 100%;
		height: 424rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top {
		width: 100%;
		height: 100px;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 44rpx;
		background-color: #FDFDFD;

		.content {
			width: 100%;
			height: auto;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0 4rpx 12rpx 0 rgba(209, 168, 88, 0.1);
			border-radius: 24rpx;

			.page-section {
				width: 100%;
				font-size: 28rpx;
				margin-bottom: 32rpx;

				.name {
					width: 31%;
					margin-bottom: 20rpx;
				}

				.inp {
					width: 100%;
				}

				.select{
					width: 100%;
					padding: 12rpx 18rpx;
					border-radius: 8rpx;
					border: 2rpx solid #dadbde;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						width: auto;
						color: #333333;
						font-size: 30rpx;
					}

					img {
						width: 24rpx;
						height: 24rpx;
					}
				}
				
				
			}.code-box {

					.code-btn {
						width: 200rpx;
						text-align: right;
						font-size: 28rpx;
						color: #2DB1A8;
						line-height: 88rpx;

						&.disabled {
						color: #2DB1A8;
						}
					}
				}
			.input-box {
					width:100%;
					height: 92rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin: 46rpx auto;
					display: flex;
					align-items: center;

					.input-item {
						width: 100rpx;
					}
				}

			.updata {
				margin-top: 20rpx;
				width: 100%;
				font-size: 28rpx;

				.images {
					margin-top: 20rpx;
				}
				.title{
					font-size: 22rpx;
					color: #999999;
				}
			}

		}

		.submits {
			width: 100%;
			margin-top: 28rpx;
			text{
				display: block;
				width: 100%;
				text-align: center;
				font-size: 22rpx;
				color: #999999;
			}
			.btn {
				width: 100%;
				height: 84rpx;
				text-align: center;
				background: linear-gradient(90deg, #BFA061 0%, #BD9961 100%);
				border-radius: 14rpx;
				margin: 16rpx auto;
				line-height: 84rpx;
				color: #ffffff;
			}
		}
	}
}
</style>