<template>
	<!-- 商家入驻 -->
	<view class="page1">
		<view class="content" style="border-top: 1px solid #eee;">
			<view class="value">
				<view class="name">
					店铺名称
				</view>
				<view class="text">
					<input type="text" v-model="formData.shopName" placeholder="输入店铺名称" />
				</view>
			</view>
			<view class="value">
				<view class="name">
					学生商家
				</view>
				<view class="text" style="text-align: right;">
					<label class="radio" style="padding-right: 20rpx;" @tap="clickRadio(1)">
						<radio :checked="formData.isStudent == 1" /><text>是</text>
					</label>
					<label class="radio" @tap="clickRadio(0)">
						<radio :checked="formData.isStudent == 0" /><text>否</text>
					</label>
				</view>
			</view>
			<view class="value" style="height: 200rpx;">
				<view class="name" style="flex: 1;line-height: 200rpx;">
					门头图
				</view>
				<view class="text" style="width: 180rpx;padding-top: 10rpx;" @tap="pictureAdd('mentou')">
					<view class="upload-img" v-if="formData.shopIcon ==''" style="background: #f5f5f5;text-align: center;line-height: 180rpx;">
						<uni-icons type="camera" size="28" color="#777"></uni-icons>
					</view>
					<img :src="formData.shopIcon" v-if="formData.shopIcon !=''" alt="" class="upload-img">
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value">
				<view class="name">
					店铺坐标
				</view>
				<view class="text" @tap.stop="openPicker" style="text-align: right;">
					<uni-icons type="location" color="#00BFFF" size="12"></uni-icons>
					<text style="color:#00BFFF;">点击选择地址</text>
				</view>
			</view>
			<view class="value" style="height:120rpx;">
				<view class="name">
					店铺地址
				</view>
				<view class="text" style="height:120rpx;line-height: 60rpx;">
					<textarea name="" id="" v-model="formData.shopAddress" cols="30" rows="10"></textarea>
				</view>
			</view>
			<view class="value">
				<view class="name">
					所属区域
				</view>
				<view class="text" style="text-align: right;">
					<uni-data-select class="uni-data-select" :localdata="addressList" v-model="formData.regionId"
						placeholder="请选择所属区域" @change="regionChange"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value">
				<view class="name">
					联系人
				</view>
				<view class="text">
					<input type="text" v-model="formData.nickname" placeholder="输入联系人" />
				</view>
			</view>
			<view class="value">
				<view class="name">
					联系电话
				</view>
				<view class="text">
					<input type="text" v-model="formData.mobile" placeholder="输入联系电话" />
				</view>
			</view>
			<view class="value">
				<view class="name" style="flex: 1;">
					验证码
				</view>
				<view class="text" style="display: flex;width: 340rpx;">
					<input type="number" v-model="formData.code" placeholder="请输入验证码" style="width: 200rpx;text-align: center;" />
					<view class="code-btn" style="font-size: 24rpx;" size="mini" type="default" @click="sendLoginSms" :disabled="choose" :class="choose == false ? 'hasChosen':'notChosen'">
						{{ choose ? clock + '重新获取' : '获取验证码' }}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value" style="height: 200rpx;">
				<view class="name" style="flex: 1;line-height: 200rpx;">
					法人身份证正反面
				</view>
				<view class="text" style="width: 380rpx;display: flex;padding-top: 10rpx;">
					<view>
						<view class="upload-img" v-if="formData.zhengzhao ==''" @tap="pictureAdd('zheng')"
							style="background: #f5f5f5;text-align: center;line-height: 180rpx;">
							<uni-icons type="camera" size="28" color="#777"></uni-icons>
						</view>
						<img :src="formData.zhengzhao" v-if="formData.zhengzhao !=''" alt="" class="upload-img">
					</view>
					<view>
						<view class="upload-img" @tap="pictureAdd('fan')" v-if="formData.fanzhao ==''" style="background: #f5f5f5;text-align: center;line-height: 180rpx;margin-left: 20rpx;">
							<uni-icons type="camera"  size="28" color="#777"></uni-icons>
						</view>
						<img :src="formData.fanzhao" v-if="formData.fanzhao !=''" alt="" class="upload-img" style="margin-left: 20rpx;">
					</view>
				</view>
			</view>
			<view class="value">
				<view class="name">
					法人姓名
				</view>
				<view class="text">
					<input type="text" v-model="formData.shopLename" placeholder="输入法人姓名" />
				</view>
			</view>
			<view class="value">
				<view class="name">
					法人身份证
				</view>
				<view class="text">
					<input type="text" v-model="formData.shopLecard" placeholder="输入法人身份证" />
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value" style="height: 200rpx;">
				<view class="name" style="flex: 1;line-height: 200rpx;">
					营业执照
				</view>
				<view class="text" style="width: 180rpx;padding-top: 10rpx;" @tap="pictureAdd('yingye')">
					<view class="upload-img" v-if="formData.yingyezhizhao ==''" style="background: #f5f5f5;text-align: center;line-height: 180rpx;">
						<uni-icons type="camera" size="28" color="#777"></uni-icons>
					</view>
					<img :src="formData.yingyezhizhao" v-if="formData.yingyezhizhao !=''" alt="" class="upload-img">
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value" style="height: 200rpx;">
				<view class="name" style="flex: 1;line-height: 200rpx;">
					其他补充证照
				</view>
				<view class="text" @tap="pictureAdd('qita')" style="width: auto;display: flex;padding-top: 10rpx;position: relative;">
					<view class="upload-img" style="background: #f5f5f5;text-align: center;line-height: 180rpx;">
						<uni-icons type="camera" size="28" color="#777"></uni-icons>
					</view>
					<img :src="formData.qita[0]" v-if="formData.qita.length>0" alt="" class="upload-img" style="margin-left: 20rpx;">
					<view class="red-dot" v-if="formData.qita.length>0">{{formData.qita.length}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="value">
				<view class="name">
					支付宝账户
				</view>
				<view class="text">
					<input type="text" v-model="formData.aliAccount" placeholder="邮箱/手机号" />
				</view>
			</view>
			<view class="value">
				<view class="name">
					收款人姓名
				</view>
				<view class="text">
					<input type="text" v-model="formData.aliName" placeholder="支付宝账号实名认证的姓名" />
				</view>
			</view>
		</view>
		
		<button @tap.stop="submit()">保存</button>
		
	</view>
</template>

<script>
	import {
		getArea
	} from '@/utils/global.js'
	import { reg } from '@/utils/global.js'
	export default {
		data() {
			return {
				addressList:[],
				formData: {
					regionId:'',
					region:'',
					shopIcon:'',
					shopAddress: '',
					shopName:'',
					aliAccount:'',
					aliName:'',
					nickname:'',
					mobile:uni.getStorageSync('mobile')?uni.getStorageSync('mobile'):'',
					code:'',
					password:'123456',
					zhengzhao:'',
					yingyezhizhao:'',
					fanzhao:'',
					shopLename:'',
					shopLecard:'',
					qita:[],
					shopImages:'',
					id:'',
					isStudent:0, //1学生商家 0不是学生
					unionid:''
				},
				choose:false,
				isChoose:false,
				clock: 60 ,// 倒计时
			};
		},
		onLoad(option) {
			
		},
		onShow(){
			this.getRegionList()
			this.formData.mobile = uni.getStorageSync('mobile')?uni.getStorageSync('mobile'):''
		},
		methods: {
			openPicker() {
				let that = this;
				uni.chooseLocation({
					latitude:'38.335974',
					longitude:'116.805783',
					success: function(res) {
						if (res.name != '') {
							let aaa = getArea(res.address)
							that.formData.shopAddress = aaa.province + aaa.city + aaa.country + aaa.address + res.name
						} else {
							that.tui.toast("微信地址选择器调用失败，请重新选择！")
						}
					},
					fail: function(res) {
						
					}
				});
			},
			pictureAdd(type) {
				let that = this
				uni.chooseMedia({
					count: type == 'qita'?9:1,
					mediaType: ['image'],
					sourceType: ['camera', 'album'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {
							console.log('type是什么',type)
							that.upLoadFile(res.tempFiles[i].tempFilePath,type)
						}
			
					}
				})
			},
			async upLoadFile(path,type) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						if(type == 'zheng'){
							that.formData.zhengzhao = pathData.result
						}else if(type == 'fan'){
							that.formData.fanzhao = pathData.result
						}else if(type == 'yingye'){
							that.formData.yingyezhizhao = pathData.result
						}else if(type == 'mentou'){
							that.formData.shopIcon = pathData.result
						}else{
							that.formData.qita.push(pathData.result)
						}
						
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
			// 触发提交表单
			submit() {
				let that = this;
				let url = ''
				let verify = this.verifyField()
				if(verify != true){
					uni.showToast({
						title: verify + '不能为空',
						icon: 'none'
					})
					return
				}
				if (that.formData.id) {
					url = '/app/shop/updateShopIconAndRemark'
				} else {
					url = '/auth/shopRegister'
				}
				this.formData.unionid = uni.getStorageSync('unionid')
				this.formData.shopImages = this.formData.zhengzhao + '@@' + this.formData.fanzhao + '@@' + this.formData.yingyezhizhao + '@@' + JSON.stringify(this.formData.qita)
				that.tui.request(url, "post", this.formData, false, true).then((res1) => {
					if (res1.code == 200) {
						uni.setStorageSync('schoolShop',res1.result)
						uni.showModal({
							title: '提示',
							content: '提交成功，请等待管理员审核',
							success: function (res) {
								uni.navigateBack()
							}
						});
					} else {
						uni.showToast({
							title: res1.message,
							icon: 'none'
						})
					}
				})
				
			},
			clickRadio(type){
				this.formData.isStudent = type
			},
			//获取区域
			getRegionList() {
				let that = this;
				this.tui.request('/app/shopArea/getByParentId/0', 'get', {}, false, false, true).then((res) => {
					if (res.code !== 200) return
					that.addressList = res.result.map(item => {
						return {
							value: item.id,
							text: item.title
						}
					})
					console.log(that.addressList)
				})
			},
			regionChange(e){
				for (let i = 0; i < this.addressList.length; i++) {
					if (this.addressList[i].value == e) {
						this.formData.regionId = e;
						this.formData.region = this.addressList[i].text
					}
				}
				console.log(this.region)
			},
			sendLoginSms(){ // 获取验证码
				this.isChoose = false
				if(reg(this.formData.mobile,this.clock) && this.isChoose == false){
					this.choose = true
					this.setTime()
					this.tui.request("/common/captcha/sendRegistSms/"+this.formData.mobile, "GET", {
						
					}).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "发送成功",
								icon: 'success'
							})
						}else{
							this.tui.toast(res.message)
						}
					}).catch((res) => {
						this.tui.toast(res)
					})
				}else if(reg(this.formData.mobile,this.clock) && this.isChoose == true){
					
				}
			},
			setTime(){// 倒计时函数
				if(this.clock == 0){
					this.clock = 60
					this.choose = false
					return
				}else{
					this.clock--
					if(this.clock < 10){this.clock = '0'+this.clock}
				}
				setTimeout(() => { this.setTime() },1000)
			},
			verifyField(){
				let msg = ''
				let data = this.formData
				
				if(data.shopAddress == ''){
					msg = '地址'
				}else if(data.shopName == ''){
					msg = '店铺名'
				}else if(data.aliAccount == ''){
					msg = '支付宝账号'
				}else if(data.aliName == ''){
					msg = '收款人姓名'
				}else if(data.nickname == ''){
					msg = '联系人'
				}else if(data.mobile == ''){
					msg = '联系电话'
				}else if(data.code == ''){
					msg = '验证码'
				}else if(data.zhengzhao == ''){
					msg = '法人身份证正面'
				}else if(data.yingyezhizhao == ''){
					msg = '营业执照'
				}else if(data.fanzhao == ''){
					msg = '法人身份证反面'
				}else if(data.shopLename == ''){
					msg = '法人姓名'
				}else if(data.shopLecard == ''){
					msg = '法人身份证'
				}
				return msg == ""?true:msg
			}
		}
	}
