<template>
	<view class="detail-page">
		<custom-navbar title="店铺主页" :show-back="true" backgroundColor="#fff" :show-headle="true"
			headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/3b04f0c1-a55e-4658-9de5-22175cce9bbc.png"
			@onHeadleClick="goInvite"></custom-navbar>
		<!-- 手艺人顶部首图 -->
		<view class="main-image-section">
			<!-- <swiper class="banner-swiper" circular :indicator-dots="false" :autoplay="false" :interval="3000"
				:duration="500" indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, 0.6)">
				<swiper-item @click="previewImage()">
					<video :src="sjdetail.video" v-if="sjdetail.video" id="myVideo" class="banner-image"
						:autoplay="true" :controls="false" :muted="true" :loop="true" enable-play-gesture="true"
						object-fit="cover">
					</video>
					<image v-else :src="headPhoto" mode="aspectFill" class="banner-image"
						referrer="no-referrer">
					</image>
					
				</swiper-item>
			</swiper> -->
			<view class="banner-swiper">
				<video :src="imgVideoList.main_video.url" v-if="imgVideoList.main_video" id="myVideo"
					class="banner-image" :autoplay="true" :controls="false" :muted="true" :loop="true"
					enable-play-gesture="true" object-fit="cover">
				</video>
				<image v-else-if="!imgVideoList.main_video && imgVideoList.main_img" :src="imgVideoList.main_img.url"
					mode="aspectFill" class="banner-image" referrer="no-referrer">
				</image>
				<image v-else src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9682f8ef-cb0c-47df-a42e-1795bd1f625b.png"
					mode="aspectFill" class="banner-image" referrer="no-referrer">
				</image>
				<cover-view class="album flex-row-center" v-if="imgVideoList.main_video || imgVideoList.main_img" @tap="goAlbum">
					<cover-view class="album-left flex-row-center-center">
						{{ imgVideoList.main_video?"视频":"图片" }}
					</cover-view>
					<cover-view class="album-line">
					</cover-view>
					<cover-view class="album-right flex-row-center-center" >
						<cover-view class="album-right-text">
							<cover-view>相册</cover-view>
						</cover-view>
						<cover-image src="/static/images/icons/right7_13.png" class="album-right-img"></cover-image>
					</cover-view>
				</cover-view>
			</view>
		</view>
		<!-- 手艺人信息卡片 -->
		<view class="detail-info">
			<view class="detail-info-user">
				<view class="detail-info-user__heard">
					<image :src="headPhoto" mode="aspectFill" class="detail-info-user__heard__photo"
						referrer="no-referrer"></image>
					<view class="detail-info-user__heard__name">
						<view class="detail-info-user__heard__name__text">
							{{ sjdetail.name }}
						</view>
						<view class="detail-info-user__heard__name__sales" v-if="sjdetail.all_sales_num >= 0">
							<text class="detail-info-user__heard__name__sales__text1">
								全部销量
							</text>
							<text class="detail-info-user__heard__name__sales__text2">
								{{ sjdetail.all_sales_num }}
							</text>
							<text class="detail-info-user__heard__name__sales__text1">
								单
							</text>
						</view>
					</view>
					<!-- 联系客服按钮 -->
					<!-- <view class="contact-customer-btn" @click="contactCustomer">
						<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2cee17d5-0603-421a-8956-d698a2e8c7aa.png" class="contact-customer-icon"></image>
						<text>联系客服</text>
					</view> -->
				</view>

				<view class="detail-info-user__time">
					<view class="detail-info-user__time__left">
						<text class="detail-info-user__time__left__text1">营业时间</text><text
							class="detail-info-user__time__left__text2">{{
              sjdetail.business_time
            }}</text>
					</view>
					<view class="detail-info-user__time__right" @click="goInformation">
						<text>经营信息</text>
						<image src="/static/images/shop/right.png" class="detail-info-user__time__right__img"></image>
					</view>
				</view>

				<view class="detail-info-user__tabs">
					<view v-for="(item, index) in tabsPopList" :key="index" class="detail-info-user__tabs__tab">
						{{ item.name }}
					</view>
				</view>

				<!-- 修改后的联系方式区域 -->
				<view class="detail-info-user__connect">
					<!-- 第一行：地址和距离 -->
					<view class="connect-row address-row">
						<view class="address-section" @click="openMap">
							<view class="address-content">
								<text class="address-text">{{ sjdetail.address }}</text>
								<image src="/static/images/shop/right.png" class="address-arrow"></image>
							</view>
						</view>
						<view class="distance-section" v-if="sjdetail.distance">
							<!-- <text class="distance-text">距您</text> -->
							<image src="/static/images/icons/address_icon.png" class="address-icon"></image>
							<text class="distance-value">{{ sjdetail.distance.toFixed(2) }}Km</text>
						</view>
					</view>

					<!-- 第二行：电话和图标 -->
					<view class="connect-row phone-row">
						<view class="phone-section" @click="contactService(sjdetail.legal_phone)">
							<view class="phone-content">
								<text class="phone-label">电话</text>
								<text class="phone-number">{{ sjdetail.legal_phone }}</text>
								<image src="/static/images/shop/right.png" class="phone-arrow"></image>
							</view>
						</view>
						<view class="icon-section">
							<image @click="openMap" src="/static/images/shop/address.png" class="nav-icon"></image>
							<image @click="contactService(sjdetail.legal_phone)" src="/static/images/shop/phone.png"
								class="phone-icon"></image>
						</view>
					</view>
				</view>

				<image src="/static/images/syr/banner.png" mode="widthFix" class="detail-info-user__banner"
					referrer="no-referrer"></image>

				<!-- 营业执照选项 -->
				<!-- <view class="business-license-section" @click="viewBusinessLicense">
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f083ec38-a325-48a2-a66b-e8ea34b63648.png" class="license-icon"></image>
					<view class="license-info">
						<text class="license-title">营业执照</text>
					</view>
					<view class="license-view">
						<text>点击查看</text>
						<image src="/static/images/shop/right.png" class="license-arrow"></image>
					</view>
				</view> -->
			</view>

			<!-- 卡片外的切换标签（无背景） -->
			<view class="shop-tabs-outside">
				<view :class="['shop-tab-outside', activeTab === 'projects' ? 'active' : '']"
					@click="scrollToSection('projects-section')">
					全部项目
				</view>
				<view :class="['shop-tab-outside', activeTab === 'artisans' ? 'active' : '']"
					@click="scrollToSection('artisans-section')" v-if="artisanList.length > 0">
					手艺人
				</view>
			</view>

			<!-- 全部项目部分 -->
			<view id="projects-section" class="detail-info-shop">
				<!-- 卡片内显示当前激活的标签名称（红色，有背景） -->
				<!-- <view class="shop-tabs-inside">
					<view class="shop-tab-inside active">
						全部项目
					</view>
				</view> -->

				<!-- 全部项目页面 -->
				<projectTabs :tabsPopList="tabsPopList" @clickTap="clickTap" @clickPopTap="clickPopTap"></projectTabs>
				<CommonList background="transparent" ref="groupRef" :apiUrl="'/user/getserverlist'"
					:listScrollHeight="`${count * 200 + 80}rpx`" @load-success-all="listSuccess">
					<template #listData="{ list }">
						<serviceCardList :list="list"></serviceCardList>
					</template>

					<!-- 空数据状态 -->
					<template #empty>
						<noData></noData>
					</template>
				</CommonList>
			</view>
		</view>

		<!-- 手艺人展示板块（只有有手艺人时才显示） -->
		<view id="artisans-section" class="artisan-showcase-section" v-if="artisanList.length > 0 || showMockArtisans">
			<view class="showcase-header">
				<text class="showcase-title">手艺人展示({{ displayArtisanCount }})</text>
				<view class="view-all-btn" @click="viewAllArtisans">
					<text>查看全部</text>
					<image src="/static/images/shop/right.png" class="view-all-arrow"></image>
				</view>
			</view>

			<scroll-view class="showcase-scroll" scroll-x="true" :scroll-left="scrollLeft" show-scrollbar="false">
				<view class="showcase-list">
					<view v-for="(artisan, index) in displayArtisanList" :key="index" class="showcase-item"
						@click="viewArtisanDetail(artisan)">
						<image :src="artisan.avatar" class="showcase-avatar" mode="aspectFill"></image>
						<text class="showcase-name">{{ artisan.name }}</text>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<evaluationList :evaluated_id="sjdetail.id" :evaluated_type="2" v-if="sjdetail.id" @goList="goList" style="margin-top: 20rpx;">
		</evaluationList>
	</view>
