<template>
	<view class="apply-wrap flex flex_column">
		<view class="login-form">
			<u-form :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
				<u-form-item label="门头照片" required prop="storePhoto">
					<u-upload 
					@on-success="uploadStorePhoto" 
					@on-remove="removeStorePhoto" 
					:file-list="storePhotoList" 
					:action="action" 
					:max-size="2 * 1024 * 1024" 
					:width="200"
					:height="150"
					upload-text="上传门头照片"
					max-count="1"></u-upload>
				</u-form-item>
				<u-form-item label="营业执照">
					<u-upload
					@on-success="uploadYyzzPhoto" 
					@on-remove="removeYyzzPhoto" 
					:file-list="yyzzPhotoList" 
					:action="action" 
					:max-size="2 * 1024 * 1024" 
					:width="200"
					:height="150"
					upload-text="上传营业执照"
					max-count="1"></u-upload>
				</u-form-item>
				<u-form-item label="门店名称" required prop="name">
					<u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
				</u-form-item>
				<u-form-item label="所在地区" required prop="label">
					<u-input v-model="form.label" placeholder="请选择省市区" :disabled="true" @click="openAddress"/>
					<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
				</u-form-item>
				<u-form-item label="详细地址" required prop="addrDetail">
					<u-input v-model="form.addrDetail" placeholder="请输入详细地址"/>
				</u-form-item>
				<u-form-item label="联系人姓名" required prop="userName">
					<u-input v-model="form.userName" placeholder="请输入联系人姓名"/>
				</u-form-item>
				<u-form-item label="联系人手机">
					{{form.contactPhone}}
				</u-form-item>
				<u-form-item label="汽配商邀请码">
					<u-input v-model="form.code" placeholder="如没有可不填"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="form-btn-con flex justify_center">
			<u-button class="form-btn" shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'350rpx' }" @click="formSubmit">提交审核</u-button>
		</view>
	</view>
</template>

<script>
	import Address from '@/components/address.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import popupCon from '@/components/uni-popup/popup-con.vue'
	import { sendVerifyCode, apply, validateUser } from '@/api/user.js'
	const baseUrl = getApp().globalData.baseUrl
	export default{
		components: {
			Address,
			uniPopup,
			popupCon
		},
		data(){
			return{
				theme: '',
				form: {
					name: '',
					addrProvince: '',
					addrCity: '',
					addrDistrict: '',
					addrDetail: '',
					contactPhone: '',
					label: ''
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入门店名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					label: [
						{
							required: true, 
							message: '请选择所在地区', 
							trigger: 'change'
						}
					],
					addrDetail: [
						{
							required: true, 
							message: '请输入详细地址', 
							trigger: 'change'
						}
					],
				},
				areaIdArr: [],  //  省市区id数组
				action: baseUrl + '/upload',
				storePhotoList: [],
				itemIconArr: [], // 门店图片
				yyzzPhotoList: [],
				yyzzIconArr: [], // 营业执照图片
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
		},
		methods: {
			// 上传门店图片成功
			uploadStorePhoto(res){
				this.itemIconArr.push(res.data)
			},
			// 删除门店图片
			removeStorePhoto(index){
				this.itemIconArr.splice(index,1)
			},
			// 上传营业执照图片成功
			uploadYyzzPhoto(res){
				this.yyzzIconArr.push(res.data)
			},
			// 删除营业执照图片
			removeYyzzPhoto(index){
				this.yyzzIconArr.splice(index,1)
			},
			//  表单提交
			formSubmit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.submitData()
					} else {
						console.log('验证失败');
					}
				});
			},
			submitData(){
				let obj = this.form
				obj.addrProvince = this.areaIdArr[0]  //  省id
				obj.addrCity = this.areaIdArr[1]  //  市id
				obj.addrDistrict = this.areaIdArr[2]  //  区id
				//  申请试用
				apply(obj).then(res => {
					console.log(res)
					if(res.status == 200){
						 
					}else{
						uni.showToast({icon: 'none',title: res.message})
					}
				})
			},
			//  获取验证码
			getCodeValidate(){
				if(this.form.contactPhone){
					//  校验手机号是否注册过
					validateUser({phone: this.form.contactPhone}).then(res => {
						if(res.status == 200){
							//  图文验证码
							this.$refs.imageTxtPopup.open()
						}else{
							uni.showToast({icon: 'none',title: res.message})
						}
					})
				}else{
					uni.showToast({icon: 'none',title: '请先输入手机号'})
				}
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
				this.form.label = e.label
			},
			openAddress(){
				//  省市区  回显     参数为省市区id数组
				this.$refs.applyAddress.open(this.areaIdArr)
			},
		}
	}
</script>
<style scoped lang="scss">
	.apply-wrap{
		height: 100vh;
		background-color: #fff;
		.login-form{
			padding: 0.7rem 1.5rem;
			flex-grow: 1;
			overflow: auto;
		}
		.form-btn-con{
			padding: 1rem;
		}
	}
</style>
