<template>

	<view class="bg-[#fafafa] min-h-[100vh] " v-if="detailData">
		<view class="tk-card1">
			<u-swiper :list="detailData.banner" :indicator="true" :autoplay="true" height="480rpx" @click="swiperClick"
				radius="8"></u-swiper>
		</view>
		<view class="tk-card">
			<view class="title">{{detailData.name}}</view>
			<view class="text-xs text-[#868686]">{{detailData.desc}}</view>
			<view class="flex justify-between mt-1">
				<view class="flex items-center">
					<u-tag size="mini" bgColor="#6e6f59" borderColor="#867d44" :text="detailData.work_time"></u-tag>
				</view>
			</view>
			<view class="line-box mt-2 mb-2"></view>
			<view class="mt-1" v-if="detailData.contact_name!=''">
				<view class="font-bold">门店联系人</view>
				<view class="flex items-center ">
					<view class="text-slate-500 tk-sltext">{{detailData.contact_name}}</view>
				</view>
			</view>
			<view @click="telPhone(detailData.mobile)" class="mt-1">
				<view class="font-bold">门店电话</view>
				<view class="flex items-center ">
					<view class="text-slate-500 tk-sltext">{{detailData.mobile}}</view>
					<view class="flex items-center ml-2">
						<view>
							<u-icon name="phone" size="20" color="#252b34"></u-icon>
						</view>
						<view>
							拨打
						</view>
					</view>
				</view>
			</view>
			<view @click="openMap(detailData.lat,detailData.lng)" class="flex items-center justify-between mt-1">
				<view class="w-70%">
					<view class="font-bold">门店地址</view>
					<view class="text-slate-500 mt-1">{{detailData.address}}</view>
				</view>
				<view class="flex w-[30%] justify-end">
					<view class="flex flex-col items-center ">
						<view>
							<u-icon name="map" size="22" color="#000000"></u-icon>
						</view>
						<view>地图</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tk-card">
			<view class="mb-2 font-bold">门店详情</view>
			<u-parse :content="detailData.content"
				:tagStyle="{img: 'vertical-align: top;',p:'overflow: hidden;word-break:break-word;' }"></u-parse>
		</view>

		<u-safe-bottom></u-safe-bottom>
		<view class="tab-bar-placeholder"></view>
	</view>

	<tabbar addon="app" />
	<!-- #ifdef MP-WEIXIN -->
	<!-- 小程序隐私协议 -->
	<wx-privacy-popup ref="wxPrivacyPopup"></wx-privacy-popup>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { useShare } from '@/hooks/useShare'
	import { getStoreInfo } from '@/addon/d_store/api/store'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useLogin } from '@/hooks/useLogin';
	import { imgListPreview, openMap, telPhone } from '@/addon/d_store/utils/ts/common'
	import useMemberStore from '@/stores/member'
	import { img, redirect, handleOnloadParams } from "@/utils/common";
	const tabshow = ref(true)
	const memberStore = useMemberStore()
	const userInfo = computed(() => memberStore.info)
	const { setShare, onShareAppMessage, onShareTimeline } = useShare()
	setShare();
	onShareAppMessage()
	onShareTimeline()
	const loading = ref(false)
	const detailData = ref()
	const getDetailInfoEvent = async (id) => {
		const res = await getStoreInfo(id)
		detailData.value = res.data
		detailData.value.banner.forEach((item, index) => {
			detailData.value.banner[index] = img(item)
		})
	}
	const swiperClick = (index) => {
		if (typeof index == 'number')
			imgListPreview(detailData.value.banner, index)
	}
	//预览图片
	const imgListPreview = (item : any, index : any) => {
		if (Array.isArray(item)) {
			if (!item.length) return false
			var urlList = item;
			uni.previewImage({
				indicator: "number",
				current: index,
				loop: true,
				urls: urlList
			})
		} else {
			if (item === '') return false
			var urlList = []
			urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
			uni.previewImage({
				indicator: "number",
				loop: true,
				urls: urlList
			})
		}

	}
	onLoad((option) => {
		if (option.id) {
			getDetailInfoEvent(option.id)
		}
	})
</script>

<style lang="scss" scoped>
	@import '@/addon/d_store/utils/styles/common.scss';


	.b-tabbar {
		position: fixed;
		bottom: 12rpx;
		left: 0;
		right: 0;
		margin: 0rpx 24rpx;
		border-radius: 12rpx;
		padding: 12rpx;
		background: rgba(245, 250, 245, 0.8);
	}



	.b-tabbar-back {
		background: rgba(245, 250, 245, 0.9);
		box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.5);
		border-radius: 12rpx;
	}

	page {
		background: white;
		padding-top: 24rpx;
		padding-bottom: calc((constant(safe-area-inset-bottom) / 2) + 128rpx);
		padding-bottom: calc((env(safe-area-inset-bottom) / 2) + 128rpx);
	}

	swiper {
		margin: 0 30rpx;
		height: 565rpx;

		swiper-item,
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		::v-deep .uni-swiper-dots {
			right: 30rpx;
			left: unset;
			transform: unset;
		}

		::v-deep .uni-swiper-dot {
			width: 10rpx;
			height: 10rpx;
			background: rgba(255, 255, 255, 0.8);
		}

		::v-deep .uni-swiper-dot-active {
			width: 27rpx;
			border-radius: 32rpx;
			background: white;
		}
	}

	.title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.price {
		font-weight: bold;
		font-size: 36rpx;
		color: #FF3D3D;

		&::before {
			font-size: 24rpx;
			content: '￥';
		}

		&::after {
			font-size: 24rpx;
			content: '起';
		}
	}

	.details {
		margin: 0 32rpx;
		padding: 30rpx;
		background: #F9F9F9;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 42rpx;
		margin-top: 28rpx;
	}

	.bottom {
		left: 0;
		bottom: 0;
		gap: 22rpx;
		width: 100vw;
		position: fixed;
		background: white;
		padding: 0 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.agency,
		.buy {
			flex: 1;
			height: 88rpx;
			margin: 10rpx 0;
			border-radius: 16rpx;
			border: 2rpx solid #2EA7E0;
			font-weight: bold;
			font-size: 32rpx;
			color: #2EA7E0;
			line-height: 88rpx;
			text-align: center;
		}

		.buy {
			color: white;
			background: #2EA7E0;
		}
	}

	.tk-card1 {
		background-color: rgba(255, 255, 255, 0.9);
		margin: 24rpx;
		border-radius: 12rpx;

		box-shadow: 0 1px 1px 0 rgba(234, 234, 234, 0.2), 0 2px 2px 0 rgba(231, 231, 231, 0.2);
	}

	.tk-card {
		background-color: rgba(255, 255, 255, 0.9);
		margin: 24rpx;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 1px 1px 0 rgba(234, 234, 234, 0.2), 0 2px 2px 0 rgba(231, 231, 231, 0.2);
	}

	.tab-bar-placeholder {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.map-container {
		position: relative;
		z-index: 9999;
		/* 确保地图容器在最顶层 */
	}
</style>