<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft"
		:titleStyle="{ color: '#333', fontSize: '32rpx' }" />
	<view class="container">
		<view class="search-box">
			<uv-search placeholder="搜索店铺" v-model="keywork" @custom="search(keywork)" shape="round" bgColor="#f5f5f5"
				margin="20rpx 30rpx"></uv-search>
		</view>
		<view class="shop-list">
			<view v-for="(item, index) in list" :key="index" class="shop-item"
				:class="{ 'shop-item-active': item.id == store.id }" @click="choice(item)">
				<view class="shop-header">
					<image :src="item.image" mode="aspectFill" class="shop-image"></image>
					<view class="shop-info">
						<view class="shop-name">{{ item.name }}</view>
						<view class="shop-status">{{ item.status_text }}</view>
					</view>
				</view>
				<view class="shop-body">
					<view class="info-row">
						<uv-icon name="map" size="14" color="#666"></uv-icon>
						<text class="distance">距离您 {{ kmUnit(item.dis) }}</text>
					</view>
					<view class="info-row" v-if="item.distance > 0">
						<uv-icon name="car" size="14" color="#666"></uv-icon>
						<text>配送范围 {{ item.distance }}km</text>
						<text class="delivery-price">配送费 ¥{{ item.deliveryPrice }}</text>
					</view>
					<view class="info-row no-delivery" v-else>
						<uv-icon name="info-circle" size="14" color="#ff5722"></uv-icon>
						<text class="no-delivery-text">外卖不配送</text>
					</view>
					<view class="info-row">
						<uv-icon name="home" size="14" color="#666"></uv-icon>
						<text>{{ item.addressMap + ' ' + item.address }}</text>
					</view>
					<view class="info-row">
						<uv-icon name="clock" size="14" color="#666"></uv-icon>
						<text>营业时间 {{ formatDateTime(item.startTime, 'hh:mm') }} -
							{{ formatDateTime(item.endTime, 'hh:mm') }}</text>
					</view>
				</view>
				<view class="shop-footer">
					<uv-button @click.stop="openLocation(item)" type="primary" size="mini" shape="circle"
						class="action-btn">
						<uv-icon name="map-fill" color="#fff" size="14"></uv-icon>
						导航
					</uv-button>
					<view style="width: 20rpx;"></view>
					<uv-button @click.stop="call(item.mobile)" type="success" size="mini" shape="circle"
						class="action-btn">
						<uv-icon name="phone-fill" color="#fff" size="14"></uv-icon>
						致电
					</uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad, onShow, onPullDownRefresh, onHide } from '@dcloudio/uni-app'
import { formatDateTime, kmUnit, prePage } from '@/utils/util'
import {
	shopNearby,
	menuGoods
} from '@/api/goods'
import {
	shopGetList
} from '@/api/market'
const main = useMainStore()
const { store, location } = storeToRefs(main)
const title = ref('店铺')
const list = ref([])
const keywork = ref('')
const page = ref(1)
const pagesize = ref(10)

onLoad(() => {
	getShop();
})

const getShop = async (keywork = '') => {
	let data = await shopGetList({
		lat: location.value.latitude ? location.value.latitude : 0,
		lng: location.value.longitude ? location.value.longitude : 0,
		kw: keywork,
		shop_id: 0
	});
	if (data) {
		//console.log(data);
		if (page.value == 1) {
			list.value = data;
		} else {
			for (let i in data) {
				list.value.push(data[i]);
			}
		}
	}
}
//打开定位
const openLocation = (shop) => {
	//console.log(shop);
	uni.openLocation({
		latitude: parseFloat(shop.lat),
		longitude: parseFloat(shop.lng),
		name: shop.name,
		address: shop.addressMap + shop.address,
		fail: (res) => {
			console.log(res);
		}
	})
}
// 打电话
const call = (mobile) => {
	uni.makePhoneCall({
		phoneNumber: mobile
	})
}
// 搜索按钮
const search = (keywork) => {
	page.value = 1;
	getShop(keywork);
}
// 选中店铺
const choice = (shop) => {
	if (shop.id !== store.value.id) {
		uni.removeStorageSync("cart");
	}
	main.SET_STORE(shop);
	uni.$emit('refreshMenu')
	uni.switchTab({
		url: '/pages/menu/menu',
		success(res) {
		},
		fail(res) {
			console.log(res);
		}
	});
}


</script>

<style lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.search-box {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #fff;
	padding: 10rpx 0;
}

.shop-list {
	padding: 20rpx;
}

.shop-item {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s;

	&-active {
		border: 2rpx solid #52ac41;
		background-color: #f0f9ee;
	}

	.shop-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.shop-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}

		.shop-info {
			flex: 1;

			.shop-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
			}

			.shop-status {
				font-size: 24rpx;
				color: #52ac41;
				padding: 4rpx 12rpx;
				background-color: #f0f9ee;
				border-radius: 20rpx;
				display: inline-block;
			}
		}
	}

	.shop-body {
		.info-row {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			color: #666;

			.uv-icon {
				margin-right: 8rpx;
			}

			.distance {
				color: #52ac41;
				margin-right: 16rpx;
			}

			.delivery-price {
				margin-left: 16rpx;
				color: #ff5722;
			}

			&.no-delivery {
				.no-delivery-text {
					color: #ff5722;
				}
			}
		}
	}

	.shop-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 2rpx solid #f5f5f5;

		.action-btn {
			margin-left: 20rpx;

			.uv-icon {
				margin-right: 4rpx;
			}
		}
	}
}
</style>