</script>

<style>
	page,.page1{
		font-size: 24rpx;
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		overflow: scroll;
	}
	.content{
		width: 100%;
		height: auto;
		background: #fff;
		margin-bottom: 20rpx;
	}
	.value{
		width: 100%;
		height: 80rpx;
		display: flex;
		line-height: 80rpx;
		border-top: 1px solid #eee;
		padding: 0 20rpx;
	}
	.name{
		width: 20%;
	}
	.text{
		width: 80%;
	}
	.text input{
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
	}
	.text textarea{
		height: 120rpx;
		line-height: 40rpx;
		padding-top:20rpx;
	}
	.upload-img {
		width: 180rpx;
		height: 180rpx;
	}
	.red-dot{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 40rpx;
		background: red;
		color: #fff;
		position: absolute;
		top: 10rpx;
		right: 0;
	}
	button {
		width:95%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		color: #fff;
		background: #5fd9ee;
		border-radius: 20rpx;
		margin: 40rpx auto;
	}
	.hasChosen{
		height: 74rpx;
		line-height: 74rpx;
		color: #fff;
		border: none;
		background: #5fd9ee;
	}
	.code-btn{
		font-size: 24rpx;
		background: #00BFFF;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
		padding: 0 10rpx;
		margin-top: 10rpx;
		width: 140rpx;
	}
	.uni-select{
		border: none !important;
		padding: 0 !important;
	}
	.uni-stat__select {
		height: 100% !important;
	}
</style>