<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="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="所在地区" required prop="label">
					<u-input v-model="form.label" placeholder="请选择省市区" :disabled="true" @click="openAddress"/>
					<Address ref="applyAddress" :isJrMini="true" @onConfirm="areaConfirm"></Address>
				</u-form-item>
				<u-form-item label="详细地址" required prop="addrDetail">
					<u-input v-model="form.addrDetail" :maxlength="100" placeholder="请输入详细地址(最多100个字符)"/>
				</u-form-item>
				<u-form-item label="联系人姓名" required prop="contactName">
					<u-input v-model="form.contactName" :maxlength="20" placeholder="请输入联系人姓名(最多20个字符)"/>
				</u-form-item>
				<u-form-item label="联系人手机">
					{{form.contactPhone}}
				</u-form-item>
				<u-form-item label="关联客户" required prop="customerSn">
					<u-input v-model="form.customerName" type="select" placeholder="请输入选择关联客户" @click="chooseCustome" />
				</u-form-item>
				<u-form-item label="结算方式" required prop="settleType">
					<u-input v-model="form.settleTypeDictValue" placeholder="请输入选择结算方式" type="select" @click="settleStyleModal = true" />
					<u-picker v-model="settleStyleModal" @confirm="settleStyleChange" :range="settleStyleList" range-key="dispName" mode="selector"></u-picker>
				</u-form-item>
				<u-form-item label="授信金额" v-if="form.settleType == 'CREDIT'" required prop="creditLimit">
					<u-input :clearable="false" type="digit" :min="100" :maxlength="8" @blur="numberToFixed('creditLimit',2,999999)" v-model.trim="form.creditLimit" placeholder="请输入大于100的数字,最多两位小数"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="form-btn-con flex justify_center">
			<u-button class="form-btn" shape="circle" :loading="loading" 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 { xprhStoreApplyDetail, xprhStoreApplyAudit } from '@/api/approveStore'
	import { clzConfirm, numberToFixed } from '@/libs/tools';
	const baseUrl = getApp().globalData.baseUrl
	export default{
		components: {
			Address,
		},
		data(){
			return{
				loading: false,
				theme: '',
				form: {
					storeName: '', // 门店名称
					contactPhone: '', //  联系手机
					contactName: '', //  联系人
					label: '',
					addrProvince: undefined, //  省
					addrProvinceName: '',
					addrCity: undefined, // 市
					addrCityName: '',
					addrDistrict: undefined, // 区
					addrDistrictName: '',
					addrDetail: '', //  详细地址
					storeImage: '', // 门头照片
					licenseImage: '', // 营业执照
					settleType: undefined, //  结算方式
					settleTypeDictValue: undefined,
					customerSn: undefined, //  关联客户
					customerName: undefined,
					creditLimit: '', //  授信额度
					delearSn: undefined,
					applySn: undefined,
					auditStatus: 'PASS' // 通过
				},
				rules: {
					storeImage:[{ required: true, message: '请选择门头照片', trigger: 'change' }],
					storeName: [{ required: true, message: '请输入门店名称', trigger: 'change' }],
					contactMobile: [{ required: false, pattern: /^\d{30}$/, message: '请输入正确的手机号', trigger: 'change' }],
					label: [{ required: true, message: '请选择地区', trigger: 'change' }],
					addrDetail: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
					contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'change' }],
					settleType: [{ required: true, message: '请选择收结算方式', trigger: 'change' }],
					customerSn: [{ required: true, message: '请选择关联客户', trigger: 'change' }],
					// creditLimit: [{ required: true, message: '请输入授信金额', trigger: 'change' }],
				},
				areaIdArr: [],  //  省市区id数组
				labelArr: [],
				action: baseUrl + 'upload',
				storePhotoList: [],
				yyzzPhotoList: [],
				settleStyleModal: false,
				settleStyleList: []
			}
		},
		// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			const _this = this
			this.applySn = options.sn
			this.getDetail()
			this.settleStyleList = this.$store.state.vuex_shelfSettleType
			
			// 选择关联客户
			uni.$on("addCustome",function(data){
				_this.form.customerSn = data.customerSn
				_this.form.customerName = data.customerName
			})
		},
		onUnload() {
			uni.$off("addCustome")
		},
		methods: {
			// 小数点后两位
			numberToFixed: function (key, num, max) {
				let val = this.form[key]
				let ret = numberToFixed(val, num, max)
				this.$nextTick(() => {
					this.form[key] = ret < 100 ? 100 : ret
				})
			},
			//  获取详细
			getDetail () {
			  xprhStoreApplyDetail({ sn: this.applySn }).then(res => {
			    if (res.status == 200) {
			      this.form = Object.assign(this.form, res.data)
			      this.storePhotoList = this.form.storeImage ? [{url:this.form.storeImage}] : []
			      this.yyzzPhotoList = this.form.licenseImage ? [{url:this.form.licenseImage}] : [],
				  this.form.addrDetail = this.form.addrDetail || ''
				  if(this.form.addrProvinceName&&this.form.addrCityName&&this.form.addrDistrictName){
					  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('-')
				  }else{
					  this.labelArr = []
					  this.areaIdArr = []
					  this.form.label = ''
				  }
			      this.form.auditStatus = 'PASS' // 通过
			    } else {
			      this.$refs.ruleForm.resetFields()
			    }
			  })
			},
			// 上传门店图片成功
			uploadStorePhoto(res){
				this.form.storeImage = res.data
			},
			// 删除门店图片
			removeStorePhoto(index){
				this.form.storeImage = ''
			},
			// 上传营业执照图片成功
			uploadYyzzPhoto(res){
				this.form.licenseImage = res.data
			},
			// 删除营业执照图片
			removeYyzzPhoto(index){
				this.form.licenseImage = ''
			},
			// 收款方式  change
			settleStyleChange(ind){
				this.form.settleType = this.settleStyleList[ind].code || undefined
				this.form.settleTypeDictValue = this.settleStyleList[ind].dispName || undefined
				this.form.creditLimit = ''
			},
			// 选择关联客户
			chooseCustome(){
				uni.navigateTo({
					url: "/pages/sales/chooseCustomer?backPage=authPass"
				})
			},
			//  表单提交
			formSubmit(){
				const _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if((_this.form.creditLimit >= 100 && _this.form.settleType == 'CREDIT') || _this.form.settleType !== 'CREDIT'){
							clzConfirm({
							  title: '提示',
							  content: '审核通过后,即可成为认证门店,确认审核通过吗?',
							  success: function(res) {
							  	if (res.confirm || res.index == 0) {
								  _this.submitData()
							  	}
							  }
							})
						}else{
							uni.showToast({
								icon: 'none',
								title: '请输入授信金额'
							})
						}
					} 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
				obj.addrProvinceName = this.labelArr[0]  //  省
				obj.addrCityName = this.labelArr[1]  //  市
				obj.addrDistrictName = this.labelArr[2]  //  区
				this.loading = true
				//  申请试用
				xprhStoreApplyAudit(obj).then(res => {
					console.log(res)
					if(res.status == 200){
						 uni.navigateBack()
						 uni.$emit("updateAuthState")
					}
					uni.showToast({icon: 'none',title: res.message})
					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{
		width:100%;
		height: 100vh;
		background-color: #fff;
		.login-form{
			padding: 0.7rem 1.5rem;
			flex-grow: 1;
			overflow: auto;
		}
		.form-btn-con{
			padding: 1rem;
		}
	}
</style>