<template>
 <view class="container">
	<view class="main">
		<view class="table">
			<view class="label">小区名称</view>
			<input type="text" placeholder="请输入小区名称" :value='name' data-name="name" @input="headerInputClick">
		</view>
		<view class="table">
			<view class="label">物业公司</view>
			<input type="text" placeholder="请输入物业公司全称" :value='managementName' data-name="managementName" @input="headerInputClick">
		</view>
		<view class="table">
			<view class="label">小区地址</view>
			<input type="text" placeholder="请输入小区地址" :value='addr' data-name="addr" @input="headerInputClick">
		</view>
		<view class="table">
			<view class="label">物业服务电话</view>
			<input type="number" placeholder="请输入物业服务电话" :maxlength=11 :value='managementMobile' data-name="managementMobile" @input="headerInputClick">
		</view>
		<view class="tip">
			注意:新建的小区平台会与物业进行核实，核实后自动建立。如核实未通过，将会创建失败!
		</view>
	</view>
	<view class="btn" @click="headerSubmitClick">确定</view>

	<u-popup :show="show" @close="close" mode="center" customStyle="width: 500rpx;" round="20rpx">
		<view class="popup_container">
				<view class="popup_title">您是要创建：</view>
				<view class="popup_community_name">{{ name }}</view>
				<view class="popup_desc">新建的小区平台会与物业进行核实，核实后自动建立。如核实未通过，将会创建失败!</view>
				<view class="popup_btn_List">
					<view class="popup_btn" @click="headerCloseClick">取消</view>
					<view class="popup_btn popup_btn1" @click="headerPopupSubmitClick">确定</view>
				</view>
		</view>
	</u-popup>
 </view>
</template>

<script>
import { request,NavgateTo, isPhone } from '../../../utils';
import { apiArr } from '../../../api/community';
export default {
	data() {
		return {
			name: '',
			managementName: '',
			addr: '',
			managementMobile: '',
			show: false,
		}
	},
	methods: {
		headerPopupSubmitClick () {
			console.log('提交'); 
			
		},
		headerCloseClick() {
			this.show = false;
		},

		headerInputClick(e) {
			const { name } = e.currentTarget.dataset;
			const { value } = e.detail;
			this[name] = value;
		},
		
		headerSubmitClick() {
			if(!this.name) {
				uni.showToast({
					title: '请输入小区名称',
					icon: 'none'
				})
				return;
			}
			if(!this.managementName) {
				uni.showToast({
					title: '请输入物业公司',
					icon: 'none'
				})
				return;
			}
			if(!this.addr) {
				uni.showToast({
					title: '请输入小区地址',
					icon: 'none'
				})
				return;
			}
			if(!this.managementMobile) {
				uni.showToast({
					title: '请输入物业联系电话',
					icon: 'none'
				})
				return;
			}
			if(this.managementMobile.length !== 11) {
				uni.showToast({
					title: '请输入正确的11位电话号码',
					icon: 'none'
				})
				return;
			}
			if(!isPhone(this.managementMobile)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return;
			}
			this.show = true;
		}
	},

	onLoad(options) {

	},

	onReachBottom() {

	},
}
</script>

<style>
@import url("./index.css");
</style>
