<template>
	<app-layout>
		<view class="properties_list">
			<view class="item main-left" v-for="(item,index) in dataList" :key="index" @click="selectMasterEstate(index,item.id)">
				<view class="left">
					<image :src="item.cover_img" mode=""></image>
				</view>
				<view class="main-between-y right ">
					<view class="title">{{item.name}}</view>
					<view class="addr"><image style="width: 18rpx;height: 20rpx;margin-right: 12rpx;" src="https://t17.9026.com/web/statics/image/index/location.png"></image>{{item.address}}</view>
					<view class="content t-omit-two" v-html="item.details"></view>
				</view>
				<image class="bg" src="https://t17.9026.com/web/statics/image/sale/properties_gradual.png" mode="">
				</image>
				<view class="is-mainbuilding" v-if="item.is_master_estate">主楼盘</view>
			</view>
			<AppNoData :background="'#f8f8f8'" v-if="dataList.length===0" title="您还未绑定任何楼盘"></AppNoData>
		</view>
		<!-- <view class="main-between cross-center lp">
			<view class="name">世龙广场</view>
			<image src="https://t17.9026.com/web/statics/image/index/arrow-down-bottom.png" mode=""></image>
		</view> -->
		<view class="form-box">
			<view class="title">楼盘信息</view>
			<AppAreaPicker @customevent="areaEvent" :ids="multiIndex" @cancel="areaCancel">
				<view class="main-between cross-center item" style="padding-right: 8rpx;">
					<view class="title_1">区域信息</view>
					<view class="main-right cross-center">
						<text :class="{'val':region!=='','pla':region===''}">{{region?region:'请选择'}}</text>
						<image class="arrow-right"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode="">
						</image>
					</view>
				</view>
			</AppAreaPicker>
			<view class="line"></view>
			<view class="main-between cross-center item" @click="selectBuild()">
				<view class="title_1">楼盘名称</view>
				<view class="main-right cross-center">
					<text :class="{'val':name!=='','pla':name===''}">{{name===''?'请选择':name}}</text>
					<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png"
						mode=""></image>
				</view>
			</view>
			
			<view class="line" v-show="name!=''"></view>
			<!-- <picker mode="selector" @change="bindPickerProperty" :range="propertyList" v-show="name!=''" disabled> -->
				<view class="main-between cross-center item" v-show="name!=''">
					<view class="title_1">楼盘性质</view>
					<view class="main-right cross-center">
						<text :class="{'val':property!=='','pla':property===''}">{{property?property:'请选择'}}</text>
						<image class="arrow-right"
							src="" mode="">
						</image>
					</view>
				</view>
			<!-- </picker> -->
			<view class="line" v-show="name!=''"></view>
			<view class="main-between cross-center item" @click="selectSale" v-show="name!=''">
				<view class="title_1">绑定销售</view>
				<view class="main-right cross-center">
					<text :class="{'val':sale!=='','pla':sale===''}">{{sale?sale:'请选择'}}</text>
					<image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<button type="default" @click="addmyEstate" :class="{'add':true, 'allow-add':true, 'not-add':false}"
			:disabled="fasle">添加楼盘</button>
	</app-layout>
</template>

