<template>
	<view class="page-app theme-light main-green font-1">
		<su-navbar title="达人申请" statusBar></su-navbar>
		
		<!-- #ifdef MP -->
		<view v-if="showSubscribeBtn" class="subscribe-box">
		  <u-icon name="bell-fill" color="var(--ui-BG-Main)" size="44"></u-icon>
		  <view class="info">获取实时审核结果</view>
		  <view class="sub-btn" @tap="subscribeMessage">立即订阅</view>
		</view>
		<!-- #endif -->
		
		<view class="form-box">
			<form-avatar v-model="form.avatar"></form-avatar>
		</view>
		
		<view class="form-box">
			<view class="form-item">
				<view class="label">昵称</view>
				<u-input input-align="right" placeholder="请输入昵称" v-model="form.nickname" />
			</view>
			<form-sex v-model="form.sex"></form-sex>
			<view class="form-item">
				<view class="label">年龄</view>
				<u-input input-align="right" placeholder="请输入年龄" type="number" v-model="form.age" />
			</view>
			<view class="form-item" v-if="isPass">
				<view class="label">微信</view>
				<u-input input-align="right" placeholder="请输入您的微信" v-model="form.weixin" />
			</view> 
			<view class="form-item">
				<view class="label">手机号</view>
				<u-input input-align="right" placeholder="请输入手机号" type="number" v-model="form.mobile" />
			</view>
			<view class="form-item">
				<view class="label">自我介绍</view>
				<u-input input-align="right" placeholder="请输入自我介绍" v-model="form.intro" />
			</view>
			<view class="form-item">
				<view class="label">所在城市</view>
				<u-input input-align="right" placeholder="请输入所在城市" v-model="form.city" />
			</view>
		</view>
		
		<view class="form-box">
			<form-image :number="6" v-model="imgList"></form-image>
		</view>
		
		<view class="form-box">
			<form-voice @sec="toSec" v-model="form.sound"></form-voice>
		</view>
		
		<view class="check-box" @click="changeCheck">
			<u-icon size="44" v-if="check" name="checkmark-circle-fill" color="var(--ui-BG-Main)"></u-icon>
			<u-icon size="44" v-else name="checkmark-circle" color="var(--ui-BG-Main)"></u-icon>
			<text class="info">我已阅读并接受</text>
			<text @tap.stop="toAggre()" class="sub-btn">《达人申请协议》</text>
		</view>
		
		<view class="submit-box">
			<view class="sub-btn" @click="saveApply">提交申请</view>
		</view>
		
		<s-menu-tools />
		<s-auth-modal />
		<qrcode-modal />
	</view>
</template>

<script>
	import FormAvatar from '@/pages/clerk/apply/components/formAvatar.vue';
	import FormSex from '@/pages/clerk/apply/components/formSex.vue';
	import FormVoice from '@/pages/clerk/apply/components/formVoice.vue';
	import FormImage from '@/pages/clerk/apply/components/formImage.vue';
	import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
	import ClerkApi from '@/sheep/api/worker/clerk'; 
	import test from '@/sheep/helper/test.js';
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import sheep from '@/sheep';
	export default {
		components: {
			FormAvatar,
			FormSex,
			FormVoice, 
			FormImage,
			qrcodeModal,
		},
		props: {
			
		},
		data() {
			return {
				form: {
					avatar: '',
					nickname: '',
					sex: '',
					age: '',
					weixin: '',
					mobile: '',
					experience: '',
					intro: '',
					city: '',
					albums: '',
					sound: '',
					soundTime: '',
				},
				imgList: [],
				
				showSubscribeBtn: false,
				
				check: true,
			}
		},
		onLoad() {
			// #ifdef MP
			// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
			this.autoSubscribeMessage();
			// #endif
		},
		computed: {
			isPass() {
				return sheep.$store('user').tradeConfig.weixinEnabled;
			},
		},
		methods: {
			saveApply() {
				// #ifdef MP
				// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
				this.autoSubscribeMessage();
				// #endif
				
				if(!this.form.avatar){
					sheep.$helper.toast('请上传头像');
					return;
				}
				if(!this.form.nickname){
					sheep.$helper.toast('请输入昵称');
					return;
				}
				if(!this.form.sex){
					sheep.$helper.toast('请选择性别');
					return;
				}
				if(!this.form.age){
					sheep.$helper.toast('请输入年龄');
					return;
				}
				if(this.form.age < 18){
					sheep.$helper.toast('未成年禁止申请');
					return;
				}
				if(this.isPass && !this.form.weixin){
					sheep.$helper.toast('请输入正确的微信号');
					return;
				}
				if(!this.form.mobile || !test.mobile(this.form.mobile)){
					sheep.$helper.toast('请输入正确的手机号');
					return;
				}
				if(!this.form.intro){
					sheep.$helper.toast('请输入自我介绍');
					return;
				}
				if(!this.form.city){
					sheep.$helper.toast('请输入所在城市');
					return;
				}
				if(this.imgList.length < 1){
					sheep.$helper.toast('请上传图片');
					return;
				}
				if(this.imgList.length < 1){
					sheep.$helper.toast('请上传图片');
					return;
				}
				
				if(!this.check){
					sheep.$helper.toast('未同意协议');
					return;
				}
				
				this.form.albums = this.imgList.join(',');
				ClerkApi.createClerkApply(this.form).then((res) => {
					if(res.data){
						sheep.$router.go('/pages/worker/levelList/index', {id: res.data});
					}
				});
			},
			toSec(e) {
				this.form.soundTime = e;
			},
			subscribeMessage() {
			  const event = [WxaSubscribeTemplate.CLERK_APPLY_SUCCESS];
			  event.push(WxaSubscribeTemplate.CLERK_BLIND);
			  event.push(WxaSubscribeTemplate.CLERK_ORDER);
			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
			    // 订阅后记录一下订阅状态
			    uni.removeStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS);
			    uni.setStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS, '已订阅');
			    // 隐藏订阅按钮
			    this.showSubscribeBtn = false;
			  });
			},
			async autoSubscribeMessage() {
			  // 1. 校验是否手动订阅过
			  const subscribeBtnStatus = uni.getStorageSync(WxaSubscribeTemplate.CLERK_APPLY_SUCCESS);
			  if (!subscribeBtnStatus) {
			    this.showSubscribeBtn = true;
			  }
			
			  // 2. 订阅消息
			  this.subscribeMessage();
			},
			changeCheck() {
				if(this.check){
					this.check = false;
				}else{
					this.check = true;
				}
			},
			toAggre() {
				sheep.$router.go('/pages/public/richtext', {title: '店员申请协议'})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-app {
		background-color: #fafafa;
		padding-bottom: 140rpx;
	}
	.form-box {
		background-color: #fff;
		margin: 15px;
		border-radius: 10px;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		
		.label {
			font-size: 30rpx;
			min-width: 200rpx;
		}
	}
	
	.submit-box {
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 0 15px;
		z-index: 99;
		
		.sub-btn {
			background-color: var(--ui-BG-Main);
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			padding: 10px;
			color: #fff;
			border-radius: 40px;
			font-size: 30rpx;
		}
	}
	
	.subscribe-box {
		display: flex;
		align-items: center;
		padding: 10px;
		padding-bottom: 0;
		justify-content: center;
		font-size: 28rpx;
		
		.info {
			margin: 0 10rpx;
		}
		
		.sub-btn {
			color: var(--ui-BG-Main);
		}
	}
	
	.check-box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		
		.info{
			margin: 0 10rpx;
		}
		
		.sub-btn {
			color: var(--ui-BG-Main);
		}
	}
	
</style>