<template>
	<view class="apply-pages" v-if="isLoad">

		<view class="page-height"
			v-if="(options.admin_id && coach_status != -1)  || (!options.admin_id && [1,2,3].includes(coach_status))">
			<abnor percent="150%" @confirm="confirm" @cancel="$util.goUrl({url:`/pages/mine`,openType: `reLaunch`})"
				:title="title[coach_status]" :tip="tipArr[coach_status]" :button="buttonArr[coach_status]"
				:image="image[coach_status]" :tipMax="coach_status == 4? '690rpx':''"></abnor>
		</view>

		<block v-else>

			<view class="apply-info-box rel" :style="{background:primaryColor}">
				<image class="bg-1 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-1.png">
				</image>
				<image class="bg-2 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-2.png">
				</image>
				<view class="technician-money flex-center f-md-title c-title text-bold abs">{{max_level || 0}}</view>
				<image class="join-us abs" src="https://lbqny.migugu.com/admin/anmo/apply/join-us.png">
				</image>
				<view class="join-us pd-lg abs" style="z-index: 3;">
					<view style="height:90rpx"></view>
					<view class="f-title c-title text-bold">您的姓名</view>
					<input v-model="form.coach_name" type="text"
						class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10" maxlength="20"
						placeholder-class="c-caption" :placeholder="rule[0].errorMsg"
						:style="{borderColor:primaryColor}" />
					<view class="mt-md f-title c-title text-bold">您的性别</view>
					<view class="flex-y-center mt-sm">
						<view @tap.stop="form.sex = index" class="flex-y-center f-mini-title c-title"
							:style="{color:form.sex == index ? primaryColor:'',marginRight:index===0?'80rpx':''}"
							v-for="(item,index) in ['男','女']" :key="index"><i class="iconfont mr-sm"
								:class="[{'icon-xuanze':form.sex != index},{'icon-radio-fill':form.sex == index}]"></i>{{item}}
						</view>
					</view>
					<view class="mt-md f-title c-title text-bold">您的生日</view>
					<view class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
						:style="{borderColor:primaryColor}">
						<picker @change="pickerChange($event,'birthday')" mode="date" :end="endYear"
							:value="form.birthday">
							<view class="flex-between">
								<view class="max-400 ellipsis">{{form.birthday||'请选择'}}</view>
								<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
							</view>
						</picker>
					</view>
					<view class="mt-md f-title c-title text-bold">手机号</view>
					<view class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10"
						style="height:auto;min-height:82rpx" :style="{borderColor:primaryColor}">
						<input v-model="form.mobile" type="text" maxlength="11" placeholder-class="c-caption"
							:placeholder="rule[2].errorMsg" style="margin-top: 15rpx;" />
						<view class="flex-between" v-if="configInfo.short_code_status">
							<input v-model="form.short_code" type="text" maxlength="6" placeholder-class="c-caption"
								placeholder="请输入验证码" :style="{borderColor:primaryColor}" />
							<view @tap.stop="toSend" :style="{color:primaryColor}">
								{{authTime>0?`重新获取(${authTime}s)`:'获取验证码'}}
							</view>
						</view>
					</view>
					<view class="mt-md f-title c-title text-bold">意向工作城市</view>
					<view class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
						:style="{borderColor:primaryColor}">
						<picker @change="pickerChange($event,'city')" :value="cityIndex" :range="cityList"
							range-key="title">
							<view class="flex-between">
								<view class="max-400 ellipsis">{{cityIndex!=-1?cityList[cityIndex].title:'请选择'}}</view>
								<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
							</view>
						</picker>
					</view>
					<!-- <block v-if="configInfo.plugAuth.store && form.admin_id">
						<view class="mt-md f-title c-title text-bold">挂靠门店</view>
						<view class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
							:style="{borderColor:primaryColor}">
							<picker @change="pickerChange($event,'store')" :value="storeIndex" :range="storeList"
								range-key="title">
								<view class="flex-between">
									<view class="max-400 ellipsis">{{storeIndex!=-1?storeList[storeIndex].title:'请选择'}}
									</view>
									<i class="iconfont icon-right ml-sm" style="font-size: 28rpx;"></i>
								</view>
							</picker>
						</view>
					</block> -->
					<view class="flex-y-baseline mt-md">
						<view class="f-title c-title text-bold">工作形象照</view>
						<view class="f-caption c-caption ml-sm">图片建议尺寸: 750 * 750</view>
					</view>
					<view class="f-caption c-caption mt-sm">请上传本人近期照片，图片大小不超过10M</view>
					<view class="flex-between mt-sm">
						<upload @upload="imgUpload" :imagelist="form.work_img" imgtype="work_img" text="上传图片"
							:imgsize="1" imgclass="apply">
						</upload>
					</view>
				</view>
				<view class="flex-center f-caption c-title abs" style="width:100%;top:1842rpx;left:0;">
					平台不会通过任何渠道泄露您的个人信息，请放心输入
				</view>
				<image @tap.stop="submit" class="submit abs" src="https://lbqny.migugu.com/admin/anmo/apply/submit.png">
				</image>
			</view>
		</block>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				isLoad: false,
				options: {},
				cityList: [],
				cityIndex: -1,
				storeList: [],
				storeIndex: 0,
				// -1未申请，1审核中，2审核通过，3取消授权，4审核失败(可再次申请)
				tipArr: {
					'1': [{
						text: '审核成功后将直接入驻平台',
						color: 0
					}],
					'2': [{
						text: '恭喜您，审核通过！',
						color: 0
					}, {
						text: '快去管理订单吧',
						color: 0
					}],
					'3': [{
						text: '平台管理员已取消授权',
						color: 0
					}],
					'4': [{
						text: '请联系平台管理人员询问原因',
						color: 0
					}]
				},
				buttonArr: {
					'1': [{
						text: '个人中心',
						type: 'cancel'
					}],
					'2': [{
						text: '去管理',
						type: 'confirm'
					}],
					'3': [{
						text: '个人中心',
						type: 'cancel'
					}],
					'4': [{
						text: '再次申请',
						type: 'confirm'
					}, {
						text: '个人中心',
						type: 'cancel'
					}]
				},
				title: {
					'1': '等待审核',
					'2': '您已经是' + this.$t('action.attendantName') + '了',
					'3': '取消授权',
					'4': '申请失败',
				},
				image: {
					'1': 'https://lbqny.migugu.com/admin/public/apply_wait.jpg',
					'2': 'https://lbqny.migugu.com/admin/public/apply_suc.jpg',
					'3': 'https://lbqny.migugu.com/admin/public/apply_fail.jpg',
					'4': 'https://lbqny.migugu.com/admin/public/apply_fail.jpg',
				},
				coach_status: -1,
				max_level: 0,
				authTime: 0,
				timer: null,
				form: {
					id: 0,
					admin_id: 0,
					partner_id: 0,
					coach_name: '', //姓名 
					mobile: '', //手机号 
					short_code: '',
					sex: 0, //性别 
					birthday: '',
					work_time: '', //从业年份 
					city_id: '', //城市 
					store_id: '', //门店
					lng: '',
					lat: '',
					address: '', //详细地址 
					text: '', //备注 
					id_code: '', //身份证号
					id_card: [], //身份证
					license: [], //资格证书
					work_img: [], // 工作照
					self_img: [], // 生活照
					video: []
				},
				rule: [{
						name: "coach_name",
						checkType: "isNotNull",
						errorMsg: "输入您的姓名",
						regType: 2
					}, {
						name: "birthday",
						checkType: "isNotNull",
						errorMsg: "请选择您的生日",
						regType: 2
					},
					{
						name: "mobile",
						checkType: "isMobile",
						errorMsg: "输入手机号"
					}, {
						name: "city_id",
						checkType: "isNotNull",
						errorMsg: "请选择意向工作城市"
					},
					{
						name: "work_img",
						checkType: "isNotNull",
						errorMsg: "请上传工作形象照"
					}
				],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		async onLoad(options) {
			let {
				admin_id = 0,
					partner_id = 0,
			} = options
			options = admin_id || partner_id ? await this.updateCommonOptions(options) : options
			this.options = options
			this.form.admin_id = admin_id
			this.form.partner_id = partner_id
			this.$util.showLoading()
			await this.initIndex()
			let {
				coach_status
			} = this
			uni.setNavigationBarTitle({
				title: coach_status == -1 ? `申请` + this.$t(
					'action.attendantName') : ''
			})
			this.isLoad = true
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer)
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				if (!this.configInfo.id || !this.configInfo.hasOwnProperty(
						'plugAuth') || (this.configInfo.hasOwnProperty(
						'plugAuth') && !this.configInfo.plugAuth.hasOwnProperty(
						'store')) || refresh) {
					await this.getConfigInfo()
				}
				await this.getCityList()

				let [data] = await Promise.all([this.$api.technician.coachInfo(), this.getStoreList()])
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.max_level = data.max_level
				if (data && !data.id) {
					this.$util.hideAll()
					return
				}
				let imgArr = ['id_card', 'license', 'self_img']
				imgArr.map(item => {
					data[item] = data[item] && data[item].length > 0 ? data[item].map(aitem => {
						return {
							path: aitem
						}
					}) : []
				})
				if (data.id_card && data.id_card.length > 1) {
					data.id_card_fan = [data.id_card[1]]
					data.id_card_people = [data.id_card[2]]
					data.id_card.splice(1, 3)
				}
				let imgArrs = ['work_img', 'video']
				imgArrs.map(item => {
					data[item] = data[item] && data[item].length > 0 ? [{
						path: data[item]
					}] : []
				})
				data.birthday = data.birthday ? this.$util.formatTime(data.birthday * 1000, 'YY-M-D') : ''
				let {
					admin_id = 0,
						partner_id = 0,
				} = this.options
				if (admin_id) {
					data.admin_id = admin_id
				}
				if (partner_id) {
					data.partner_id = partner_id
				}

				for (let key in this.form) {
					this.form[key] = data[key]
				}
				let {
					city_id,
					store_id,
					status,
					sh_text
				} = data
				this.cityIndex = this.cityList.findIndex(item => {
					return item.id == city_id
				})
				this.storeIndex = this.storeList.findIndex(item => {
					return item.id == store_id
				})
				this.coach_status = !admin_id && status == 4 ? -1 : status
				if (status == 4 && sh_text) {
					this.tipArr[4][0].text = sh_text
				}
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getCityList() {
				let {
					location
				} = this
				if (!location.lat) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						// await this.$jweixin.initJssdk();
						await this.$jweixin.wxReady2();
						let {
							latitude: lat = 0,
							longitude: lng = 0
						} = await this.$jweixin.getWxLocation()
						location = {
							lng,
							lat,
							address: '定位失败',
							province: '',
							city: '',
							district: ''
						}
						if (lat && lng) {
							let key = `${lat},${lng}`
							let data = await this.$api.base.getMapInfo({
								location: key
							})
							let {
								status,
								result
							} = JSON.parse(data)
							if (status == 0) {
								let {
									address,
									address_component
								} = result
								let {
									province,
									city,
									district
								} = address_component
								location = {
									lng,
									lat,
									address,
									province,
									city,
									district
								}
							}
						}
					}
					// #endif
					// #ifndef H5
					location = await this.$util.getBmapLocation()
					// #endif

					this.updateUserItem({
						key: 'location',
						val: location
					})
				}

				let {
					lng = 0,
						lat = 0
				} = location
				if (lat && lng) {
					let city = await this.$api.base.getCity({
						lng,
						lat
					})
					this.$util.hideAll()
					this.cityList = city
					this.form.city_id = city.length > 0 ? city[0].id : 0
				}
			},
			async getStoreList() {
				let {
					admin_id = 0
				} = this.form
				if (!admin_id) return
				let data = await this.$api.mine.getStoreSelect({
					admin_id
				})
				data.unshift({
					id: 0,
					title: '不挂靠门店'
				})
				this.storeList = data
			},
			pickerChange(e, key) {
				let ind = e.target.value
				if (key === 'birthday') {
					let unix = this.$util.DateToUnix(ind)
					if (unix > new Date(Math.ceil(new Date().getTime())) / 1000) {
						this.$util.showToast({
							title: `不能选择未来时间哦`
						})
						return
					}
					this.form[key] = ind
					return
				}
				this[`${key}Index`] = ind
				this.form[`${key}_id`] = this[`${key}List`][ind].id
			},
			// 发送验证码
			async toSend() {
				let {
					authTime
				} = this
				if (authTime) return
				let {
					mobile = ''
				} = this.form
				if (mobile == null || !/^(1[0-9]{10})$/.test(mobile)) {
					this.$util.showToast({
						title: mobile == null ? `请输入手机号` : `${mobile} 手机号无效`
					});
					return;
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.user.sendShortMsg({
						phone: mobile
					})
					this.$util.hideAll()
					this.lockTap = false
					let time = 60
					this.timer = setInterval(() => {
						if (time === 0) {
							clearInterval(this.timer)
							return
						}
						time--
						this.authTime = time
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let {
					lat: locaLat = '',
					lng: locaLng = ''
				} = this.location
				let {
					id = 0,
						lat: addrLat,
						lng: addrLng
				} = this.form

				if (id) {
					locaLat = addrLat
					locaLng = addrLng
				}

				let param = {}
				if (!locaLat && !locaLng) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						await this.$jweixin.wxReady2();
						let {
							latitude,
							longitude
						} = await this.$jweixin.getWxLocation()
						locaLat = latitude
						locaLng = longitude
					}
					// #endif
					// #ifdef APP-PLUS
					let location = await this.$util.getBmapLocation()
					locaLat = location.lat
					locaLng = location.lng
					// #endif
				}

				// #ifndef MP-WEIXIN
				param = {
					latitude: locaLat,
					longitude: locaLng
				}
				// #endif

				let [, {
					address = '',
					longitude,
					latitude
				}] = await uni.chooseLocation(param);
				if (!address) return
				this.form.address = address
				this.form.lng = longitude
				this.form.lat = latitude
			},
			// 去管理/再次申请
			async confirm() {
				let {
					coach_status
				} = this
				if (coach_status == 4) {
					this.coach_status = -1
					uni.setNavigationBarTitle({
						title: this.$t('action.attendantName')
					})
					return
				}
				this.$util.goUrl({
					url: `/pages/mine?type=2`,
					openType: `reLaunch`
				})
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				param.work_img = param.work_img.length > 0 ? param.work_img[0].path : ''
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				let {
					short_code_status
				} = this.configInfo
				if (short_code_status && (param.short_code == null || param.short_code.length != 6)) {
					this.$util.showToast({
						title: `请输入6位数短信验证码`
					})
					return
				}
				if (!short_code_status) {
					delete param.short_code
				}
				param.birthday = this.$util.DateToUnix(param.birthday)
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.technician.coachApply(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功，即将跳转个人中心`,
					})
					if (this.timer) {
						clearInterval(this.timer)
					}
					setTimeout(() => {
						if (getCurrentPages().length > 1) {
							this.$util.back()
						}
						this.$util.goUrl({
							url: '/pages/mine',
							openType: `reLaunch`
						})
					}, 2000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}

			}
		}
	}
</script>


<style lang="scss">
	.apply-info-box {
		width: 100%;
		height: 2050rpx;

		.bg-1 {
			width: 750rpx;
			height: 1999rpx;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.bg-2 {
			width: 750rpx;
			height: 620rpx;
			top: 30rpx;
			z-index: 2;
		}

		.technician-money {
			width: 45rpx;
			top: 355rpx;
			left: 460rpx;
			z-index: 3;
		}

		.join-us {
			width: 668rpx;
			height: 1351rpx;
			top: 468rpx;
			left: 44rpx;
			z-index: 2;

			.item-input {
				height: 74rpx;
				border: 4rpx solid #069F5E;

				.flex-between {
					height: 74rpx;
				}
			}

			.item-input.text {
				height: 82rpx;
			}
		}

		.submit {
			width: 662rpx;
			height: 93rpx;
			top: 1900rpx;
			left: 47rpx;
			z-index: 2;
		}
	}
</style>