</template>

<script>
	import {
		handleImgSize,
		handleImgSizeUni
	} from '@/utils/service.js'
	import _public from "@/utils/public";
	import permissionUtils from "@/utils/per";
	import CommonList from "@/components/common/CommonList.vue";
	import request from "../../utils/request";
	import projectTabs from "./components/project-tabs.vue";
	import serviceCardList from "./components/serviceCardList.vue";
	import evaluationList from '@/pages/evaluate/components/evaluationList';
	export default {
		components: {
			projectTabs,
			CommonList,
			serviceCardList,
			evaluationList
		},
		data() {
			return {
				imgVideoList: {},
				count: 1,
				sjdetail: {
					qualifications: [],
				},
				distance: 12.31, //距离
				queryData: {
					publish_user_id: null,
					server_kind: 2,
					page: 1,
					limit: 10,
					order_type: 1,
				},
				tabsPopList: [],
				showPopup: false,
				userObj: {},

				autoShare: false,
				autoShareExecuted: false,

				activeTab: 'projects', // 当前激活的标签，用于样式控制
				artisanList: [], // 手艺人列表
				artisanLoading: false, // 手艺人加载状态
				artisanFinished: false, // 手艺人是否已加载完毕
				artisanPage: 1, // 手艺人当前页码
				artisanLimit: 10, // 手艺人每页数量
				artisanTotal: 0, // 手艺人总数量

				// 手艺人滚动相关
				scrollLeft: 0,

				// 手艺人的模拟数据
				showMockArtisans: false, // 是否显示模拟手艺人数据（调试时设为true，正式时设为false）
				mockArtisanList: [{
						id: 1,
						name: '张美甲师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 2,
						name: '李美睫师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 3,
						name: '王美容师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 4,
						name: '刘纹绣师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 5,
						name: '陈造型师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 6,
						name: '赵皮肤师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 7,
						name: '钱美发师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					},
					{
						id: 8,
						name: '孙按摩师',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
					}
				]
			};
		},
		computed: {
			headPhoto() {
				if (this.sjdetail.head_photo == "-" || !this.sjdetail.head_photo) {
					return `https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40`
				} else {
					return this.sjdetail.head_photo
				}
			},
			// 显示的艺人列表
			displayArtisanList() {
				// 如果有真实数据且不为空，显示真实数据
				if (this.artisanList.length > 0) {
					return this.artisanList;
				}
				// 否则显示模拟数据
				return this.mockArtisanList;
			},
			// 显示的艺人数量
			displayArtisanCount() {
				if (this.artisanList.length > 0) {
					return this.artisanList.length;
				}
				return this.mockArtisanList.length;
			}
		},
		onLoad(options) {
			console.log(options);
			this.queryData.publish_user_id = options.id;

			// 检查是否需要自动分享
			if (options.autoShare === '1') {
				this.autoShare = true;
			}

			let userAdrees = uni.getStorageSync("userAdrees");
			if (userAdrees) {
				this.userObj.userLngz = userAdrees.longitude;
				this.userObj.userLat = userAdrees.latitude;
			} else {
				this.userObj.userLngz = "117.330043";
				this.userObj.userLat = "38.372266";
			}
			this.userObj.id = options.id;
			this.getShopDetail();
			this.$nextTick(() => {
				this.search();
			});

			// 获取手艺人列表
			this.getArtisanList();
			this.getImgVideoList();
		},
		methods: {
			goList() {
				uni.navigateTo({
					url: `/pages/evaluate/evaluationList?evaluated_id=${this.sjdetail.id}&evaluated_type=2`
				})
			},
			goAlbum() {
				console.log(11111)
				uni.navigateTo({
					url: `/pages/album/index?id=${this.queryData.publish_user_id}&user_type=2`
				});
			},
			getImgVideoList() {
				request.post("/user/imgVideo/main", {
					user_id: this.queryData.publish_user_id,
					user_type: 2
				}).then(res => {
					if (res.code == 200) {
						this.imgVideoList = res.data
					}
				})
			},
			listSuccess(e) {
				if (e.count) {
					this.count = e.count <= 4 ? e.count : 4;
				}
				// 更新项目列表
				if (e.list) {
					this.projectList = e.list;
					this.updateDisplayedProjects();
				}
			},
			// 更新显示的项目列表（默认显示5个）
			updateDisplayedProjects() {
				if (this.showAllProjects) {
					this.displayedProjects = this.projectList;
				} else {
					this.displayedProjects = this.projectList.slice(0, 5);
				}
			},
			// 加载更多项目
			loadMoreProjects() {
				this.showAllProjects = true;
				this.updateDisplayedProjects();
				// 重新搜索以获取完整列表
				this.search();
			},
			// 滚动到指定部分
			scrollToSection(sectionId) {
				// 如果是手艺人部分且没有手艺人，则返回
				if (sectionId === 'artisans-section' && this.displayArtisanList.length === 0) {
					return;
				}

				// 更新激活标签状态
				this.activeTab = sectionId === 'projects-section' ? 'projects' : 'artisans';

				// 使用uni.scrollTo滚动到指定元素
				uni.createSelectorQuery().select(`#${sectionId}`).boundingClientRect((rect) => {
					if (rect) {
						// 获取页面滚动位置
						uni.createSelectorQuery().selectViewport().scrollOffset((scrollOffset) => {
							// 计算目标位置（考虑navbar高度）
							const targetTop = rect.top + scrollOffset.scrollTop - 130;

							uni.pageScrollTo({
								scrollTop: targetTop,
								duration: 300
							});
						}).exec();
					}
				}).exec();
			},
			// 查看全部手艺人
			viewAllArtisans() {
				// 跳转到手艺人列表页面，传递店铺ID
				uni.navigateTo({
					url: `/pages/user/store-syr-list?shopId=${this.queryData.publish_user_id}`
				});
			},
			openMap() {
				// #ifdef MP-WEIXIN
				uni.openLocation({
					success: () => console.log("打开系统位置地图成功"),
					fail: (error) => console.log(error),
				});
				// #endif
				// #ifdef APP-PLUS
				_public.goMap({
					latitude: parseFloat(this.sjdetail.latitude),
					longitude: parseFloat(this.sjdetail.longitude),
					name: this.sjdetail.name,
					address: this.sjdetail.address,
				});
				// #endif
			},
			async contactService(phone) {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === "ios") {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				} else {
					let permission =
						systemInfo.platform === "ios" ?
						"phone" :
						"android.permission.CALL_PHONE";
					this.isShowPer = true;
					const firstRequest = !plus.storage.getItem(`perm_${permission}`);
					if (firstRequest) this.isShowPer = true;
					const {
						granted
					} = await permissionUtils.checkPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					if (granted) {
						this.isShowPer = false;
						uni.makePhoneCall({
							phoneNumber: phone
						});
						return;
					}
					this.isShowPer = false;
					const confirm = await this.showPermissionDialog(
						"拨打电话权限申请",
						"我们需要拨打电话权限，方便您联系商家或平台"
					);
					if (!confirm) return;
					const result = await permissionUtils.requestPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					if (result) {
						uni.makePhoneCall({
							phoneNumber: phone
						});
					} else {
						locationService.openAppSettings();
					}
				}
			},

			// 联系客服
			contactCustomer() {
				// uni.showModal({
				// 	title: '联系客服',
				// 	content: '您可以通过电话或在线客服联系商家',
				// 	confirmText: '拨打电话',
				// 	cancelText: '在线客服',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.contactService(this.sjdetail.legal_phone);
				// 		} else if (res.cancel) {
				// 			// 跳转到在线客服页面
				// 			uni.navigateTo({
				// 				url: '/pages/chat/customer-service'
				// 			});
				// 		}
				// 	}
				// });
			},

			// 查看营业执照 还不知道是要弹窗形式还是跳转页面 先放着 ！！！！！！！！！！！！！
			viewBusinessLicense() {
				// if (this.sjdetail.qualifications && this.sjdetail.qualifications.length > 0) {
				// 	// 跳转到营业执照查看页面
				// 	uni.navigateTo({
				// 		url: `/pages/user/business-license?id=${this.sjdetail.id}`
				// 	});
				// } else {
				// 	uni.showToast({
				// 		title: '暂无营业执照信息',
				// 		icon: 'none'
				// 	});
				// }
			},

			// 获取手艺人列表
			getArtisanList() {
				// 如果正在加载或已加载完毕，则不再请求
				if (this.artisanLoading || this.artisanFinished) {
					return;
				}

				this.artisanLoading = true;

				const params = {
					sjid: this.queryData.publish_user_id // 使用店铺ID作为商家ID
				};

				console.log("请求手艺人列表参数:", params);

				// 如果是调试模式，直接使用模拟数据
				if (this.showMockArtisans) {
					console.log("使用模拟手艺人数据");
					this.artisanList = this.mockArtisanList;
					this.artisanLoading = false;
					return;
				}

				// 真实接口调用
				request
					.post("/user/sjSyrBind/syrList", params)
					.then((res) => {
						console.log("手艺人列表接口返回:", res);

						if (res.code === 200) {
							// 注意：接口返回的data是一个对象，包含count和list
							const resultData = res.data || {};
							const list = resultData.list || [];
							const total = resultData.count || list.length || 0;

							console.log("获取到手艺人数据:", list, "总数:", total);

							// 格式化数据
							const formattedList = this.formatArtisanList(resultData);
							console.log("格式化后的手艺人数据:", formattedList);

							// 如果是第一页，直接赋值；否则追加数据
							if (this.artisanPage === 1) {
								this.artisanList = formattedList;
							} else {
								this.artisanList = [...this.artisanList, ...formattedList];
							}

							this.artisanTotal = total;

							// 判断是否已加载完毕
							if (list.length < this.artisanLimit) {
								this.artisanFinished = true;
							} else {
								this.artisanPage += 1;
							}
						} else {
							console.error("接口返回错误:", res);
							uni.showToast({
								title: res.msg || '获取手艺人列表失败',
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						console.error("获取手艺人列表失败:", err);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
					})
					.finally(() => {
						this.artisanLoading = false;
					});
			},

			// 格式化手艺人列表数据
			formatArtisanList(data) {
				console.log("开始格式化手艺人数据:", data);

				const list = data.list || [];
				if (!list || list.length === 0) {
					return [];
				}

				return list.map((item, index) => {
					console.log("处理手艺人数据项:", item);

					// 解析服务技能（从PHP序列化字符串中解析）
					let tags = [];
					if (item.servers_kill) {
						try {
							// 尝试解析PHP序列化字符串
							if (item.servers_kill.startsWith('a:')) {
								// 简单提取数字ID，实际项目中可能需要映射到具体技能名称
								const matches = item.servers_kill.match(/i:\d+;i:(\d+)/g);
								if (matches) {
									tags = matches.map(match => {
										const id = match.split(':')[2];
										return `技能${id}`;
									});
								}
							}
						} catch (e) {
							console.error("解析servers_kill失败:", e);
						}
					}

					// 从业年限计算
					let experience = "经验丰富";
					if (item.add_time) {
						const addDate = new Date(item.add_time);
						const now = new Date();
						const yearsDiff = now.getFullYear() - addDate.getFullYear();
						const monthsDiff = now.getMonth() - addDate.getMonth();
						const totalMonths = yearsDiff * 12 + monthsDiff;
						if (totalMonths > 0) {
							if (totalMonths >= 12) {
								const years = Math.floor(totalMonths / 12);
								experience = `${years}年经验`;
							} else {
								experience = `${totalMonths}个月经验`;
							}
						}
					}

					// 标签（使用技能中的第一个或默认）
					let tag = tags.length > 0 ? tags[0] : "专业技师";

					// 从模拟数据中借用一些数据来丰富显示
					const mockTags = ["高级美甲师", "美睫专家", "美容顾问", "纹绣大师", "造型设计", "皮肤管理", "发型总监", "按摩理疗"];
					const tagIndex = index % mockTags.length;

					return {
						id: item.id || index,
						name: item.name || item.nick_name || `手艺人${index + 1}`,
						avatar: item.head_photo ||
							"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png",
						experience: experience,
						tag: tag || mockTags[tagIndex],
						serviceCount: item.service_count || 0,
						goodRating: item.good_rating || '100%'
					};
				});
			},

			// 查看手艺人详情
			viewArtisanDetail(artisan) {
				uni.navigateTo({
					url: `/pages/user/employee-detail?id=${artisan.id}`
				});
			},

			setShare(imageUrl) {
				// 备用图片地址（常量提取，方便统一维护）
				const backupImageUrl =
					"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40";

				// 获取页面栈，用于返回
				const pages = getCurrentPages();

				// 生成分享配置的公共函数（接收图片地址，返回完整配置）
				const getShareConfig = (imgUrl) => ({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					title: "好友刚推了个超赞商家！点开认识TA ~",
					miniProgram: {
						id: "gh_89c92e18b70b", // 小程序原始ID
						path: `/subPackages/user/store-detail?id=${this.sjdetail.id}`, // 动态路径（直接用this，无需_that）
						type: this.$store.state.wxShareType, // 版本类型
						webUrl: "https://www.baidu.com/", // 降级网页地址
					},
					imageUrl: imgUrl, // 动态传入图片地址
					success: (res) => {
						console.log("分享成功:", JSON.stringify(res));
						// 延迟返回并显示成功提示
						setTimeout(() => {
							// 返回上一页（即profile页面）
							uni.navigateBack({
								delta: 1,
								success: () => {
									// 在profile页面显示分享成功提示
									// 使用事件总线或全局状态传递消息
									uni.showToast({
										title: '分享成功',
										icon: 'success',
										duration: 1000
									});
								}
							});
						}, 500); // 延迟0.5秒，让用户看到分享界面
					},
					fail: (err) => {
						console.log("分享失败:", JSON.stringify(err));
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 1000
						});

						// 分享失败也返回，但提示失败
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									uni.showToast({
										title: '分享失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}, 1500);
					},
				});

				// 首次分享：使用传入的imageUrl
				uni.share(getShareConfig(imageUrl))
					.catch(() => {
						// 首次失败时，自动使用备用图重试
						console.log("首次分享图片无效，尝试备用图片分享...");
						uni.share(getShareConfig(backupImageUrl));
					});
			},

			async goInvite() {
				let _that = this;
				let imageUrl =
					"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40";
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var bitmap = null;
				// 获取当前页面 webview 的对象实例
				var currentWebview = await page.$getAppWebview();
				bitmap = await new plus.nativeObj.Bitmap("store-detail");
				// 将webview内容绘制到Bitmap对象中
				currentWebview.draw(
					bitmap,
					function() {
						console.log("截屏绘制图片成功", bitmap);
						bitmap.save(
							"_doc/a.jpg", {},
							async function(i) {
									imageUrl = i.target;
									try {
										// 直接调用导入的函数，不要加 this
										const processedUrl = await handleImgSizeUni(i.target);
										console.log("处理后的图片地址：", processedUrl);
										// 赋值给组件数据
										imageUrl = processedUrl;
									} catch (err) {
										console.error("处理失败：", err);
									}
									_that.setShare(imageUrl);
									bitmap.clear();
								},
								function(e) {
									_that.setShare(imageUrl);
									console.log("保存图片失败：" + JSON.stringify(e));
								}
						);
					},
					function(e) {
						_that.setShare(imageUrl);
						console.log("截屏绘制图片失败：" + JSON.stringify(e));
					}
				);
			},
			previewImage(index) {
				// uni.previewImage({
				// 	urls: this.photoList,
				// 	current: index
				// })
			},
			clickTap(e) {
				if (e.order_type) {
					this.queryData.order_type = e.order_type;
					this.search();
				}
			},
			clickPopTap(e) {
				this.queryData.first_class = e;
				this.search();
			},
			// 去资质页
			goInformation() {
				uni.navigateTo({
					url: `/pages/user/store-detail-information?id=${this.queryData.publish_user_id}`,
				});
			},
			// 获取商家详情
			getShopDetail() {
				request
					.post("/user/sjdetail", this.userObj)
					.then((res) => {
						this.sjdetail = res.data;
						// this.sjdetail.distance = this.sjdetail.distance.toFixed(2)
						this.tabsPopList = [];
						this.sjdetail.servers_kill.forEach((element, index) => {
							let obj = {
								id: element,
								name: this.sjdetail.servers_kill_arr[index],
								active: false,
							};
							this.tabsPopList.push(obj);
						});
						// 如果需要自动分享且未执行过
						if (this.autoShare && !this.autoShareExecuted) {
							this.autoShareExecuted = true;

							// 等待页面渲染
							setTimeout(() => {
								this.autoTriggerShare();
							}, 800);
						}
					})
					.catch((err) => {
						console.log(err);
						// 加载失败时隐藏loading
						if (this.autoShareLoading) {
							uni.hideLoading();
							this.autoShareLoading = false;
							uni.showToast({
								title: '加载失败',
								icon: 'none'
							});
						}
					});
			},
			// 自动触发分享
			autoTriggerShare() {
				// #ifdef APP-PLUS
				console.log('开始自动分享');
				this.goInvite();
				// #endif

				// #ifdef MP-WEIXIN
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});

				uni.showToast({
					title: '请点击右上角分享',
					icon: 'none',
					duration: 2000
				});
				// #endif
			},
			search() {
				// 重置项目显示状态
				this.showAllProjects = false;
				// 触发列表刷新
				this.$nextTick(() => {
					this.$refs.groupRef?.manualRefresh(this.queryData);
				});
			},
		},
	};
</script>

<style lang="less">
	.detail-page {
		padding-bottom: 200rpx;

		/* 主图区域 */
		.main-image-section {
			position: relative;
			width: 750rpx;
			height: 602rpx;
			background-color: #999;

			.banner-swiper {
				width: 750rpx;
				height: 602rpx;
				position: relative;

				.banner-image {
					width: 750rpx;
					height: 602rpx;
				}

				.album {
					position: absolute;
					bottom: 25rpx;
					left: 20rpx;
					height: 44rpx;
					width: 184rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 23rpx;

					.album-left {
						width: 73rpx;
						height: 44rpx;
						background: #FFFFFF;
						border-radius: 23rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						 line-height: 40rpx;
						font-weight: 400;
						font-size: 22rpx;
						text-align: center;
						color: #333333;
					}

					.album-line {
						width: 2rpx;
						height: 20rpx;
						background: #A09C9E;
						border-radius: 1rpx;
						margin: 0 18rpx;
					}

					.album-right {
						height: 44rpx;
						.album-right-text {
							// width: 44rpx;
							// height: 44rpx;
							// border-radius: 23rpx;
							// min-width: 50rpx;
							 //line-height: 44rpx;
							 transform: translateY(-4rpx);
							font-weight: 400;
							font-size: 22rpx;
							text-align: center;
							color: #FFFFFF;
						}

						.album-right-img {
							width: 8rpx;
							height: 16rpx;
							padding-left: 8rpx;
						}
					}
				}
			}
		}

		.detail-info {
			margin-top: 20rpx;
			padding: 0 20rpx;
			position: relative;

			.detail-info-user {
				padding: 20rpx 26rpx 20rpx 30rpx;
				background: #ffffff;
				border-radius: 20rpx;

				.detail-info-user__heard {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					position: relative;

					&__photo {
						width: 122rpx;
						height: 122rpx;
						margin-right: 17rpx;
						border-radius: 10rpx;
						flex-shrink: 0;
						/* 防止头像被压缩 */
					}

					&__name {
						margin-bottom: 15rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						flex: 1;

						&__text {
							margin-bottom: 10rpx;
							font-weight: 500;
							font-size: 42rpx;
							color: #333333;
							// line-height: 80rpx;
							text-align: left;
							font-style: normal;
							width: 100%;
							overflow: hidden;
							// text-overflow: ellipsis;
							white-space: wrap;
						}

						&__sales {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-wrap: nowrap;

							&__text1 {
								font-weight: 400;
								font-size: 22rpx;
								color: #aaaaaa;
								line-height: 30rpx;
								text-align: left;
								font-style: normal;
								display: inline-flex;
								align-items: center;
							}

							&__text2 {
								margin-left: 11rpx;
								margin-right: 2rpx;
								margin-bottom: 2rpx;
								font-family: DINPro, DINPro;
								font-weight: bold;
								font-size: 25rpx;
								color: #666666;
								line-height: 30rpx;
								text-align: left;
								font-style: normal;
								display: inline-flex;
								align-items: center;
							}
						}
					}

					/* 联系客服按钮 */
					.contact-customer-btn {
						width: 114rpx;
						height: 89rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-radius: 20rpx;
						border: #D9DBDB 1rpx solid;
						background: linear-gradient(180deg, #FAF9F9 0%, #FFFFFF 100%);
						margin-left: 20rpx;
						flex-shrink: 0;
						padding: 5rpx;
						transition: all 0.2s ease;

						.contact-customer-icon {
							width: 36rpx;
							height: 34rpx;
							margin-bottom: 8rpx;
						}

						text {
							font-size: 20rpx;
							color: #666666;
							font-weight: 400;
						}

						&:active {
							// background: linear-gradient( 180deg, #FAF9F9 0%, #FFFFFF 100%);
							transform: scale(0.99);
							box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
							/* 内阴影，凹陷效果 */
						}
					}

				}

				.detail-info-user__time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 31rpx;

					&__left {
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;

						&__text1 {
							font-weight: 600;
						}

						&__text2 {
							margin-left: 8rpx;
							font-weight: 500;
							font-family: DINPro, DINPro;
						}
					}

					&__right {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;

						&__img {
							width: 11rpx;
							height: 20rpx;
							margin-left: 12rpx;
						}
					}
				}

				.detail-info-user__tabs {
					margin-top: 16rpx;
					padding-bottom: 23rpx;
					border-bottom: 2rpx solid #f5f3f3;
					display: flex;
					gap: 20rpx;
					flex-wrap: wrap;

					/* 允许标签按行换行排列 */
					&__tab {
						flex-shrink: 0;
						/* 禁止子项被压缩换行 */
						background: #f5f5f5;
						border-radius: 8rpx;
						padding: 0 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.detail-info-user__connect {
					margin-top: 20rpx;

					.connect-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						&:last-child {
							margin-bottom: 0;
						}

						&.address-row {
							align-items: flex-start;
						}

						.address-section {
							flex: 1;
							margin-right: 20rpx;

							.address-content {
								display: flex;
								align-items: center;
								font-weight: 500;
								font-size: 24rpx;
								color: #333333;
								line-height: 33rpx;

								.address-text {
									// flex: 1;
									// width: 460rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.address-arrow {
									width: 11rpx;
									height: 20rpx;
									margin-left: 10rpx;
									flex-shrink: 0;
								}
							}
						}

						.distance-section {
							flex-shrink: 0;
							font-weight: bold;
							font-size: 24rpx;
							color: #999999;
							line-height: 28rpx;
							text-align: right;
							display: flex;
							align-items: center;

							.address-icon {
								width: 20rpx;
								height: 23rpx;
								margin-top: 2rpx;
							}

							.distance-value {
								font-family: "DINPro";
								margin-left: 6rpx;
							}
						}

						.phone-section {
							flex: 1;

							.phone-content {
								display: flex;
								align-items: center;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								line-height: 33rpx;

								.phone-label {
									margin-right: 6rpx;
								}

								.phone-number {
									margin-right: 10rpx;
								}

								.phone-arrow {
									width: 11rpx;
									height: 20rpx;
								}
							}
						}

						.icon-section {
							display: flex;
							align-items: center;
							flex-shrink: 0;

							.nav-icon,
							.phone-icon {
								width: 43rpx;
								height: 43rpx;
								margin-left: 40rpx;
							}
						}
					}
				}

				.detail-info-user__banner {
					width: 100%;
					margin-top: 30rpx;
				}

				/* 营业执照选项 */
				.business-license-section {
					display: flex;
					align-items: center;

					.license-icon {
						width: 32rpx;
						height: 26rpx;
						margin-right: 15rpx;
					}

					.license-info {
						flex: 1;

						.license-title {
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;
						}
					}

					.license-view {
						display: flex;
						align-items: center;

						text {
							font-size: 24rpx;
							color: #666666;
						}

						.license-arrow {
							width: 11rpx;
							height: 20rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			/* 卡片外的切换标签样式（无背景） */
			.shop-tabs-outside {
				display: flex;
				margin: 20rpx 0rpx 0 0;

				.shop-tab-outside {
					font-size: 30rpx;
					line-height: 42rpx;
					color: #333;
					margin-right: 50rpx;
					padding: 20rpx 10rpx;
					position: relative;
					font-weight: 500;
					cursor: pointer;
					transition: all 0.3s ease;

					&.active {
						color: #E8101E;
					}
				}
			}

			.detail-info-shop {
				padding: 20rpx;
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 10rpx;

				/* 卡片内的标签样式（有背景） */
				.shop-tabs-inside {
					margin-bottom: 20rpx;

					.shop-tab-inside {
						font-size: 34rpx;
						font-weight: 500;
						padding: 10rpx 0;

					}
				}

				.detail-info-shop-title {
					width: 136rpx;
					height: 48rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		/* 手艺人展示板块（只有有手艺人时才显示） */
		.artisan-showcase-section {
			background: #ffffff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx 0rpx;
			padding: 20rpx;

			.showcase-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.showcase-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.view-all-btn {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #666666;
					}

					.view-all-arrow {
						width: 11rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.showcase-scroll {
				white-space: nowrap;
				width: 100%;

				.showcase-list {
					display: inline-flex;

					.showcase-item {
						display: inline-flex;
						flex-direction: column;
						align-items: center;
						margin-right: 35rpx;
						white-space: normal;
						width: 198rpx;
						flex-shrink: 0;
						position: relative;

						&:last-child {
							margin-right: 0;
						}

						.showcase-avatar {
							width: 198rpx;
							height: 200rpx;
							background: #D8D8D8;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
						}

						.showcase-name {
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;
							text-align: center;
							line-height: 33rpx;
							margin-bottom: 8rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.showcase-experience {
							font-size: 22rpx;
							color: #666666;
							text-align: center;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-bottom: 5rpx;
						}

						.showcase-tag {
							font-size: 20rpx;
							color: #E8101E;
							background: rgba(232, 16, 30, 0.1);
							border-radius: 15rpx;
							padding: 4rpx 12rpx;
							text-align: center;
							width: auto;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	::v-deep .list-container {
		padding: 0;
	}
</style>