<template>
	<view class="wrap">
		<view class="write_data_title">填写您的认证资料</view>
		<view class="write_data_item">
			<text class="write_data_item_lf" space="ensp">用    户</text>
			<text class="write_data_item_rg">{{username}}</text>
		</view>
		<view class="write_data_item">
			<text class="write_data_item_lf" space="ensp">手 机 号</text>
			<text class="write_data_item_rg">{{phone}}</text>
		</view>
		<form @submit="save">
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">店铺名称</text>
				<input name="name" class="inp_name" placeholder="输入您的店铺名称" placeholder-class="inp_name_place"></input>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">公司名称</text>
				<input name="companyName" class="inp_name" placeholder="输入您的企业名称" placeholder-class="inp_name_place"></input>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">所在地区</text>
				<picker mode="region" :value="provinceArr" @change="bindRegionChange" name="city" class="setCity">
					<view class="inp_name" style="color:#999999;font-size:30rpx;" v-if="province == ''">请选择：</view>
					<view class="inp_name" style="height:98rpx;line-height:98rpx;font-size30rpx;" v-else>{{province}}</view>
				</picker>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">详细地址</text>
				<input name="stree" :value="stree" class="inp_name" disabled="disabled" placeholder="请输入详细地址" placeholder-class="inp_name_place" @tap="chooseLocation"></input>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">门牌号</text>
				<input name="houseNumber" class="inp_name" placeholder="例:5号楼207(选填)" placeholder-class="inp_name_place"></input>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">推荐人</text>
				<input name="referrerPhone" class="inp_name" value="" placeholder="请输入推荐人的手机号(选填)" placeholder-class="inp_name_place"></input>
			</view>
			<view class="write_data_item1">
				<text class="write_data_item1_lf">业务范围</text>
				<view class="write_data_item1_rg" @tap="toSelect"><view class="iconfont nav_ul_add"></view>戳此添加主营信息</view>
			</view>
			<!-- 主营信息 -->
			<view class="main_message" v-if="select_messgae.length>0">
				<checkbox-group name="pMainBusiness">
					<view class="main_message_item" v-for="item,index in select_messgae" :key="index">
						<view class="select_messgae_item_text">{{item}}</view>
						<checkbox checked :value="item" class="main_message_item_checkbox"></checkbox>
					</view>
				</checkbox-group>
			</view>
			<!-- 服务信息 -->
			<view class="fuwu_title">服务介绍</view>
			<textarea name="businessIntroduce" maxlength="500" class="fuwu_content" placeholder="输入你企业服务介绍" placeholder-class="fuwu_content_place">
			</textarea>
			<view class="agree clear" @tap="changeCheck">
				<view class="check"><image :src="check == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image></view>
				<view class="agree_title">我已阅读并同意<navigator open-type="navigate" url="../user_agreement/user_agreement" hover-class="none"class="i">《附近养车网平台许可使用协议》</navigator></view>
			</view>
			<view class="footer">
				<button class="submit" form-type="submit">提交</button>
			</view>
		</form>	
	</view>
</template>

