<template>
	<view class="detail-box">
		<view class="flex items-center mb-[16rpx] mt-[32rpx] flex-right justify-between mr-2">
			<view>
				<view class="ml-4 font-bold text-[36rpx]">附近门店 </view>
			</view>
			<view class="flex items-center" @click="locationVal.repositionFn()">
				<view class="text-[#4d5048]"> 当前位置: </view>
				<view class="text-[#4d5048] tk-sltext ml-1">
					{{
            !systemStore.currShippingAddress
              ? "选择位置"
              : systemStore.currShippingAddress.community
          }}
				</view>
				<view>
					<u-icon name="arrow-right" color="#4d5048" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="tk-card fl items-center">
			<u-input clearable v-model="keyword" placeholder="输入门店名称快速搜索" @change="reload()"></u-input>
		</view>
		<view v-if="list && list.length > 0" class="tk-card" v-for="(item, index) in list">
			<view class="flex items-center" @click="redirect({ url: '/addon/d_store/pages/detail?id=' + item.id })">
				<view>
					<image style="
              width: 140rpx;
              height: 140rpx;
              background-color: #eeeeee;
              border-radius: 8px;
            " :src="img(item.logo)" mode="aspectFill"></image>
				</view>

				<view class="flex flex-col ml-2 w-[100%] justify-between mb-2">
					<view class="font-bold tk-sltext">{{ item.name }}</view>
					<view class="text-xs text-slate-500 mb-2 tk-sltext">{{
            item.desc
          }}</view>
					<view class="flex justify-between">
						<view class="flex items-center">
							<u-tag size="mini" bgColor="#6e6f59" borderColor="#867d44" :text="item.work_time"></u-tag>
						</view>
					</view>
				</view>
			</view>
			<view class="line-box mt-2 mb-2"></view>
			<view @click="openMap(item.lat, item.lng)" class="flex justify-between mt-1">
				<view class="flex items-center w-[60%]">
					<view>
						<u-icon name="map" size="16" color="#64748B"></u-icon>
					</view>
					<view class="ml-1 text-slate-500 tk-sltext">{{ item.address }}</view>
				</view>
				<view class="flex items-center text-slate-600">
					距离{{ item.distance }}km
				</view>
			</view>
			<view @click="telPhone(item.mobile)" class="flex justify-between mt-1">
				<view class="flex items-center w-[60%]">
					<view>
						<u-icon name="phone" size="16" color="#64748B"></u-icon>
					</view>
					<view class="ml-1 text-slate-500 tk-sltext">{{ item.mobile }}</view>
				</view>
			</view>
		</view>
	</view>
	<up-loading-icon class="mt-4 mb-4" :show="loading" mode="circle" inactive-color="#6e6f59"
		timing-function="linear"></up-loading-icon>
	<mescroll-empty :option="{ icon: img('static/resource/images/empty.png') }"
		v-if="!list.length && loading == false"></mescroll-empty>

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

<script setup lang="ts">
	import { ref, computed, watch } from "vue";
	import MescrollUni from "@/components/mescroll/mescroll-uni/mescroll-uni.vue";
	import MescrollBody from "@/components/mescroll/mescroll-body/mescroll-body.vue";
	import useMescroll from "@/components/mescroll/hooks/useMescroll.js";
	import MescrollEmpty from "@/components/mescroll/mescroll-empty/mescroll-empty.vue";
	import { onLoad, onShow, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
	import useDiyStore from "@/app/stores/diy";
	import { img, redirect, handleOnloadParams } from "@/utils/common";
	const { mescrollInit, downCallback, getMescroll } = useMescroll();
	import { useShare } from "@/hooks/useShare";
	import { getStoreLists } from "@/addon/d_store/api/store";
	import {
		getLocationData,
		openMap,
		telPhone,
	} from "@/addon/d_store/utils/ts/common";
	const { setShare, onShareAppMessage, onShareTimeline } = useShare();
	import { useLogin } from "@/hooks/useLogin";
	import useMemberStore from "@/stores/member";
	import useSystemStore from "@/stores/system";
	const memberStore = useMemberStore();
	const userInfo = computed(() => memberStore.info);
	const systemStore = useSystemStore();
	import { getAddressByLatlng } from "@/app/api/system";
	import { useLocation } from "@/hooks/useLocation";
	const locationVal = useLocation(true);
	locationVal.onLoad();
	locationVal.initFn();
	const currentPosition = ref("定位中");
	const keyword = ref()
	let list = ref<Array<Object>>([]);
	let loading = ref<boolean>(false);

	const locationData = ref(uni.getStorageSync(""));
	setShare();
	onShareAppMessage();
	onShareTimeline();
	const page = ref(1);
	const listData = ref([]);
	const getStoreListFn = () => {
		let location = getLocationData();
		if (!location) {
			location = uni.getStorageSync("location");
		}
		loading.value = true;
		let data : object = {
			page: page.value,
			lat: location.latitude,
			lng: location.longitude,
			name: keyword.value
		};
		console.log(data)
		getStoreLists(data)
			.then((res) => {
				let newArr = res.data.data as Array<Object>;
				if (newArr.length == 0) {
					loading.value = false;
					uni.showToast({
						title: "已经没有更多数据",
						icon: "none",
					});
					return;
				}
				loading.value = false;
				if (page.value == 1) {
					list.value = newArr;
				} else {
					list.value = list.value.concat(newArr);
				}
			})
			.catch(() => {
				loading.value = false;
			});
	};
	watch(
		() => systemStore.location,
		(nval, oval) => {
			if (nval.latitude && nval.longitude) {
				loading.value = true;
				listData.value = [];
				page.value = 1;
				getStoreListFn();
			} else {
				currentPosition.value = "定位中...";
			}
		},
		{ deep: true }
	);
	const reload = (e) => {
		loading.value = true;
		listData.value = []
		page.value = 1
		getStoreListFn();
	}
	onReachBottom(() => {
		page.value++;
		getStoreListFn();
	});

	onLoad((option) => {
		if (uni.getStorageSync("addressByLatlng")) {
			currentPosition.value =
				uni.getStorageSync("addressByLatlng").formatted_addresses.recommend;
		}

		getStoreListFn();
	});
</script>


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

	.tk-sltext {
		max-width: 200px; //也可以设置最大宽度
		overflow: hidden; // 溢出隐藏
		display: -webkit-box; //  自适应布局 弹性伸缩盒子
		-webkit-box-orient: vertical; //垂直排列子元素 伸缩盒子的子元素排列
		-webkit-line-clamp: 1; //最多显示几行 多出部分。。。显示
		text-overflow: ellipsis; // 显示省略号
	}

	.class-select {
		position: relative;
		font-weight: bold;
		font-size: 28rpx;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			height: 8rpx;
			background-color: #fe6d3a;
			border-radius: 4rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
		}
	}

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