<template>
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<view class="section_1 flex-col">
				<view class="group_2 flex-row">
					<text class="text_2">{{ title }}</text>
				</view>
			</view>
			<view class="search-container">
				<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)" placeholder="搜索看看～"></uv-search>
			</view>
		</view>
		
		<view class="shop-list flex-col">
			<view v-for="(item,index) in list" :key="index" class="shop-item-container">
				<view 
					class="shop-item flex-row" 
					:class="{'shop-item-selected': item.id == store.id}"
					@click="choice(item)"
				>
					<view class="text-group_1 flex-col">
						<text class="shop-name">{{item.name}}</text>
						<text class="shop-address">{{item.addressMap + ' ' + item.address}}</text>
						<view class="shop-status">
							<text :class="{'status-open': item.status == 1, 'status-closed': item.status != 1}">
								{{item.status_text}}:
							</text>
							<text class="shop-hours">{{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</text>
						</view>
						<view class="shop-delivery" v-if="item.distance > 0">
							<text>配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</text>
						</view>
						<view class="shop-delivery" v-else>
							<text>外卖不配送</text>
						</view>
					</view>
					
					<view class="shop-thumbnail" v-if="item.image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					
					<view class="group_3 flex-col justify-between">
						<text class="shop-distance">{{kmUnit(item.dis)}}</text>
						<view class="shop-actions flex-row">
							<view class="action-btn" @click.stop="openLocation(item)">
								<uv-icon name="map" size="20"></uv-icon>
							</view>
							<view class="action-btn" @click.stop="call(item.mobile)">
								<uv-icon name="phone" size="20"></uv-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view class="shop-selected-badge flex-col" v-if="item.id == store.id">
					<text class="badge-text">当前选择</text>
				</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) => {
	main.SET_STORE(shop);
	uni.$emit('refreshMenu')
	uni.switchTab({ 
		url:'/pages/menu/menu',
		success(res) {
		},
		fail(res) {
			console.log(res);
		}
	});
}

	
</script>

<style lang="scss">
@import './common.css';

.page {
	background-color: rgba(244, 244, 239, 1);
	position: relative;
	width: 750rpx;
	min-height: 100vh;
}

.box_1 {
	background-color: rgba(255, 255, 255, 1);
	width: 750rpx;
	padding-bottom: 30rpx;
}

.section_1 {
	padding: 30rpx 0;
}

.group_2 {
	width: 100%;
	height: 65rpx;
	justify-content: center;
}

.text_2 {
	width: 120rpx;
	height: 42rpx;
	color: rgba(0, 0, 0, 1);
	font-size: 32rpx;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	line-height: 42rpx;
}

.search-container {
	width: 100%;
	padding: 0 32rpx;
}

.shop-list {
	padding: 32rpx;
}

.shop-item-container {
	position: relative;
	margin-bottom: 32rpx;
}

.shop-item {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	border: 2rpx solid rgba(225, 225, 225, 1);
	position: relative;
}

.shop-item-selected {
	border: 2rpx solid rgba(82, 172, 65, 1);
}

.text-group_1 {
	flex: 1;
}

.shop-name {
	width: 100%;
	font-size: 28rpx;
	font-weight: 500;
	color: rgba(34, 34, 34, 1);
	margin-bottom: 12rpx;
}

.shop-address {
	font-size: 24rpx;
	color: rgba(153, 153, 153, 1);
	line-height: 34rpx;
	margin-bottom: 12rpx;
}

.shop-status {
	font-size: 22rpx;
	margin-bottom: 6rpx;
}

.status-open {
	color: rgba(82, 172, 65, 1);
	font-weight: 500;
}

.status-closed {
	color: rgba(169, 169, 169, 1);
}

.shop-hours {
	color: rgba(169, 169, 169, 1);
	font-size: 22rpx;
	margin-left: 4rpx;
}

.shop-delivery {
	font-size: 22rpx;
	color: rgba(153, 153, 153, 1);
}

.shop-thumbnail {
	width: 80rpx;
	height: 80rpx;
	margin-right: 16rpx;
	
	image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
}

.group_3 {
	width: 100rpx;
	height: 100%;
}

.shop-distance {
	font-size: 24rpx;
	color: rgba(153, 153, 153, 1);
	text-align: right;
}

.shop-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 16rpx;
}

.action-btn {
	width: 44rpx;
	height: 44rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 16rpx;
}

.shop-selected-badge {
	background-color: rgba(234, 183, 41, 1);
	border-radius: 16rpx 16rpx 0 16rpx;
	height: 32rpx;
	width: 104rpx;
	position: absolute;
	left: 24rpx;
	top: -16rpx;
	z-index: 1;
}

.badge-text {
	width: 80rpx;
	height: 28rpx;
	color: rgba(255, 255, 255, 1);
	font-size: 20rpx;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	line-height: 32rpx;
}
</style>
