<template>
  <view class="kfc-container">
    <!-- 顶部商品图片 -->
	<view class="container-img">
		<image
		  class="kfc-bucket-img" 
		  :src="detailInfo.storeCover" 
		></image>
	</view>
    
    <!-- 店铺信息模块 -->
    <view class="store-info">
      <text class="store-name">{{ detailInfo.storeName }}</text>
      <view class="business-hours">营业时间：<text>{{ detailInfo.openAt}}</text></view>
      <view class="address">地址：<text>{{ detailInfo.storeAddress }}</text></view>
      <view class="distance">距您{{ local }}米</view>
    </view>
  </view>
</template>

<script>
import { get, post } from '@/utils/request';
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
export default {
  data() {
    return {
	  formatTime,
	  IMAGE_BASE_URL,
	  Id:null,
      detailInfo: {},
	  local:null,
    }
  },
  onLoad(options) { 
  	if (options && options.Id && options.local)  { 
  		this.Id = options.Id;
		this.local = options.local;
  	}
  },
  mounted(){
	  this.getAroundDetail();
  },
  methods: {
	async getAroundDetail(){
		try {
			const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
			if (!res || !res.success) {
				throw new Error('获取详情失败');
			}
			res.data.storeCover = IMAGE_BASE_URL + res.data.storeCover;
		    this.detailInfo = {...res.data};
		} catch (err) {
			console.error('获取详情失败:', err);
		}
		
	}
  }
}
</script>


<style lang="scss" scoped>
// 定义变量，便于统一修改和维护
$primary-color: #999;
$title-size: 36rpx;
$text-size: 26rpx;
$spacing: 30rpx;
$border-radius: 10rpx;

.kfc-container {
  padding: 10px;
  
  .container-img{
	  max-width: 750rpx;
	  height: 500rpx;
	  // 图片样式
	  .kfc-bucket-img {
	    width: 100%;
		height: 100%;
	    border-radius: $border-radius;
	  }
  }
  
  
  
  // 店铺信息样式
  .store-info {
    margin-top: $spacing;
    
    .store-name {
      font-size: $title-size;
      font-weight: bold;
      //margin-bottom: $spacing / 2;
      display: block;
    }
    
    .business-hours,
    .address,
    .distance {
      font-size: $text-size;
      color: $primary-color;
      margin-bottom: 5px;
      display: block;
	  text{
		  color: #333;
		  // font-weight: 900;
	  }
    }
  }
}
</style>