<template>
	<div class="room-item room-empty" :class="data.imei == null?'room-black':'room-normal'">
		<div class="room-item-row1">
			<img src="../assets/img/fj.png" class="room-img" alt="" v-if="data.count == 0" />
			<img src="../assets/img/fj3.png" class="room-img" alt="" v-else />
			<!-- <img src="../assets/img/fj1.png" class="room-img" alt="" /> -->
			<div class="long_hidden">{{ data.name }} </div>
		</div>
		<div class="room-item-row2">
			<div class="room-row2-item">
				<div>{{ data.count }}</div>
				<div>入住</div>
			</div>
			<div class="room-line"></div>
			<div class="room-row2-item2">
				<div>
					<span v-if="data.imei == null" class="blueText">未绑定</span>
					<span v-else>已绑定</span>
					<!-- <span v-else-if="data.imei && data.operationStatus == 1">已初始化</span>
          <span v-else-if="data.imei && data.operationStatus == 2">未初始化</span> -->
				</div>
				<div>状态</div>
			</div>
			<div class="room-line"></div>
			<div class="room-row2-item">
				<div>{{ data.vocuNum }}</div>
				<div>凭证</div>
			</div>
		</div>
		<div class="room-parent display-center">{{data.path}}</div>
		<img src="../assets/img/fj2.png" alt="" class="device-bind" v-if="data.imei" />
	</div>
</template>

<script>
	export default {
		name: "checkInRoom",
		props: {
			data: {
				type: Object
			}
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {},
	};
</script>

<style scoped>
	.room-empty {
		background: #fff;
		border: 1px solid #c3c3c3;
		border-left: 5px solid #999;
	}

	.room-item {
		width: 222px;
		border-radius: 10px;
		position: relative;
		height: 140px;
		display: inline-block;
	}

	.room-item .room-item-row1 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 42px;
		margin-top: 14px;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
	}

	.room-item .room-item-row1 .room-img {
		height: 42px;
		width: 46px;
		margin: 0 17px;
	}

	.room-item .room-item-row1 div {
		width: 130px;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333;
	}

	.long_hidden {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.room-item .room-item-row1 .check-img {
		cursor: pointer;
		position: absolute;
		top: -3px;
		right: 11px;
		width: 18px;
		height: 18px;
	}

	.room-item .room-item-row2 {
		margin-top: 10px;
		margin-bottom: 12px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.room-item .room-item-row2 .room-row2-item {
		width: 62px;
		text-align: center;
	}

	.room-item .room-item-row2 .room-row2-item div:first-child {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333;
	}

	.room-item .room-item-row2 .room-row2-item div:last-child {
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666;
	}

	.room-item .room-item-row2 .room-line {
		width: 1px;
		height: 26px;
		background: #dedede;
	}

	.room-item .room-item-row2 .room-row2-item2 {
		width: 94px;
		text-align: center;
	}

	.room-item .room-parent {
		height: 30px;
		background: #f0fbfa;
		border-radius: 0 0 10px 10px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #00a397;
		width: 100%;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-height: 30px;
		text-align: center;
	}

	.room-item .device-bind {
		width: 14px;
		height: 20px;
		position: absolute;
		top: 30px;
		left: 35px;
		z-index: 99;
	}

	.display-center {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.room-normal {
		background: #fff;
		border: 1px solid #98dbd6;
		border-left: 5px solid #16c2b5;
	}
  .room-black{
		border: 1px solid #59adf7;
		border-left: 5px solid #59adf7;
  }
  .room-black .room-parent{
    color: #59adf7;
  }
  .blueText{
    color: #59adf7;
  }
</style>
