<template>
	<view class="apply-wrap flex flex_column">
		<view v-if="tipTit">
			<u-alert-tips :show-icon="true" type="warning" :title="tipTit"></u-alert-tips>
		</view>
		<view class="login-form">
			<u-form v-if="!isRead" :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
				<u-form-item label="门头照片" prop="storeImage">
					<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="storeName">
					<u-input v-model="form.storeName" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
				</u-form-item>
				<u-form-item label="所在地区" 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="详细地址" prop="addrDetail">
					<u-input type="textarea" maxlength="100" v-model="form.addrDetail" placeholder="请输入详细地址"/>
				</u-form-item>
				<u-form-item label="联系人姓名" required prop="contactName">
					<u-input v-model="form.contactName" maxlength="20" placeholder="请输入联系人姓名"/>
				</u-form-item>
				<u-form-item label="联系人手机">
					{{form.contactPhone}}
				</u-form-item>
				<u-form-item label="汽配商邀请码">
					<u-input v-model="form.inviteCode" maxlength="30" :clearable="false" @input="inputDealer" @blur="findDealer" @confirm="findDealer" placeholder="如没有可不填"/>
				</u-form-item>
				<u-form-item label="汽配商" v-if="form.inviteName.length">
					{{form.inviteName||'--'}}
				</u-form-item>
			</u-form>
			<!-- 详情 -->
			<u-form v-else :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
				<u-form-item label="门头照片" prop="storeImage">
					<u-image v-if='form.storeImage' :src="form.storeImage" width="200" height="150"></u-image>
					<text v-else>未上传</text>
				</u-form-item>
				<u-form-item label="营业执照">
					<u-image v-if='form.licenseImage' :src="form.licenseImage" width="200" height="150"></u-image>
					<text v-else>未上传</text>
				</u-form-item>
				<u-form-item label="门店名称" required prop="storeName">
					{{form.storeName||'--'}}
				</u-form-item>
				<u-form-item label="所在地区" prop="label">
					{{form.label||'--'}}
				</u-form-item>
				<u-form-item label="详细地址" prop="addrDetail">
					<div style="word-break: break-all;line-height: normal;">
						{{form.addrDetail||'--'}}
					</div>
				</u-form-item>
				<u-form-item label="联系人姓名" required prop="contactName">
					{{form.contactName||'--'}}
				</u-form-item>
				<u-form-item label="联系人手机">
					{{form.contactPhone||'--'}}
				</u-form-item>
				<u-form-item label="汽配商邀请码">
					{{form.inviteCode||'未填写'}}
				</u-form-item>
				<u-form-item label="汽配商" v-if="form.inviteName.length">
					{{form.inviteName||'--'}}
				</u-form-item>
			</u-form>
		</view>
		<view class="form-btn-con flex justify_center" v-if="!isRead">
			<u-button class="form-btn" shape="circle" type="info" :loading="loading" :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 { xprhStoreApply, xprhFindDealer } from '@/api/xprh.js'
	const baseUrl = getApp().globalData.baseUrl
	export default{
		components: {
			Address,
			uniPopup,
			popupCon
		},
		data(){
			return{
				loading: false,
				form: {
					storeImage:'',
					licenseImage:'',
					storeName: '',
					addrProvince: '',
					addrCity: '',
					addrDistrict: '',
					addrProvinceName: '',
					addrCityName: '',
					addrDistrictName: '',
					addrDetail: '',
					contactName:'',
					contactPhone: '',
					label: '',
					inviteCode:'',
					inviteName:''
				},
				rules: {
					// storeImage:[
					// 	{
					// 		required: true, 
					// 		message: '请选择门头照片', 
					// 		trigger: 'change'
					// 	}
					// ],
					storeName: [
						{ 
							required: true, 
							message: '请输入门店名称', 
							trigger: ['change','blur'],
						}
					],
					// label: [
					// 	{
					// 		required: true, 
					// 		message: '请选择所在地区', 
					// 		trigger: 'change'
					// 	}
					// ],
					// addrDetail: [
					// 	{
					// 		required: true, 
					// 		message: '请输入详细地址', 
					// 		trigger: 'change'
					// 	}
					// ],
					contactName: [
						{
							required: true, 
							message: '请输入联系人姓名', 
							trigger: 'change'
						}
					]
				},
				areaIdArr: [],  //  省市区id数组
				labelArr: [],
				action: baseUrl + 'upload',
				storePhotoList: [],
				yyzzPhotoList: [],
				storeApply: null,
				isRead: true,
				tipTit: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			// 判断是否审核中
			this.storeApply = this.$store.state.vuex_storeAuthInfo
			if(this.storeApply){
				this.isRead = this.storeApply.auditStatus == 'WAIT' || this.storeApply.auditStatus == 'PASS'
				this.tipTit = this.storeApply.auditStatus == 'WAIT' ? '门店认证资料审核中，请耐心等待' : (this.storeApply.auditStatus == 'REFUSE' ? '门店认证资料审核不通过，请重新提交审核！' : '')
				this.form = Object.assign(this.form, this.storeApply)
				this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
				this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
				this.labelArr = [this.form.addrProvinceName,this.form.addrCityName,this.form.addrDistrictName]
				this.areaIdArr = [this.form.addrProvince,this.form.addrCity,this.form.addrDistrict]
				this.form.label = this.labelArr.join('-')
				this.findDealer()
			}else{
				this.form.contactPhone = this.$store.state.vuex_userInfo.mobile
				this.tipTit = ''
				this.isRead = false
			}
		},
		methods: {
			// 上传门店图片成功
			uploadStorePhoto(res){
				this.form.storeImage = res.data
			},
			// 删除门店图片
			removeStorePhoto(index){
				this.form.storeImage = ''
			},
			// 上传营业执照图片成功
			uploadYyzzPhoto(res){
				this.form.licenseImage = res.data
			},
			// 删除营业执照图片
			removeYyzzPhoto(index){
				this.form.licenseImage = ''
			},
			inputDealer(v){
				if(!this.form.inviteCode){
					this.form.inviteName = ''
				}
			},
			findDealer(v){
				if(!this.form.inviteCode){
					this.form.inviteName = ''
					return
				}
				uni.showLoading({
					title: "正在查询"
				})
				xprhFindDealer({inviteCode: this.form.inviteCode}).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						this.form.inviteName = res.data&&res.data.dealerName
					}else{
						this.form.inviteName = ''
						if(!this.isRead){
							uni.showToast({icon: 'none',title: res.message,duration:5000})
						}
					}
				})
			},
			//  表单提交
			formSubmit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.submitData()
					} else {
						console.log('验证失败');
					}
				});
			},
			submitData(){
				const _this = this
				let obj = this.form
				obj.addrProvince = this.areaIdArr[0]||''  //  省id
				obj.addrCity = this.areaIdArr[1]||''  //  市id
				obj.addrDistrict = this.areaIdArr[2]||''  //  区id
				obj.addrProvinceName = this.labelArr[0]||''  //  省
				obj.addrCityName = this.labelArr[1]||''  //  市
				obj.addrDistrictName = this.labelArr[2]||''  //  区
				 
				_this.loading = true
				//  申请试用
				xprhStoreApply(obj).then(res => {
					console.log(res)
					uni.showToast({icon: 'none',title: res.message,duration:3000})
					if(res.status == 200){
						 uni.$emit("updateAuthState")
						 setTimeout(()=>{
							 uni.switchTab({
							 	url: "/pages/index/index"
							 })
							 _this.loading = false
						 },3000)
					}else{
						_this.loading = false
					}
				})
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.labelArr = e.labelArr
				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>
