<template>
	<view class="content">
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">机构名称</text>
				<input class="input" type="text" v-model="name" placeholder="请输入机构名称" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">联系电话</text>
				<input class="input" type="text"  v-model="phone" placeholder="请输入联系电话" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">负责人</text>
				<input class="input" type="text"  v-model="leader" placeholder="请输入负责人姓名" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="content_box">
			<view class="row b-b" @tap="showPicker('region')">
				<text class="tit">省市区</text>
				<input class="input" @focus='outFocus' v-model="addr" placeholder="请选择省市区"></input>
			</view>
			<w-picker mode="region"  :value="defaultRegion" default-type="value"  @confirm="onConfirm($event,'region')" @cancel="handleCancel" ref="region" ></w-picker>
			<view class="row b-b">
				<text class="tit">详细地址</text>
				<input class="input" type="text"  v-model="address" placeholder="请输入商家地址" placeholder-class="placeholder" />
			</view>
		</view>
		<!-- <view class="content_box">
			<view class="examine_list">
				<view class="examine_name">营业执照</view>
				<view class="examine_img"><image :src="img" @click="scImg('img')"></image></view>
			</view>
		</view> -->
		<view class="check_box flex_item">
			<view><radio style="transform: scale(0.75)" @click="Getcheckbox" color="#6786FB" :checked="checked" /></view>
			<view class="" >我已阅读并同意<text @click="TOprivacy">《预约平台用户协议》</text></view>
		</view>
		<view class="add-btn" @click="confirm">提交申请</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import wPicker from "@/components/w-picker/w-picker.vue"
import { setOrgan } from "@/api/index.js"
import { getUserInfo } from '@/api/login.js';
// import { upload } from '@/api/index.js';
export default {
	components: {
		uniList,
		uniListItem,
		wPicker
	},
	data() {
		return {
			loading: false,
			checked:false,
			name:'',//机构名称
			phone:"",
			region:'',
			defaultRegion:[],
			defaultRegion1:[],
			options:[],
			leader :'',//负责人
			addr:'',//省市区
			address:'',//详细地址
			// img:'/static/img/add.png',
		};
	},
	onLoad(option) {
		
	},
	methods: {
		...mapMutations(['setUserInfo']),
		TOprivacy(){
			uni.navigateTo({
				url:'/pages/public/uagreement'
			})
		},
		//省市区弹窗
		showPicker(type){
			this.$refs[type].show();
		},
		// scImg(item) {
		// 	upload({
		// 		file: ''
		// 	}).then(e => {
				
		// 	}).catch((e) => {
				
		// 	});
		// },
		//阅读并同意
		Getcheckbox() {
			let obj = this;
			obj.checked = !obj.checked;
		},
		//取消弹窗
		handleCancel(){
			
		},
		outFocus(e){
			console.log(event.target)
			event.target.blur()
		},
		//省市区选择确定
		onConfirm(res,type){
			let obj = this;
			obj.result=res;
			console.log(res,'res')
			obj.addr = res.result;
			if(res.name){
				obj.province = res.name[0];
				obj.city = res.name[1];
				obj.district = res.name[2];
			}else{
				obj.province = '北京市';
				obj.city = '北京市';
				obj.district = '东城区';
			}
			obj.province_id = res.value[0];
			obj.city_id = res.value[1];
			obj.district_id = res.value[2];
			obj.hospital = '';//重置医院
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.loading) {
				return
			}
			if(!obj.name){
				obj.$api.msg('请填写机构名称');
				return;
			}
			if(!obj.phone){
				obj.$api.msg('请填写联系电话');
				return;
			}
			if(!obj.leader){
				obj.$api.msg('请填写负责人姓名');
				return;
			}
			if(!obj.addr){
				obj.$api.msg('请选择省市区');
				return;
			}
			if(!obj.address){
				obj.$api.msg('请填写详细地址');
				return;
			}
			if(obj.checked == false){
				obj.$api.msg('请阅读并同意机构入驻协议');
				return;
			}
			obj.loading = true
			setOrgan({
				name: obj.name,
				mobile: obj.phone,
				province: obj.province,
				province_id: obj.province_id,
				city: obj.city,
				city_id: obj.city_id,
				district: obj.district,
				district_id: obj.district_id,
				leader:obj.leader,
				detail_address:obj.address,
				latitude:1,
				longitude:1
			})
				.then(function(e) {
					obj.loading = false
					obj.$api.msg(e.msg);
					obj.userInfo();
					if(e.msg == '已提交，请等待审核！'){
						setTimeout(function() {
							// uni.switchTab({
							// 	url: '/pages/index/home'
							// })
							document.addEventListener(
								"WeixinJSBridgeReady",
								function() {
									WeixinJSBridge.call("closeWindow");
								},
								false
							);
							//ios手机
							WeixinJSBridge.call("closeWindow");
						}, 2000);
					}
				})
				.catch(e => {
					obj.loading = false
					console.log(e)
				});
		},
		//选择身份后更新用户信息
		userInfo() {
			getUserInfo({})
				.then(function(e) {
					console.log(e);
					uni.setStorageSync('userInfo', e.data);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//跳转机构入驻协议
		// toagreement(){
		// 	uni.navigateTo({
		// 		url: '/pages/public/agreement'
		// 	});
		// },
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 25rpx;
}
.content_box {
	background-color: #ffffff;
	width: 92%;
	margin: 0rpx auto;
	border-radius: 15rpx;
	margin-bottom: 25rpx;
}
.row {
	display: flex;
	align-items: center;
	// position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;

	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	padding-bottom: 25rpx;
}
.examine_img image {
	width: 200rpx;
	height: 200rpx;
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	height: 100rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: #6786FB;
	line-height: 100rpx;
	text-align: center;
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 28rpx;
	text{
		color: #6786FB;
	}
}

</style>
