<template>
	<view class="bed">
		<!-- 		<view class="location">
			<view class="right">
				<view class="item" v-for="(item,index) in bedList[0]" :key="index">
					<image src="../../static/icon/bed-choice.png" mode="aspectFit"></image>
					<text>{{item}}</text>
				</view>
			</view>
			<text style="color: #808080;" class="aisle">过道</text>
			<view class="left">
				<view class="item" v-for="(item,index) in bedList[1]" :key="index">
					<image src="../../static/icon/bed-choice-right.png" mode="aspectFit"></image>
					<text>{{item}}</text>
				</view>
			</view>
		</view> -->
		<!-- 		<view class="middle">
			<text>床位图示意</text>
		</view> -->

		<!-- 房间信息 -->
		<view class="dormitory-info">
			<text style="font-size: 36rpx; color: #131313;">{{roomName}}</text>
			<br>
			<!-- <text style="color: #808080; font-size: 28rpx;">南校区/学生公寓一/9层</text> -->
		</view>
		<!-- 房间选择 -->
		<view class="dormitory-choose">
			<view :class="!item.state?'item':'item-selected'" :id="activeIndex == index?'dormitory-choose-active':''"
				v-for="(item,index)  in bedStateList" :key="index" @click="chooseDormitory(item)">
				<text>{{item.bedPosition+"（"+item.name+"）"}}</text><br />
				<text style="position: relative;top: -130rpx;">{{item.is_own ? "(我的床位)" : ""}}</text>
			</view>
		</view>
<!-- 		<view style="margin-top: 700rpx;">
			<u-button text="确定" :disabled="disabledState" type="primary" @click="rightBed"></u-button>
		</view> -->
		<u-toast ref="uToast" @show="showToast"></u-toast>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="真的要取消选择床位吗"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

		<zero-loading v-if="loading"></zero-loading>
	</view>
</template>

<script>
	import {
		chooseBed,
		getBedsInfoByDormId,
		cancelOwnBed
	} from "@/api/dormApi.js";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	export default {
		data() {
			return {
				loading: false,
				roomName: "",
				bedStateList: [],
				// 选择状态
				activeIndex: -1,
				disabledState: true,
				toastParams: {
					message: "该床位已被选中",
					type: "error",
					duration: 1000
				},
				dorm_id: null,

				msgType: 'success',
				messageText: '这是一条成功提示',
			}
		},
		methods: {
			async dialogConfirm() {
				console.log('点击确认')
				this.loading = true;
				let res = await cancelOwnBed();
				if(res.code == 200){
					this.toastParams.message = res.msg;
					this.toastParams.type = "success";
				}else{
					this.toastParams.message = res.msg;
					this.toastParams.type = "error";
				}
				this.showToast();
				this.getBedInfo();
				this.loading = false;
			},

			async getBedInfo() {
				this.loading = true;
				let res = await getBedsInfoByDormId(this.dorm_id);
				this.loading = false;
				if (res.code == 200) {
					let data = res.data;
					let temp = [];
					let my_stu_no = uni.getStorageSync("stu_no");
					console.log(data);
					data.map(x => {
						temp.push({
							bedPosition: x.BedCode + "号床",
							name: x.XSXM == null ? "空床位" : x.XSXM,
							state: x.hasStudent,
							id: x.id,
							xh: my_stu_no,
							is_own: my_stu_no == x.XH
						});
					});
					this.bedStateList = [...temp];
				}
			},
			async chooseDormitory(v) {
				console.log(v)
				if (v.is_own) {
					this.loading = false;
					this.msgType = "info";
					this.$refs.alertDialog.open()
					return;
				}

				if (v.state) {
					this.message="该床位已被选中";
					this.type="error";
					return this.showToast();
				}

				this.loading = true;

				let sdata = {
					bedId: v.id,
					dormitoryId: this.dorm_id
				};
				let res = await chooseBed(sdata);
				this.loading = false;
				if (res.code == 200) {
					this.toastParams.message = "选择成功";
					this.toastParams.type = "success";
					this.showToast();
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/pay/index"
						})
					}, 1000);
				} else {
					this.getBedInfo();
					this.toastParams.message = "换个床位吧";
					this.toastParams.type = "error";
					this.showToast();
				}
			},
			rightBed() {
				let params = {
					type: "loading",
					message: "正在确认",
				}
				this.showToast(params)
			},
			showToast(params) {
				this.$refs.uToast.show({
					...this.toastParams,
					...params
				})
			}
		},
		onLoad(value) {
			let data = JSON.parse(value.param);
			this.roomName = data.name + "-" + data.bedNum + "人间";
			this.dorm_id = data.id;
			this.getBedInfo();
		}
	}
</script>

<style lang="scss" scoped>
	$text-color: #808080;

	.bed {
		padding: 20rpx;
		padding-bottom: 50px;

		// 床位的位置
		.location {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 600rpx;
			margin: 40rpx 0;

			.aisle {
				writing-mode: vertical-rl;
				/* 设置文字垂直排列方向为从上到下 */
				text-orientation: upright;
				/* 设置文字方向为直立 */
				font-size: 40rpx;
			}

			.right {
				border-right: 1px solid #E9E9E9;
				padding: 0 90rpx;
			}

			.left {
				border-left: 1px solid #E9E9E9;
				padding: 0 90rpx;
			}

			.right,
			.left {
				display: flex;
				flex-direction: column;
				height: 600rpx;
				justify-content: space-between;


				.item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
					height: 140rpx;

					text-align: center;

					text {
						display: block;
						color: $text-color;
						font-size: 40rpx;
					}

					image {
						width: 70rpx;
						height: 50rpx;
					}
				}
			}
		}

		.middle {
			text-align: center;
			color: $text-color;
			height: 100rpx;
			border-bottom: 1px solid #E2E2E2;
			margin-bottom: 40rpx;
		}

		// 房间信息
		.dormitory-info {
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1px solid #E9E9E9;

		}

		#dormitory-choose-active {
			background-color: #4A90E2;
			color: white;
			transition: 200ms linear;
		}

		// 宿舍选择
		.dormitory-choose {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 60rpx;

			.item-selected {
				background-color: #F4F4F4;
				color: #7B7B7B;
			}

			.item-selected,
			.item {
				width: 346rpx;
				height: 160rpx;
				text-align: center;
				line-height: 160rpx;
				margin-bottom: 25rpx;
				transition: 200ms ease-out;
			}

			.item {
				background-color: #F2F8FF;
				color: #4A90E2;

			}
		}
	}
</style>