<template>
	<view :style="warpCss">
		<view :style="maskLayer">
		</view>
		<view v-if="diyComponent.showtitle == 1"
			class="flex items-center mb-[16rpx] mt-[32rpx] flex-right justify-between mr-2">
			<view>
				<view class="ml-4 font-bold text-[32rpx]" :style="{
          color: diyComponent.titlecolor,
          fontSize: diyComponent.titlesize + 'rpx',
        }">{{diyComponent.titlename}}
				</view>
			</view>
			<view class="flex items-center" @click="locationVal.repositionFn()">
				<view class="text-[#4d5048]" :style="{
            color: diyComponent.localcolor,
            fontSize: diyComponent.localsize + 'rpx',
          }">
					当前位置:
				</view>
				<view class="text-[#4d5048] tk-sltext ml-1" :style="{
            color: diyComponent.localcolor,
            fontSize: diyComponent.localsize + 'rpx',
          }">
					{{ !systemStore.currShippingAddress ? "选择位置" : systemStore.currShippingAddress.community }}
				</view>
				<view>
					<u-icon name="arrow-right" :color="diyComponent.localcolor" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="diyComponent.showsearch == 1" class="fl items-center ml-4 mr-4 mb-2 bg-[#fcfcfc] rounded-[16rpx]"
			:style="{
		  background: diyComponent.searchcolor,
		}">
			<u-input clearable v-model="keyword" focus="true" placeholder="输入门店名称快速检索" @change="reload" @blur="reload"
				suffixIcon="search" suffixIconStyle="color: #909399"></u-input>
		</view>
		<view v-if="list&&list.length>0" class="tk-card" :style="{
		   background: diyComponent.cardbackground,padding:diyComponent.paddingsize + 'rpx'
		 }" 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" :style="{
					  color: diyComponent.storetitlecolor,
					}">{{ item.name }}</view>
					<view class="text-xs text-slate-500 mb-2 tk-sltext" :style="{
					  color: diyComponent.desctitlecolor,
					}">{{item.desc}}</view>
					<view class="flex justify-between">
						<view class="flex items-center">
							<u-tag size="mini" :bgColor="diyComponent.tagbgcolor" :borderColor="diyComponent.tagbgcolor"
								:color="diyComponent.tagtextcolor" :text="item.work_time"></u-tag>
						</view>
					</view>
				</view>
			</view>
			<view class="line-box mt-2 mb-2" :style="{
		  background: diyComponent.linecolor,
		}"></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="diyComponent.othertitlecolor"></u-icon>
					</view>
					<view class="ml-1 text-slate-500 tk-sltext" :style="{
					  color: diyComponent.othertitlecolor,
					}">{{item.address}}</view>
				</view>
				<view class="flex items-center  text-slate-600 " :style="{
					  color: diyComponent.othertitlecolor,
					}">
					距离{{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="diyComponent.othertitlecolor"></u-icon>
					</view>
					<view class="ml-1 text-slate-500 tk-sltext" :style="{
					  color: diyComponent.othertitlecolor,
					}">{{item.mobile}}</view>
				</view>

			</view>
		</view>
		<up-loading-icon class="mt-4 mb-4" :show="loading" mode="circle" 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 -->
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed,
		watch,
		onMounted,
		nextTick,
		getCurrentInstance,
		watchEffect
	} from "vue";
	import { img, redirect } from "@/utils/common";
	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, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
	import useDiyStore from "@/app/stores/diy";
	import useSystemStore from "@/stores/system";
	import { getStoreLists } from "@/addon/d_store/api/store";
	import { getLocationData, openMap, telPhone } from "@/addon/d_store/utils/ts/common";
	import { getAddressByLatlng } from "@/app/api/system";
	import { useLocation } from '@/hooks/useLocation'
	const locationVal = useLocation(true);
	locationVal.onLoad();
	locationVal.initFn();
	locationVal.refreshLocationFn();
	const systemStore = useSystemStore();
	const currentPosition = ref();
	let list = ref<Array<Object>>([]);
	let loading = ref<boolean>(false);
	const page = ref(1);
	const planSource = ref(4);
	const actType = ref([
		{ name: "所有活动", value: 4 },
		{ name: "美团", value: 2 },
		{ name: "饿了么", value: 3 },
	]);

	const keyword = ref()
	const reload = (e) => {
		loading.value = true;
		keyword.value = e
		listData.value = []
		page.value = 1
		getStoreListFn();
	}
	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
		};
		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;
			});
	};
	getStoreListFn();
	watch(() => systemStore.location, (nval, oval) => {
		if (nval.latitude && nval.longitude) {
			loading.value = true;
			listData.value = []
			page.value = 1
			getStoreListFn()
		} else {
			currentPosition.value = "定位中..."
		}
	}, { deep: true })

	onReachBottom(() => {
		page.value++
		getStoreListFn();
	});

	const props = defineProps(["component", "index", "pullDownRefreshCount"]);

	const diyStore = useDiyStore();

	const diyComponent = computed(() => {
		if (diyStore.mode == "decorate") {
			return diyStore.value[props.index];
		} else {
			return props.component;
		}
	});

	const warpCss = computed(() => {
		var style = "";
		style += "position:relative;";
		if (diyComponent.value.componentStartBgColor) {
			if (
				diyComponent.value.componentStartBgColor &&
				diyComponent.value.componentEndBgColor
			)
				style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
			else
				style +=
					"background-color:" + diyComponent.value.componentStartBgColor + ";";
		}

		if (diyComponent.value.componentBgUrl) {
			style += `background-image:url('${img(
				diyComponent.value.componentBgUrl
			)}');`;
			style += "background-size: cover;background-repeat: no-repeat;";
		}

		if (diyComponent.value.topRounded)
			style +=
				"border-top-left-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
		if (diyComponent.value.topRounded)
			style +=
				"border-top-right-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
		if (diyComponent.value.bottomRounded)
			style +=
				"border-bottom-left-radius:" +
				diyComponent.value.bottomRounded * 2 +
				"rpx;";
		if (diyComponent.value.bottomRounded)
			style +=
				"border-bottom-right-radius:" +
				diyComponent.value.bottomRounded * 2 +
				"rpx;";
		return style;
	});

	// 背景图加遮罩层
	const maskLayer = computed(() => {
		var style = "";
		if (diyComponent.value.componentBgUrl) {
			style += "position:absolute;top:0;width:100%;";
			style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10
				});`;
			style += `height:${height.value}px;`;

			if (diyComponent.value.topRounded)
				style +=
					"border-top-left-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
			if (diyComponent.value.topRounded)
				style +=
					"border-top-right-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
			if (diyComponent.value.bottomRounded)
				style +=
					"border-bottom-left-radius:" +
					diyComponent.value.bottomRounded * 2 +
					"rpx;";
			if (diyComponent.value.bottomRounded)
				style +=
					"border-bottom-right-radius:" +
					diyComponent.value.bottomRounded * 2 +
					"rpx;";
		}

		return style;
	});

	watch(
		() => props.pullDownRefreshCount,
		(newValue, oldValue) => {
			// 处理下拉刷新业务
		}
	);

	onMounted(() => {
		refresh();
		getStoreListFn();
		// 装修模式下刷新
		if (diyStore.mode == "decorate") {
			watch(
				() => diyComponent.value,
				(newValue, oldValue) => {
					if (newValue && newValue.componentName == "RichText") {
						refresh();
					}
				}
			);
		}
	});

	const instance = getCurrentInstance();
	const height = ref(0);

	const refresh = () => {
		nextTick(() => {
			const query = uni.createSelectorQuery().in(instance);
			query
				.select(".diy-rich-text")
				.boundingClientRect((data : any) => {
					height.value = data.height;
				})
				.exec();
		});
	};
</script>

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

	.uni-system-open-location {
		z-index: 99999999;
	}
</style>