<template>
	<view class="container">

		<div class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
			<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
		</div>
		<div class="communityList">
			<div class="communityItem">
				<div class="communityItem_img">
					<image mode="aspectFill" src="http://192.168.0.172:5500/com_act2Img.png" alt="" />
				</div>

				<div class="communityItem_msg">
					<div>
						<div class="communityItem_msg_title">岸芷汀兰(东区)</div>
						<div class="communityItem_msg_addr">
							河北省衡水市桃城区红旗大街与河
							阳路交叉口西北300米东车辆入口
						</div>
					</div>

					<div class="communityItem_msg_more">
						<image src="http://192.168.0.172:5500/com_communityMore.png" alt="" />
					</div>

				</div>
			</div>
		</div>
		<div class="line"></div>

		<div v-if="step == '0' && type == '0'">
			<div class="chooseTit">请选择楼栋</div>
			<div class="communityInfoList">
				<div v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo active' : 'communityInfo'" @click="choseTower(item + 1)">
					1栋{{index +1}}单元
				</div>
			</div>
			<div class="addCommunityBtn" @click="addCommunity">
				新建楼栋
			</div>
		</div>
		<div v-if="step == '0' && type == '1'">
			<div class="chooseTit">新建楼栋</div>
			<view class="item">
				<view class="label">
					<view class="item_desc">楼栋号</view>
				</view>
				<input class="right_input" type="text" @input="headerInputClick" data-name="addStorey" :value="addStorey" placeholder="请输入楼栋号" />
			</view>

			<view class="item">
				<view class="label">
					<view class="item_desc">单元号</view>
				</view>
				<input class="right_input" type="text" @input="headerInputClick" data-name="addUnit" :value="addUnit" placeholder="请输入单元号" />
			</view>

			<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>

			<div class="addCommunityBtn" @click="saveCommunity">
				确定
			</div>
		</div>

		<div v-if="step == '1' && type == '0'">
			<div class="chooseTit">请选择楼层（1栋{{storey}}单元）</div>
			<div class="communityInfoList">
				<div  v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseFloor(item +1)">
					{{ index + 1 }}层
				</div>
			</div>
			<div class="addCommunityBtn" @click="addCommunity">
				新建楼层
			</div>
		</div>
		<div v-if="step == '1' && type == '1'">
			<div class="chooseTit">新建楼层</div>
			<view class="item">
				<view class="label">
					<view class="item_desc">楼层</view>
				</view>
				<input class="right_input" type="text" @input="headerInputClick" data-name="addFloor" :value="addFloor" placeholder="请输入楼层(仅为数字)" />
			</view>


			<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>

			<div class="addCommunityBtn" @click="saveFloor">
				确定
			</div>
		</div>

		<div v-if="step == '2' && type == '0'">
			<div class="chooseTit">请选择房间（1栋{{storey}}单元/{{unit}}层）</div>
			<div class="communityInfoList">
					<div v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseRoom(item)">
						{{unit}}0{{ index +1 }}
					</div>
			</div>
			<div class="addCommunityBtn" @click="addRoom1">
				新建房间号
			</div>
		</div>

		<div v-if="step == '2' && type == '1'">
			<div class="chooseTit">新建房间号</div>
			<view class="item">
				<view class="label">
					<view class="item_desc">房间号</view>
				</view>
				<input class="right_input" type="text" @input="headerInputClick" data-name="addRoom" :value="addRoom" placeholder="请输入房间号" />
			</view>


			<div class="tip">注意：新建的房间号需经物业或平台的核实后自动建立。如核实未通过，将会创建失败！</div>

			<div class="addCommunityBtn" @click="saveRoom">
				确定
			</div>
		</div>


		<!-- 创建 -->
		<div class="dialog" v-if="show1" @click="cancel1">
			<div class="dialogCon">
				<div class="dialogCon_Tit">
					您是要创建：{{ createName }}
				</div>
				<div class="dialogCon_Con">
					新建的楼层需经物业或平台的核实 后才会创建成功。如核实未通过， 将会创建失败！
				</div>
				<div class="dialogCon_BtnList">
					<div class="dialogCon_BtnList1" @click="cancel1">取消</div>
					<div class="dialogCon_BtnList2" @click="confirm1">确定</div>
				</div>
			</div>
		</div>
		<!-- 已存在 -->
		<div class="dialog" v-if="show2" @click="cancel2">
			<div class="dialogCon">
				<div class="dialogCon_Con">
					您输入的楼层已存在， <br>
					您是否确认入住：{{ createName}}
				</div>
				<div class="dialogCon_BtnList">
					<div class="dialogCon_BtnList1" @click="cancel2">取消</div>
					<div class="dialogCon_BtnList2" @click="confirm2">确定</div>
				</div>
			</div>
		</div>

		<!-- 最后创建房间并入住 -->
		<div class="dialog" v-if="show3" @click="cancel3">
			<div class="dialogCon">
				<div class="dialogCon_Tit">
					您是要创建并入驻：
				</div>
				<div class="dialogCon_room">
					{{ createName }}
				</div>
				<div class="dialogCon_Con">
					新建的楼层需经物业或平台的核实 后才会创建成功。如核实未通过， 将会创建失败！
				</div>
				<div class="dialogCon_BtnList">
					<div class="dialogCon_BtnList1" @click="cancel3">取消</div>
					<div class="dialogCon_BtnList2" @click="confirm3">确定</div>
				</div>
			</div>
		</div>
		<!-- 最后入驻 -->
		<div class="dialog" v-if="show4" @click="cancel4">
			<div class="dialogCon">
				<div class="dialogCon_Tit">
					您是要创建并入驻：
				</div>
				<div class="dialogCon_room1">
					岸芷汀兰(东区)
				</div>
				<div class="dialogCon_room2">
					{{ createName }}
				</div>
				<div class="dialogCon_BtnList">
					<div class="dialogCon_BtnList1" @click="cancel4">取消</div>
					<div class="dialogCon_BtnList2" @click="confirm4">确定</div>
				</div>
			</div>
		</div>

		<u-popup :show="selectShow" @close="close" mode="center" customStyle="width: 500rpx;" round="20rpx">
			<view class="popup_container">
					<view class="popup_title">请确认要入驻的房产：</view>
					<view class="popup_community_name">岸芷汀兰(东区)</view>
					<view class="popup_desc">1栋4单元2层208室</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 { apiArr } from '../../../api/community';
