<template>
	<view class="page-app theme-light main-green font-1">
		<su-navbar title="编辑资料" statusBar></su-navbar>
		
		<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.experience" />
			</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="submit-box">
			<view class="sub-btn" @click="saveApply">提交申请</view>
		</view>
		
		<s-menu-tools />
		<s-auth-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 ClerkApi from '@/sheep/api/worker/clerk'; 
	import sheep from '@/sheep';
	export default {
		components: {
			FormAvatar,
			FormSex,
			FormVoice, 
			FormImage,
		},
		props: {
			
		},
		data() {
			return {
				form: {
					id: 0,
					avatar: '',
					nickname: '',
					sex: '',
					age: '',
					weixin: '',
					mobile: '',
					experience: '',
					intro: '',
					city: '',
					albums: '',
					sound: '',
					soundTime: '',
				},
				imgList: [],
			}
		},
		onLoad(options) {
			this.form.id = options.id;
			this.init();  
		},
		computed: {
			isPass() {
				return sheep.$store('user').tradeConfig.weixinEnabled;
			},
		},
		methods: {
			init() {
				ClerkApi.getClerkApply(this.form.id).then((res) => {
					this.form = res.data;
					if(this.form.albums){
						this.imgList = this.form.albums.split(',');
					}
				});
			},
			saveApply() {
				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.isPass && !this.form.weixin){
					sheep.$helper.toast('请输入正确的微信号');
					return;
				}
				if(!this.form.mobile){
					sheep.$helper.toast('请输入正确的手机号');
					return;
				}
				if(!this.form.experience){
					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;
				}
				this.form.albums = this.imgList.join(',');
				ClerkApi.updateClerkApply(this.form).then((res) => {
					
				});
			},
			toSec(e) {
				this.form.soundTime = e;
			},
		}
	}
</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;
		}
	}
	
</style>