<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <picker mode="region" @change="onRegionChange">
        <view class="region">{{ region }}</view>
      </picker>
      <input class="search-input" placeholder="请输入您的地址" />
    </view>

    <!-- 地图展示 -->
    <map 
      class="map-view" 
      :longitude="longitude" 
      :latitude="latitude" 
      scale="16" 
      show-location 
      :markers="markers"
    ></map>

    <!-- 地址列表 -->
    <view class="address-list">
      <block v-for="(item, index) in addressList" :key="index">
        <view 
          class="address-item" 
          @tap="onSelect(item)"
        >
          <view class="addr-info">
            <view class="addr-title">{{ item.name }}</view>
            <view class="addr-desc">{{ item.detail }}</view>
          </view>
          <radio :checked="selectedId === item.id" />
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      region: '重庆',
      latitude: 29.534,
      longitude: 106.565,
      selectedId: null,
      markers: [
        {
          id: 1,
          latitude: 29.534,
          longitude: 106.565,
          // iconPath: '/static/ic_map.png', // 设置背景图
          width: 20,
          height: 20
        }
      ],
      addressList: [
        {
          id: 1,
          name: '综合服务中心-1栋',
          detail: '重庆市南川区隆化大道9号'
        },
        {
          id: 2,
          name: '综合服务中心-2栋',
          detail: '重庆市南川区隆化大道12号'
        },
        {
          id: 3,
          name: '综合服务中心-3栋',
          detail: '重庆市南川区隆化大道4号'
        },
        {
          id: 4,
          name: '综合服务中心-4栋',
          detail: '重庆市南川区隆化大道5号'
        },
        {
          id: 5,
          name: '综合服务中心-5栋',
          detail: '重庆市南川区隆化大道145号'
        }
      ]
    };
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    onSelect(item) {
      this.selectedId = item.id;
      console.log('Selected:', item);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f5f5f5;
}

.region {
  margin-right: 20rpx;
  color: #333;
}

.search-input {
  flex: 1;
  background: #fff;
  border-radius: 10rpx;
  padding: 10rpx;
}

.map-view {
  width: 100%;
  height: 400rpx;
}

.address-list {
  padding: 20rpx;
  background: #fff;
}

.address-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.addr-info {
  display: flex;
  flex-direction: column;
}

.addr-title {
  font-weight: bold;
  font-size: 32rpx;
}

.addr-desc {
  font-size: 26rpx;
  color: #888;
  margin-top: 6rpx;
}
</style>