import {
	request,
	picUrl,
	uniqueByField,
	menuButtonInfo,
	NavgateTo
} from '../../../utils';

export default {
	data() {
		return {
			localHeight: "",
			top: "",
			active: "1",
			step: "0",
			type: "0", //1新建 0选择
			createName: "8层",

			addStorey: '', // 新增楼栋号
			addUnit: '', // 新增单元楼号
			addFloor: '', // 新增楼层
			addRoom: '', // 新增房间号

			storey: '', // xx号楼
			unit: '', // 单元楼号
			room: '', // 房间号


			show1: false, //是否显示

			show2: false,
			show3: false,
			show4: false,
			selectShow: false, // 入驻房间号
		}
	},
	methods: {

		headerInputClick(e) {
			const { name } = e.currentTarget.dataset;
			const { value } = e.detail;
			this[name] = value;
		},
		
		//弹窗创建变成创建
		addCommunity() {
			this.type = "1"
		},

		//保存楼栋
		saveCommunity() {
			let that = this;
			if(!this.addStorey) {
				uni.showToast({
					title: '请输入楼栋号',
					icon: 'none',
					mask: true
				})
				return
			}
			if(!this.addUnit) {
				uni.showToast({
					title: '请输入单元号',
					icon: 'none',
					mask: true
				})
				return
			}
			uni.showModal({
				title: `您是要创建:${this.addStorey}栋${this.addUnit}单元吗？`,
				content: '新建的楼栋号需经物业或平台的核 实后才会创建成功。如核实未通过， 将会创建失败！',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.type = "0"
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//选择楼栋
		choseTower(item) {
			console.log('111', item);
			this.storey = item;
			this.step = "1"
		},


		//创建楼层
		saveFloor() {
			// this.type = "0"
			let that = this;
			if(!this.addFloor) {
				uni.showToast({
					title: '请输入楼层',
					icon: 'none',
					mask: true
				})
				return
			}
			
			uni.showModal({
				title: `您是要创建:${this.addFloor}层吗？`,
				content: '新建的楼层需经物业或平台的核实后才会创建成功。如核实未通过，将会创建失败！',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.type = "0"
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//选择楼层
		choseFloor(item) {
			this.step = "2";
			this.unit = item;
		},


		//选择房间
		choseRoom(item) {
			// this.step = "3"
			console.log('1');
			this.room = item;
			this.selectShow = true
		},

		headerPopupSubmitClick () {
			console.log('提交'); 
			
		},
		headerCloseClick() {
			this.selectShow = false;
		},

		addRoom1() {
			this.type = '1'
		},
		saveRoom() {
			// this.type = "0"
			let that = this;
			if(!this.addRoom) {
				uni.showToast({
					title: '请输入房间号',
					icon: 'none',
					mask: true
				})
				return
			}
			uni.showModal({
				title: `您是要创建:${this.addRoom}房间吗？`,
				content: '注意：新建的房间号需经物业或平台的核实后自动建立。如核实未通过，将会创建失败！',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.type = "0"
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		back() {
			if (this.step == "0") {
				if (this.type == "1") {
					return this.type = "0"
				}
				NavgateTo("1")
			}
			if (this.step == "1") {
				if (this.type == "1") {
					return this.type = "0"
				}
				this.step = "0"
			}
			if (this.step == "2") {
				if (this.type == "1") {
					return this.type = "0"
				}
				this.step = "1"
			}
			if (this.step == "3") {
				if (this.type == "1") {
					return this.type = "0"
				}
				this.step = "2"
			}
		},

		cancel4(){
			this.show4 = false
		},
		confirm4(){
		},

		cancel3(){
			this.show3 = false
		},
		confirm3(){},

		cancel2(){
			this.show2 = false
		},
		confirm2(){},

		cancel1(){
			this.show1 = false
		},
		confirm1(){},
	},

	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		// this.top = meun.height + meun.top;
		this.localHeight = meun.height;
	},

	onReachBottom() {

	},
}
</script>

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