<template>
	<app-layout>
		<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 exampleDetail.banner_imgs" :key="index" @click="gopage">
						<view style="width: 100%;height: 534rpx;position: relative;">
							<image :src="item.banner_imgs"
								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="topradus"></view>
				<view class="summary">
					<view class="main-between title">
						<view class="t-omit-two hxj-title text t-omit-two">{{exampleDetail.title}}</view>
						<app-jump-button form arrangement="topCenter" open_type="share" >
						   <image src="https://t17.9026.com/web/statics/image/index/share.png"
						   	style="width: 33rpx;height: 33rpx;margin-top: 5rpx;" mode=""></image>
						</app-jump-button>
					</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">{{exampleDetail.exampleHouse.name}}</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">{{exampleDetail.square}}m²</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">{{exampleDetail.address}}</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">{{exampleDetail.exampleStyle.name}}</view>
						</view>
					</view>
				</view>
				<view class="details">
					<view class="hjx-ts-34 hjx-tc-222 hjx-tw-600" style="padding: 0 36rpx;">详细描述</view>
					<view class="content">
						<!-- <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 class="detail-diy">
						    <block v-for="(temp, index) in exampleDetail.detail" :key="index">
						        <template v-if="temp.id === 'mch-goods'">
						            <view :style="[
						                 {'background-color':`${temp.data.backgroundColor}`,
						                'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,
						                'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
						                'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
						                'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
						                'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
						            >
						                <app-diy-list :temp="temp" :theme="getTheme"></app-diy-list>
						            </view>
						        </template>
						        <template v-else-if="temp.id === 'rubik'">
						            <view style="position: relative">
						                <app-image-ad
						                    v-bind:image-style="temp.data.style"
						                    v-bind:list="temp.data.list"
						                    v-bind:height="temp.data.height"
						                ></app-image-ad>
						                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
						                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
						                </block>
						            </view>
						        </template>
						        <template v-else-if="temp.id === 'video'">
						            <app-video
						                v-bind:pic-url="temp.data.pic_url"
						                v-bind:url="temp.data.url"
						                v-bind:has-auto="temp.data.hasAuto"
						                v-bind:has-cycle="temp.data.hasCycle"
						                v-bind:bg-padding="temp.data.bg_padding"
						                v-bind:c-border-bottom="temp.data.c_border_bottom"
						                v-bind:c-border-top="temp.data.c_border_top"
						                v-bind:c-padding-top="temp.data.c_padding_top"
						                v-bind:c-padding-lr="temp.data.c_padding_lr"
						                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
						            ></app-video>
						        </template>
						        <template v-else-if="temp.id === 'image-text'">
						            <view style="padding: 1rpx 24rpx" :style="{backgroundColor: temp.data.bg || 'inherit'}">
						                <app-rich :image-prop="imageProp" v-bind:content='temp.data.content'></app-rich>
						            </view>
						        </template>
						    </block>
						</view>
						<view style="height: 111rpx"></view>
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	// import mchShare from "./mch-share";
	// import appDiyGoodsList from "./components/app-diy-goods-list.vue";
	import {mapGetters, mapState} from "vuex";
	import appRich from "@/components/basic-component/app-rich/parse";
	import appVideo from "@/components/page-component/app-video/app-video";
	import appImageAd from "@/components/page-component/app-image-ad/app-image-ad";
	import appHotspot from "@/components/basic-component/app-hotspot/app-hotspot";
	import appDiyList from "@/components/page-component/index/app-diy-list";
	
	import appNavBar from '@/components/page-component/index/app-nav-bar.vue';
	export default {
		components: {
			appNavBar,
			appDiyList,
			// mchShare,
			// appDiyGoodsList,
			appRich,
			appVideo,
			appImageAd,
			appHotspot,
		},
		computed: {
		    // ...mapState({
		    //     userInfo: state => state.user.info,
		    // }),
		    ...mapGetters('mallConfig', {
		        getTheme: 'getTheme',
		    }),
		},
		data() {
			return {
				swiperKey: 0,

				exampleDetail: null,
			};
		},
		onLoad(option) {
			this.$showLoading()
			this.$request({
				url: this.$api.example.detail,
				data: {
					example_id: option.id
				},
				method: 'post'
			}).then(res => {
				if (res.code === 0) {
					this.exampleDetail = res.data
					this.exampleDetail.banner_imgs = JSON.parse(this.exampleDetail.banner_imgs)
					this.exampleDetail.detail = JSON.parse(this.exampleDetail.detail)
				}
				this.$hideLoading()
			})
		},
		methods: {
			swiperChange(e) {
				console.log(e.detail.current)
				this.swiperKey = e.detail.current
			},
			transLabelBackgroundPosition(val) {
			    val = Number(val);
			    switch (val) {
			        case 1:
			            return 'left top';
			        case 2:
			            return 'center top';
			        case 3:
			            return 'right top';
			        case 4:
			            return 'left center';
			        case 5:
			            return 'center center';
			        case 6:
			            return 'right center';
			        case 7:
			            return 'left bottom';
			        case 8:
			            return 'center bottom';
			        case 9:
			            return 'right bottom';
			        default:
			            return 'center';
			    }
			},
			transLabelBackgroundRepeat(val) {
			    val = Number(val);
			    switch (val) {
			        case 1:
			            return 'no-repeat';
			        case 2:
			            return 'repeat-x';
			        case 3:
			            return 'repeat-y';
			        case 4:
			            return 'repeat';
			        default:
			            return 'no-repeat';
			    }
			},
			rubikHotspot(hotspot) {
			    if (hotspot && hotspot.link) {
			        hotspot.link.url = hotspot.link.value;
			        hotspot.link.openType = hotspot.link.open_type;
			    }
			    return hotspot;
			},
		},
		 onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.exampleDetail.app_share_title,
		      path: '/pages/case/caseDetails?id='+this.exampleDetail.id
		    }
		  }
	}
</script>

<style lang="scss" scoped>
	.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 0;
		margin-top: -20rpx;
		position: relative;

		.topradus {
			width: 100%;
			height: 20rpx;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}

		.summary {
			padding: 0 36rpx 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;
					color: #000000;
					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>
