<template>
	<view class="page">
		<!-- <app-nav-bar v-if="true" :fixed="true" :background-color="''" :xStyle="1" :hasMallSetting="2"
			:hasHeight="false"></app-nav-bar> -->
		<view class="swiper_cent tpbg">
			<swiper style="height: 534rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" @change="swiperChange">
				<swiper-item v-for="(item, index) in 1" :key="index" @click="gopage">
					<view style="width: 100%;height: 534rpx;position: relative;">
						<image :src="dataDetail.cover_img" style="width: 100%;height: 534rpx;position: absolute;top: 0;left: 0;" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="swiper_zhishi">
				<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in 3" :key="i"></view>
			</view> -->
		</view>
		<view class="center">
			<!-- <view class="summary" >
				<view class="main-between title">
					<view class="t-omit-two hxj-title text">北欧现代质感卧室，简洁清爽，卧室拥有大面积采光，让卧室明亮起来。</view>
					<image src="https://t17.9026.com/web/statics/image/index/share.png" style="width: 33rpx;height: 33rpx;margin-top: 5rpx;"
						mode=""></image>
				</view>
				<view class="main-between gg">
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/hx.png" mode=""></image>户型
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">三室一厅两卫</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/mj.png" mode=""></image>面积
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">40m²</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/dq.png" mode=""></image>地区
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">成都</view>
					</view>
					<view class="main-between-y cross-center item">
						<view class="cross-center hjx-tc-666 hjx-ts-24">
							<image src="https://t17.9026.com/web/statics/image/index/fg.png" mode=""></image>风格
						</view>
						<view class="hjx-tc-222 hjx-ts-24 hjx-tw-600">北欧</view>
					</view>
				</view>
			</view> -->
			<view class="details">
				<view class="hjx-ts-34 hjx-tc-222 hjx-tw-600 hxj-mb-20">{{dataDetail.name}}</view>
				<view class="content hjx-tc-666 hjx-ts-26">
					<view>
						地址：
						<text class="hjx-tc-B19D60">{{dataDetail.address}}</text>
					</view>
					<view class="content-text" v-html="dataDetail.details">
						<!-- 简介：四季轮换，家已经奏响秋日之歌。让卧室从清凉过渡到温暖，在人居荟只需要几步，干净舒适的家居、收纳、陈设与柔美的色调相融合，打造魅力非凡的惬意居所。 -->
					</view>
					<!-- <view class="content-image">
						<image src="https://t17.9026.com/web/statics/image/index/15.png" mode=""></image>
					</view>
					<view class="main-between content-goods">
						<view class="main-left desc">
							<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
							<view>
								<view class="title">兴城人居ins居家占位套餐</view>
								<view class="col">
									高级棕
								</view>
							</view>
						</view>
						<view class="priceBox main-center-y">
							<view class="hxj-price20 hjx-tc-222 hjx-tw-600"><text>￥</text>2466.00</view>
							<view class="hxj-price20 hjx-tc-999 hjx-text-decoration-line-through"><text>￥</text>3000.00
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="details" v-if="false">
				<view class="hjx-ts-34 hjx-tc-222 hjx-tw-600 hxj-mb-20">基本信息</view>
				<view class="content hjx-tc-666 hjx-ts-26">
					<view v-for="(item, index) in 7" :key="index" class="hxj-mb-10">
						物业类型：
						<text class="hjx-tw-600 hjx-tc-222">住宅</text>
					</view>
					<!-- <view class="content-text">
						简介：四季轮换，家已经奏响秋日之歌。让卧室从清凉过渡到温暖，在人居荟只需要几步，干净舒适的家居、收纳、陈设与柔美的色调相融合，打造魅力非凡的惬意居所。
					</view> -->
					<view class="content-image"><image src="https://t17.9026.com/web/statics/image/index/15.png" mode=""></image></view>
					<!-- <view class="main-between content-goods">
						<view class="main-left desc">
							<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
							<view>
								<view class="title">兴城人居ins居家占位套餐</view>
								<view class="col">
									高级棕
								</view>
							</view>
						</view>
						<view class="priceBox main-center-y">
							<view class="hxj-price20 hjx-tc-222 hjx-tw-600"><text>￥</text>2466.00</view>
							<view class="hxj-price20 hjx-tc-999 hjx-text-decoration-line-through"><text>￥</text>3000.00
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="noMake cross-center" v-if="!is_myself"><button type="default" @tap="goAppointment">{{dataDetail.is_already_appoint==1?'已预约':'立即预约'}}</button></view>
	</view>
</template>

<script>
import appNavBar from '@/components/page-component/index/app-nav-bar.vue';
export default {
	components: {
		appNavBar
	},
	data() {
		return {
			swiperKey: 0,
			dataDetail:{},
			
			is_myself:0
		};
	},
	onLoad(option) {
		this.is_myself=option.is_myself
		this.$request({
			url: this.$api.user.visit_detail,
			data: {
				visit_id: option.id
			},
			method: 'post'
		}).then(res => {
			if (res.code === 0) {
				this.dataDetail=res.data
			}
		});
	},
	methods: {
		swiperChange(e) {
			console.log(e.detail.current);
			this.swiperKey = e.detail.current;
		},
		goAppointment() {
			if(this.dataDetail.is_already_appoint==1){
			uni.showToast({
				title:'您已预约该活动',
				icon:'none'
			})
			return
			}
			uni.navigateTo({
				url: '/pages/case/appointment/appointment-form?id='+this.dataDetail.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.noMake {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 156rpx;
	background: #ffffff;
	box-shadow: 0px 7rpx 45rpx 1rpx rgba(85, 82, 82, 0.64);
	button {
		width: 678rpx;
		height: 84rpx;
		background: #a18353;
		border-radius: 6rpx;
		margin: 0 auto;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
	}
}
.page {
	position: relative;
	min-height: 100vh;
}

.tpbg {
	width: 750rpx;
	height: 534rpx;
}

.w {
	width: 750rpx;
}

.center {
	width: 750rpx;
	height: auto;
	background: #f8f8f8;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 36rpx;
	margin-top: -20rpx;
	.summary {
		padding-bottom: 30rpx;
		background-color: #f8f8f8;

		.title {
			padding-bottom: 20rpx;

			.text {
				width: 579rpx;
			}
		}

		.gg {
			padding: 20rpx 0;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			.item {
				width: 25%;
				height: 73rpx;
			}
		}
	}

	.details {
		// padding-top: 38rpx;

		.content {
			.content-text {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 46rpx;
				padding: 15rpx 0;
			}

			.content-image {
				width: 100%;
				max-height: 738rpx;

				image {
					width: 100%;
				}
			}

			.content-goods {
				margin-top: 12rpx;
				background: #f2f2f2;

				.desc {
					width: 511rpx;
					height: 141rpx;
					border-radius: 6rpx;
					padding: 18rpx 24rpx;

					.goods-img {
						width: 101rpx;
						height: 99rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}

					.title {
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 46rpx;
					}

					.col {
						font-size: 24rpx;
						font-weight: 500;
						color: #666666;
						line-height: 46rpx;
					}
				}

				.priceBox {
					padding: 18rpx 24rpx;
				}
			}
		}
	}
}
.swiper_cent {
	position: relative;
	.swiper_zhishi {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		position: absolute;
		bottom: 39rpx;

		view {
			width: 81rpx;
			height: 4rpx;
			background: #c8c8c8;
		}
		.view_active {
			background: #f4f4f4;
		}
	}
}
</style>
