<template>
	<view class="search">
		<u-sticky>
			<view class="search-wrapper">
				<u-search color="#333333" border-color="#E8E8E8" :showAction="true" actionText="搜索" :animation="false"
					v-model="where.keywords" @search="onSearch" @custom="onSearch"
					:actionStyle="actionStyle"></u-search>
			</view>
		</u-sticky>
		<view class="order-total">
			<view class="pay-btn">
				<view class="btn">
					<u-button text="上架" plain size="small" @click="onStatus(0)"></u-button>
				</view>
				<view class="btn">
					<u-button text="下架" plain size="small" @click="onStatus(10)"></u-button>
				</view>
				<view class="btn">
					<u-button text="删除" plain size="small" @click="onDel()"></u-button>
				</view>
				<view class="btn">
					<u-button text="编辑" plain size="small" @click="onEdit()"></u-button>
				</view>
				<!-- <view class="btn">
					<u-button text="分享" plain size="small" @click="onPay(item.logId)"></u-button>
				</view> -->
				<!-- <view class="btn" v-if="item.payStatus == 10">
					<u-button text="取消订单" size="small" @click="onRemove(item.logId)"></u-button>
				</view> -->
			</view>
		</view>
		<view class="house">
			<view class="btn" @click="onRadio">
				<label class="radio"><radio value="r1" color="#ff0000" :checked="checked" />全选</label>
				<!-- <u-radio activeColor="red" v-model="select" label="全选" @change="onRadio"></u-radio> -->
				<!-- <u-radio label="取消" @change="onRadio"></u-radio> -->
			</view>
			<view class="list">
				<block v-for="(item,index) in list" :key="index">
					<view class="item" @click="addHouseInfo(item.houseId)">
						<view class="badge" @click.stop="onBadge(item,index)"><u-badge  :isDot="true" type="info"
								:bgColor="item.selected ? bgColor : ''"></u-badge></view>
						<view class="status">
							<u-tag :text="item.status == 0 ? '上架' : '下架'" plain
								:type="item.status == 0 ? 'success' : 'error'"></u-tag>
						</view>
						<image class="image" :src="item.files[0].url" mode="aspectFill"></image>
						<view class="info">
							<view class="title">{{ item.houseTitle }}</view>
							<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
							<view class="price">{{ item.rent }}元/月</view>
						</view>
					</view>
				</block>
				<u-empty mode="data" icon="https://file.wsdns.cn/empty/data.png" v-if="list.length == 0">
				</u-empty>
			</view>
		</view>
		<u-gap></u-gap>
		<view class="float">
			<view class="release">
				<u-button text="添加房源" type="primary" shape="circle" @click="addHouseInfo"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import {
		fileUrl
	} from '@/config.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	import * as UserApi from '@/api/user'
	import * as UserProfileApi from '@/api/love-user-profile.js'
	import * as UploadApi from '@/api/upload'
	import * as DictApi from '@/api/dict.js'
	import * as HouseInfoApi from '@/api/house-info.js'

	export default {
		data() {
			return {
				list: [],
				loadMore: true,
				status: '加载更多',
				page: 1,
				where: {},
				select: [],
				checked: false,
				bgColor: '#ff0000',
				selectId: 0
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			this.onSearch()
			// this.getDict()
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules)
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},

		// 触底函数
		onReachBottom() {
			console.log("触底函数: ");
			const app = this
			if (app.loadMore) {
				app.page = ++app.page;
				app.onRefreshList()
			}
		},
		methods: {
			onRefreshList() {
				const app = this
				const userId = uni.getStorageSync('userId')
				app.where.page = app.page
				app.where.userId = userId
				return new Promise((resolve, reject) => {
					HouseInfoApi.pageHouseInfo(app.where)
						.then(result => {
							const list = result.data.list.map(d => {
								d.files = JSON.parse(d.files) || []
								return d
							})
							// 合并新数据
							app.list = app.list.concat(list)
							if (result.data.count > app.list.length) {
								app.canReset = true
							} else {
								app.canReset = false
							}
							console.log("app.list: ", app.list);
							resolve(list)
						})
				})
			},

			onEdit() {
				const {
					selectId
				} = this
				if(selectId == 0){
					this.$error('请选择房源')
					return false
				}
				if (selectId > 0) {
					this.$push('sub_pages/house/add?id=' + selectId)
				}

			},

			onDel() {
				const app = this
				app.list.map(d => {
					if (d.selected == true) {
						HouseInfoApi.removeHouseInfo(d.houseId).then(res => {
							app.$success(res.message)
						})
					}
				})
				app.onSearch()
			},
			onStatus(status) {
				const app = this
				app.list.map(d => {
					if (d.selected == true) {
						HouseInfoApi.updateHouseInfo({
							houseId: d.houseId,
							status
						})
					}
				})
				app.onSearch()
			},

			onSearch() {
				this.list = []
				this.page = 1
				this.checked = false
				this.onRefreshList()
			},
			onBadge(item, index) {
				this.list[index].selected = true
				this.selectId = item.houseId
			},
			addHouseInfo(id) {
				const app = this
				uni.navigateTo({
					url: `/sub_pages/house/add?id=` + id,
					events: {
						reload: ({
							status // false
						}) => {
							app.onSearch()
						}
					}
				})
			},
			onRadio(e) {
				const { list } = this
				this.list = list.map((d) => {
					d.selected = true
					return d
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f7f8fa;
	}
</style>
<style lang="scss" scoped>
	.container {}

	.search-wrapper {
		display: flex;
		height: 64rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	// 搜索输入框
	.search-input {
		width: 80%;
		background: #fff;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 10rpx 0 0 10rpx;
		box-sizing: border-box;
		overflow: hidden;

		.search-input-wrapper {
			display: flex;

			.left {
				display: flex;
				width: 60rpx;
				justify-content: center;
				align-items: center;

				.search-icon {
					display: block;
					color: #b4b4b4;
					font-size: 28rpx;
				}

			}

			.right {
				flex: 1;

				input {
					font-size: 28rpx;
					height: 72rpx;
					line-height: 72rpx;
					display: flex;
					align-items: center;

					.input-placeholder {
						color: #aba9a9;
					}
				}

			}
		}
	}

	// 搜索按钮
	.search-button {
		width: 20%;
		box-sizing: border-box;

		.button {
			height: 64rpx;
			font-size: 28rpx;
			border-radius: 0 10rpx 10rpx 0;
			background: $main-bg;
			color: $main-text;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	// 订单合计
	.order-total {
		margin: 10rpx auto;
		font-size: 26rpx;
		vertical-align: bottom;
		text-align: right;
		height: 50rpx;
		padding-top: 10rpx;
		display: flex;
		justify-content: center;

		.pay-btn {
			display: flex;

			.btn {
				margin-right: 16rpx;
			}
		}

		.total-price {
			display: flex;
			align-items: center;
		}

		.unit {
			margin-left: 8rpx;
			margin-right: -2rpx;
			font-size: 26rpx;
		}

		.money {
			font-size: 28rpx;
			color: #ff0000;
		}
	}

	.house {
		margin: 30rpx auto;
		width: 680rpx;

		.btn {
			width: 150rpx;
			margin: 40rpx 0;
		}

		.list {
			width: 680rpx;
			margin: auto;

			.item {
				border-radius: 30rpx 30rpx 0 0;
				box-shadow: 0 3rpx 10rpx 0px #999999;
				background-color: #FFFFFF;
				margin: 50rpx auto;
				position: relative;

				.badge {
					scale: 3;
					position: absolute;
					left: 30rpx;
					top: 30rpx;
				}

				.status {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
				}

				.image {
					width: 680rpx;
					height: 360rpx;
					border-radius: 30rpx 30rpx 0 0;
				}

				.info {
					padding: 20rpx 20rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-size: 40rpx;
					}

					.desc {
						color: #999999;
						font-size: 28rpx;
					}

					.price {
						color: #ff0000;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.float {
		width: 750rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 100rpx;

		.release {
			width: 500rpx;
			opacity: 0.9;
		}
	}
</style>