<!-- 4.户型展示 别墅-->
<template>
	<view class="content">
		<div class="top">
			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
				<swiper-item>
					<div class="top-content-item top-content-one">
						<div></div>
						<div class="bottom-bottom">
							<div></div>
							<div @click="show(11)"></div>
							<div @click="show(12)"></div>
							<div @click="show(13)"></div>
							<div @click="show(14)"></div>
						</div>
					</div>
				</swiper-item>
				<swiper-item>
					<div class="top-content-item top-content-two">
						<div></div>
						<div class="bottom-bottom">
							<div></div>
							<div @click="show(21)"></div>
							<div @click="show(22)"></div>
							<div @click="show(23)"></div>
							<div @click="show(24)"></div>
						</div>
					</div>
				</swiper-item>
			</swiper>
		</div>
		<div class="bottom">
			<Menu :type="4" :child-type="42" />
		</div>
	</view>

	<div v-if="isOpen" class="dialog" @click="hide">
		<image :src="pic" />
	</div>
</template>

<script setup>
	import Menu from '../../components/Menu.vue'
	import {
		ref
	} from 'vue';

	const show = (index) => {
		switch (index) {
			case 11:
				pic.value = "/static/four211.jpg";
				break;
			case 12:
				pic.value = "/static/four212.jpg";
				break;
			case 13:
				pic.value = "/static/four213.jpg";
				break;
			case 14:
				pic.value = "/static/four214.jpg";
				break;
			case 21:
				pic.value = "/static/four221.jpg";
				break;
			case 22:
				pic.value = "/static/four222.jpg";
				break;
			case 23:
				pic.value = "/static/four223.jpg";
				break;
			case 24:
				pic.value = "/static/four224.jpg";
				break;
		}
		isOpen.value = true;
	}

	const hide = () => {
		isOpen.value = false;
	}

	const isOpen = ref(false);
	const pic = ref(null);
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.top {
		flex: 12;
	}

	.bottom {
		flex: 1;
		background-color: rgba(44 61, 43, 1);
	}

	.swiper {
		height: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.top-content {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.top-content-item {
		display: flex;
		flex-direction: column;
	}

	.top-content-item>div {
		flex: 1;
	}

	.bottom-bottom {
		display: flex;
	}

	.bottom-bottom>div {
		flex: 1;
	}

	.top-content-one {
		height: 100%;
		background: url('~@/static/four21.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content-two {
		height: 100%;
		background: url('~@/static/four22.jpg') no-repeat;
		background-size: 100% 100%;
	}


	.dialog {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog>image {
		height: 90%;
		width: 45%;

	}
</style>