<script>
	import api from "../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				username:'123',//用户昵称
				phone:'',//用户手机号
				exist:0,//用户状态   入驻还是认领店铺
				roleType:'',//用户选择身份，服务商，经销商
				province:'',//用户所在地区  省市县
				provinceArr:[],//所在地区picker选择
				stree:'',//街道
				select_messgae:[],//主营信息
				select_small:'',//主营信息对应的小类
				paramType:'',//分类  小型车  商用车  4s店
				check:0,//用户协议点击状态
				descriptor:{
				  name: {
				    type: "string",
				    required: true,
				    message:'请输入您的店铺名称'
				  },
				  companyName: {
				    type: "string",
				    required: true,
				    message:'请输入您的企业名称'
				  },
				  stree:{
					type: "string",
					required: true,
					message:'请输入详细地址'  
				  },
				  pMainBusiness:{
					type: "string",
					required: true,
					message:'请选择主营信息'   
				  },
				  businessIntroduce:{
				  	type: "string",
				  	required: true,
				  	message:'请输入你企业服务介绍'   
				  }
				},//表单验证协议
			}
		},
		onLoad(options) {
			console.log(options);
			this.exist = options.exist,
			this.phone = options.phone,
			this.roleType = options.roleType,
			this.getAddress();
		},
		onShow() {
			// 然后在onshow里面
			const pages = getCurrentPages();
			const currPage = pages[pages.length - 1];  // 当前页
			this.select_messgae = currPage.select_messgae;
			this.select_small = currPage.select_small;
			this.paramType = currPage.paramType;
		},
		methods: {
			//获取地理位置
			getAddress(){
				uni.getLocation({
					success: (res) => {
						let data = {
							longitude:res.longitude,
							latitude:res.latitude
						}
						api.getAddress(data).then((res)=>{
							console.log(res);
							this.province = res.data.data.province;
							this.provinceArr = this.province.split(",")
						})
					}
				})
			},
			//所在地区picker选择
			bindRegionChange(e){
				let value = e.detail.value;
				this.provinceArr = value;
				this.province = value.join(",")
			},
			//选择街道
			chooseLocation(){
				uni.getLocation({
				    type: 'wgs84',
				    success:(res)=> {
						let latitude = res.latitude
						let longitude = res.longitude
						uni.chooseLocation({
						  latitude,
						  longitude,
						  success:((res)=>{
							console.log(res);
							this.stree = res.address;
						  }),
						  fail:(res)=>{
							uni.showToast({
							  title: '请选择地理位置',
							  icon:'none',
							  duration:2000
							})
						  }
						})
					}
				})
			},
			//跳转添加主营信息
			toSelect(){
				if(this.roleType == 1){
					uni.navigateTo({
						url:'../service_select/service_select'
					})
				}
			},
			//同意协议点击按钮
			changeCheck(){
				if(this.check == 0){
					this.check = 1;
				}else{
					this.check = 0;
				}
			},
			//保存 
			save(e){
				let value = e.detail.value;
				value.city = value.city.join(",");
				let pMainBusiness = value.pMainBusiness;
				let mianBusiness = this.select_small;
				if(mianBusiness !== undefined){
				    value.pMainBusiness = pMainBusiness.join(",");
				    mianBusiness = mianBusiness.join(",")
				}
				let data = {
					token:app.globalData.token,
					exist:this.exist,
					roleType:this.roleType,
					paramType:this.paramType,
					phone:this.phone,
					mianBusiness:mianBusiness,
					...value
				}
				console.log(data);
				this.$schema(data,this.descriptor);//表单验证
				if(this.check == 0){
					uni.showToast({
						title:'请同意协议',
						icon:'none',
						duration:2000
					})
				}else{
					api.freeEnterSubmit(data).then((res)=>{
						console.log(res);
						// let money = res.data.data.money;
						// let time = res.data.data.validityTime; 
						// let code = res.data.code;//优惠券状态
							// let id = res.data.data.id;//店铺id
					})
				}
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	  background-color: #f7f7f7;
	}
	.wrap{
	  width:100%;
	  background-color: #ffffff;
	  margin-top:20rpx;
	  overflow: hidden;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.write_data_title{
	  height:98rpx;
	  line-height: 98rpx;
	  font-size: 32rpx;
	  color:#000000;
	  font-weight: bold;
	  border-bottom: 1px solid #f2f2f2;
	  box-sizing: border-box;
	}
	.write_data_item{
	  height:100rpx;
	  line-height: 100rpx;
	  border-bottom: 1px solid #f2f2f2;
	  box-sizing: border-box;
	}
	.select_messgae_item_text{
	  width:100%;
	  height:100%;
	  overflow: hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	}
	.write_data_item_lf{
	  font-size: 30rpx;
	  color:#666666;
	  float:left;
	}
	.write_data_item_rg{
	  float:right;
	  font-size: 30rpx;
	  color:#222222;
	}
	.inp_name{
	  width:70%;
	  float:right;
	  height:100%;
	  text-align:right;
	}
	.setCity{
	  height:98rpx;
	}
	.inp_name_place{
	  font-size: 30rpx;
	  color:#999999;
	  text-align: right;
	}
	.write_data_item1{
	  width:100%;
	  margin:32rpx 0 28rpx 0;
	}
	.write_data_item1_lf{
	  font-size: 30rpx;
	  color:#666666;
	}
	.write_data_item1_rg{
	  font-size: 26rpx;
	  color:#F08300;
	  float:right;
	}
	.nav_ul_add{
	  font-size: 26rpx;
	  color:#F08300;
	  display: inline-block;
	  margin-right: 10rpx;
	}
	.main_message{
	  width:100%;
	  /* height:78rpx; */
	  border-bottom:1px solid #f2f2f2;
	}
	.main_message_item{
	  width:150rpx;
	  height:100%;
	  display: inline-block;
	  margin-right: 30rpx;
	  margin-bottom: 40rpx;
	  position: relative;
	  text-align: center;
	  line-height: 78rpx;
	  font-size: 26rpx;
	  color:#777777;
	  background:rgba(247,247,247,1);
	  border-radius:6rpx;
	}
	.main_message_item:nth-child(4n){
	  margin-right: 0;
	}
	.main_message_item_checkbox{
	  width:100%;
	  height:100%;
	  position: absolute;
	  top:0;
	  left:0;
	  opacity: 0;
	}
	.close{
	  position: absolute;
	  width:32rpx;
	  height:32rpx;
	  display: block;
	  top:-16rpx;
	  right:-16rpx;
	  text-align: center;
	  line-height: 32rpx;
	  color:rgba(34,34,34,0.5);
	}
	.main_message_item:last-child{
	  margin-right: 0;
	}
	.fuwu_title{
	  font-size: 30rpx;
	  color:#666666;
	  margin:32rpx 0 28rpx 0;
	}
	.fuwu_content{
	  width:100%;
	  height:200rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(202,202,202,1);
	  margin-bottom:40rpx;
	  padding:14rpx 20rpx;
	  box-sizing: border-box;
	  position: relative;
	  z-index: 0;
	}
	.fuwu_content_place{
	  font-size: 30rpx;
	  color:#999999;
	}
	.number{
	  font-size: 24rpx;
	  color:#999999;
	  position: absolute;
	  right:10rpx;
	  bottom:10rpx;
	}
	.agree{
	  margin-top:34rpx;
	  padding-bottom: 30rpx;
	}
	.check{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  background:rgba(239,239,239,1);
	  border:1px solid rgba(208,208,208,1);
	  display: inline-block;
	  vertical-align: text-bottom;
	}
	.right_icon{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  background:#E77817;
	  color:#ffffff;
	  display: inline-block;
	  vertical-align: text-bottom;
	}
	.agree_title{
	  font-size: 28rpx;
	  color:#222222;
	  display: inline-block;
	  margin-left: 6rpx;
	}
	.i{
	  display: inline;
	  color:#F08300;
	}
	.radius{
	  width:8rpx;
	  height:8rpx;
	  background-color: #F08300;
	  border-radius: 50%;
	  position: absolute;
	  top:14rpx;
	  left:0rpx;
	}
	
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  /* box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0; */
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  /* position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%) */
	}
	.check{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  float:left;
	  margin-top:6rpx;
	}
	.check image{
	  display: block;
	  width:100%;
	  height:100%;
	}
</style>