<script>
	import {mapActions} from 'vuex'
	import AppNoData from '@/components/page-component/app-no-goods/app-no-goods.vue'
	import AppAreaPicker from "@/components/page-component/app-area-picker/app-area-picker.vue"
	export default {
		components: {
			AppAreaPicker,
			AppNoData,
		},
		data() {
			return {
				name: '',
				region: '',
				regionId:{},
				multiIndex:[],
				property: '',
				sale: '',
				
				estate_id:'',
				sale_id:'',

				propertyList: ['住宅用房', '非住宅用房'],

				dataList: [],
				
				isSwitchMainBuilding:0
			};
		},
		onShow() {
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			
			if('estateInfo' in currPage.$vm){
				this.name = currPage.$vm.estateInfo.name
				this.estate_id = currPage.$vm.estateInfo.id
				this.multiIndex = currPage.$vm.estateInfo.multiIndex
				this.property = currPage.$vm.estateInfo.property=='1'?'住宅用房':'非住宅用房'
			}
			if('saleInfo' in currPage.$vm){
				this.sale = currPage.$vm.saleInfo.name
				this.sale_id = currPage.$vm.saleInfo.id
			}
		},
		onLoad(option) {
			this.isSwitchMainBuilding=option.isSwitchMainBuilding
			this.getDate(1,'')
		},
		methods: {
			addmyEstate() {
				if(this.name===''  || this.sale===''){
					uni.showToast({
						title:'请完整填写楼盘信息',
						icon:'none'
					})
					return
				}
				this.$request({
					url:this.$api.index.binding_estate,
					data:{
						estate_id:this.estate_id,
						sale_id:this.sale_id,
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						this.getDate(1,'')
					}
					uni.showToast({
						title:res.msg,
						icon:'none',
					})
				})
			},
			areaEvent(data) {
				if (data) {
					this.regionId.province_id = data.province.id;
					this.regionId.city_id = data.city.id;
					this.regionId.district_id = data.district.id;
					this.region = [data.province.name, data.city.name, data.district.name].join('')
					
					if(this.name===''){
						this.selectBuild()
					}
				}
			},
			areaCancel(){
				this.region=''
				this.regionId={}
			},
			getDate(page, name) {
				this.$showLoading()
				this.$request({
					url: this.$api.sale.estate_list,
					data: {
						page: page,
						is_user_myself: 1,
					},
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						this.dataList = res.data.list
					}
					this.$hideLoading()
				})
			},
			...mapActions('user',{
				'selectedProperties':'selectedProperties'
			}),
			selectMasterEstate(index,estate_id){
				if(this.isSwitchMainBuilding){
					this.$request({
						url:this.$api.index.select_master_estate,
						data:{
							estate_id:estate_id
						},
						method:'post'
					}).then(res=>{
						uni.showToast({
							icon:res.code===0?'success':'none',
							title:res.msg
						})
						if(res.code===0){
							this.selectedProperties(this.dataList[index])
							uni.navigateBack()
						}
					})
				}
			},
			selectBuild() {
				uni.navigateTo({
					url: `/pages/sale/properties/addProperties?regionId=${JSON.stringify(this.regionId)}`
				})
			},
			selectSale() {
				uni.navigateTo({
					url: `/pages/index/binding/bindingSale?estate_id=${this.estate_id}&name=${this.name}`
				})
			},
			bindPickerProperty(e) {
				this.property = this.propertyList[e.target.value]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #F8F8F8;
		padding-top: 21rpx;
	}

	.lp {
		width: 678rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		padding: 0 43rpx 0 34rpx;
		margin: 0 auto;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}

		image {
			width: 18rpx;
			height: 11rpx;
		}
	}

	.form-box {
		width: 678rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 21rpx auto;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			border-bottom: 1rpx solid #E4E2E2;
			height: 99rpx;
			padding-left: 34rpx;
			line-height: 99rpx;
		}

		.item {
			height: 89rpx;
			padding: 0 32rpx 0 30rpx;
		}

		.title_1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.pla {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			margin-right: 20rpx;
		}

		.val {
			font-size: 28rpx;
			font-weight: 500;
			color: #232323;
			margin-right: 20rpx;
		}
	}

	.add {
		width: 678rpx;
		height: 90rpx;
		border-radius: 6rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.allow-add {
		background: #A18353;
	}

	.not-add {
		background-color: #bab994;
	}

	.line {
		width: 618rpx;
		height: 1rpx;
		background-color: #EAEAEA;
		margin: 0 auto;
	}

	.arrow-right {
		width: 12.8rpx;
		height: 22.8rpx;
	}

	.properties_list {
		background-color: #F8F8F8;

		.item {
			font-family: PingFang SC;
			margin: 25rpx auto;
			width: 678rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			// background-image: url(https://t17.9026.com/web/statics/image/sale/properties_gradual.png);
			padding: 25rpx;
			position: relative;
			overflow: hidden;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 80%;
				height: 100%;
			}

			.left {
				image {
					width: 153rpx;
					height: 153rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				margin-left: 25rpx;

				.title {
					font-size: 30rpx;

					font-weight: bold;
					color: #222222;
				}

				.addr {
					font-size: 22rpx;

					font-weight: 500;
					color: #222222;
				}

				.content {
					font-size: 24rpx;

					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
				}
			}
			.is-mainbuilding{
				position: absolute;top: 0;right: 0;
				width: 100rpx;
				height: 36rpx;
				background: #EEEBDF;
				border-radius: 0px 10rpx 0px 0px;
				font-size: 20rpx;
				font-weight: 500;
				color: #A6824F;
				line-height: 36rpx;
				text-align: center;
			}
		}

		.addPro {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #A18353;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
