<template>
	<view class="index">
		<view class="search">
			<uni-search-bar placeholder="请输入房间名" @clear="clear" @cancel="cancel" @confirm="search"
				v-model="queryParams.roomName">
			</uni-search-bar>
		</view>
		<view style="height: 50rpx;width: 100%;"></view>
		<scroll-view class="scroll-views" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="list">
				<view class="box" v-for="(item,index) in list" :key="index" @click="detail(item)">
					<view>
						<view>
							<text>{{item.roomName}}</text>
						</view>
						<view v-for="(tab,index) in rolelist" :key="index" v-show="item.auditStatus==tab.dictValue"
							class="status">
							{{tab.dictLabel}}
						</view>
					</view>
					<view>
						<view>
							<image  mode="aspectFill"
								:src="basePath+item.staffOneStopRoom[0].roomImgs"></image>
						</view>
						<view>
							<view><text>活动房：</text><text>{{item.rtTheme}}</text></view>
							<view><text>预约时间：</text><text>{{item.rtTime}} {{item.rtTimePeriod}}</text></view>
							<view>
								<text>用途：</text><text>{{item.rtPurpose}}</text>
							</view>
							<view><text>人数：</text><text>{{item.rtPeople}}人</text></view>
							<view style="flex: 1;text-align: end;"><text>{{item.rtCreattime}} 提交</text><text
									style="color: #1890FF;" @click="detail(item)">详情</text></view>
						</view>
					</view>
				</view>
			</view>

			<view class="empty" v-if="list.length==0&&!topLoading">
				<image src="@/static/empty.png" mode="widthFix"></image>
				暂时没有数据
			</view>
			<view class="loading-more-top" v-if="topLoading">
				<uni-load-more style="padding-top: 90px;" status="loading" />
			</view>
			<view class="loading-more" v-if="loading">
				<uni-load-more status="loading" />
			</view>
			<view class="no-more" v-if="!loading&&list.length!=0">
				到底啦~~
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	import {
		listRoomReservation,
		getDetailList,
		listByUserName
	} from '@/api/OneStopCommunity/appointment.js'
	import {
		baseUrl
	} from "@/config.js";
	export default {
		data() {
			return {
				basePath: baseUrl,
				list: [],
				loading: false,
				topLoading: true,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					roomName: ""
				},
				srclist: [],
				rolelist: []
			}
		},
		filters: {
			formatPath(pathJSON) {
				if (pathJSON.indexOf(',') !== -1) {
					let arr = pathJSON.split(',');
					return arr[0]
				}else{
					return pathJSON;
				}
			}
		},
		methods: {
			cancel(res) {
				this.queryParams.roomName = ""
				this.getlist()
			},
			clear(res) {
				this.queryParams.roomName = ""
				this.getlist()
			},
			async getlist() {
				let res = await listByUserName(this.queryParams)
				var arr = res.rows
				for (var i = 0; i < res.rows.length; i++) {
						if(res.rows[i].staffOneStopRoom[0].roomImgs!=null){
							var  split = res.rows[i].staffOneStopRoom[0].roomImgs.split(",")
							arr[i].staffOneStopRoom[0].roomImgs=split[0]
						}else{

						}
				}
				this.loading = false;
				if (this.queryParams.pageNum == 1) {
					this.list = arr; // 如果是第一页，直接显示新数据
				} else {
					this.list = this.list.concat(arr); // 否则追加新数据到列表中
				}
				this.totalPages = Math.ceil(res.total / this.queryParams.pageSize);
				this.topLoading = false;
				// console.log(res)
			},
			detail(item) {
				uni.navigateTo({
					url: `detail?rtId=${item.rtId}`
				})
			},
			search() {
				this.getlist()
			},
			scrolltolower() {
				if (this.queryParams.pageNum < this.totalPages) {
					this.queryParams.pageNum++;
					this.loading = true;
					setTimeout(() => {
						//请求参数
						this.getlist()
					}, 1000)
				} else {

				}
			},
			async getrole() {
				let res = await getDicts('rt_fu_audit_au_status')
				this.rolelist = res.data
				console.log(res.data)
			}
		},
		onShow() {
			this.getlist();
			this.getrole();
		},

	}
</script>

<style lang="scss" scoped>
	.index {
		min-height: 100vh;
		background-color: #F5F5F7;
		// padding: 40rpx;

		.search {
			width: 100%;
			background-color: white;
			position: fixed;
			z-index: 10;
			top: 80rpx;
			background-color: #F5F5F7;

			/deep/ .uni-searchbar__box {
				background-color: white !important;
			}
		}

		.scroll-views {
			height: calc(100vh - 10px);

			.list {
				padding: 24rpx;

				.box {
					width: 100%;
					background-color: white;
					border-radius: 16rpx;
					position: relative;
					padding: 30rpx 20rpx 20rpx 20rpx;
					margin-top: 40rpx;

					&>view:nth-child(1) {
						&>view:nth-child(1) {
							text {
								font-size: 38rpx;
								font-weight: 600;
							}
						}

						.status {
							position: absolute;
							width: 20%;
							height: 56rpx;
							line-height: 56rpx;
							border-radius: 0rpx 16rpx 0rpx 16rpx;
							right: 0;
							top: 0;
							text-align: center;
							align-content: center;
							font-size: 24rpx;
							font-weight: 600;
						}

						&>view:nth-child(2) {
							background-color: #FFF8E6;
							border: 1px solid #FFE399;
							color: #FFBA00;
						}

						&>view:nth-child(3) {
							background-color: #e7faf0;
							border: 1px solid #D0F5E0;
							color: #71E2A3;
						}

						&>view:nth-child(4) {
							background-color: #FFDBDB;
							border: 1px solid #FFEDED;
							border-radius: 0rpx 16rpx 0rpx 16rpx;
							color: #FF9292;
						}
						&>view:nth-child(5) {
							background-color: #ebebec;
							border: 1px solid #e9e9eb;
							border-radius: 0rpx 16rpx 0rpx 16rpx;
							color: #909399;
						}
					}

					&>view:nth-child(2) {
						width: 100%;
						height: 334rpx;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-top: 40rpx;

						&>view:nth-child(1) {
							width: 45%;

							image {
								width: 100%;
								height: 334rpx;
							}
						}

						&>view:nth-child(2) {
							width: 52%;
							height: 334rpx;
							line-height: 50rpx;
							display: flex;
							flex-direction: column;
							align-self: flex-start;
							font-size: 26rpx;

							&>view {
								word-break: break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								text-overflow: ellipsis;
							}

							&>view:last-child {
								display: flex;
								justify-content: space-between;
								align-items: flex-end;
							}

							&>view>text:first-child {
								color: #9C9C9C;
							}

							&>view>text:last-child {
								color: black;
								font-weight: 500;
							}
						}
					}
				}
			}

			.no-more {
				text-align: center;
				color: gray;
				padding-bottom: 10px;
			}

			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 200rpx;
				color: #9E9E9E;
				font-size: 36rpx;

				image {
					width: 250rpx;
					margin-bottom: 50rpx;
				}
			}
		}



	}
</style>
