<template>
  <view v-if="visible" class="popup-mask" @tap="close">
    <view class="city-picker" @tap.stop>
      <!-- 头部 -->
      <view class="picker-header">
        <text class="picker-title">选择城市</text>
        <text class="picker-close" @tap="close">✕</text>
      </view>

      <!-- 定位城市 -->
      <view class="locate-section">
        <view class="locate-label">
          <text class="locate-icon">📍</text>
          <text class="locate-text">当前定位</text>
        </view>
        <view class="locate-city" @tap="selectLocatedCity">
          <text class="city-text">{{ locatedCity || '定位中...' }}</text>
        </view>
      </view>

      <!-- 热门城市 -->
      <view class="hot-section">
        <text class="section-title">热门城市</text>
        <view class="city-grid">
          <view
            v-for="item in hotCities"
            :key="item"
            :class="['city-tag', { active: selectedCity === item }]"
            @tap="selectCity(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>

      <!-- 城市列表 -->
      <scroll-view scroll-y class="city-list">
        <view v-for="group in cityGroups" :key="group.letter" class="city-group">
          <text class="group-letter">{{ group.letter }}</text>
          <view
            v-for="city in group.cities"
            :key="city"
            :class="['city-item', { active: selectedCity === city }]"
            @tap="selectCity(city)"
          >
            {{ city }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  city?: string;
}>();

const emit = defineEmits<{
  (e: 'change', city: string): void;
}>();

const visible = ref(false);
const selectedCity = ref(props.city || '上海');
const locatedCity = ref('');

const hotCities = [
  '上海', '北京', '广州', '深圳',
  '杭州', '成都', '重庆', '西安',
  '三亚', '厦门', '南京', '武汉',
];

const cityGroups = [
  { letter: 'A', cities: ['安庆', '安阳', '鞍山', '安康'] },
  { letter: 'B', cities: ['北京', '保定', '包头', '蚌埠', '宝鸡', '滨州'] },
  { letter: 'C', cities: ['成都', '重庆', '长沙', '长春', '常州', '沧州', '承德'] },
  { letter: 'D', cities: ['大连', '东莞', '大庆', '大同', '德州', '东营'] },
  { letter: 'F', cities: ['福州', '佛山', '抚顺', '阜阳'] },
  { letter: 'G', cities: ['广州', '贵阳', '桂林', '赣州'] },
  { letter: 'H', cities: ['杭州', '哈尔滨', '合肥', '海口', '呼和浩特', '惠州', '邯郸'] },
  { letter: 'J', cities: ['济南', '吉林', '嘉兴', '金华', '济宁', '荆州', '九江'] },
  { letter: 'K', cities: ['昆明', '开封', '喀什'] },
  { letter: 'L', cities: ['兰州', '洛阳', '连云港', '临沂', '柳州', '泸州'] },
  { letter: 'M', cities: ['绵阳', '牡丹江', '茂名'] },
  { letter: 'N', cities: ['南京', '南昌', '南宁', '宁波', '南通', '南阳'] },
  { letter: 'P', cities: ['平顶山', '濮阳', '莆田'] },
  { letter: 'Q', cities: ['青岛', '秦皇岛', '泉州', '齐齐哈尔'] },
  { letter: 'S', cities: ['上海', '深圳', '沈阳', '石家庄', '苏州', '汕头', '绍兴', '三亚'] },
  { letter: 'T', cities: ['天津', '太原', '唐山', '台州', '泰安'] },
  { letter: 'W', cities: ['武汉', '无锡', '温州', '乌鲁木齐', '潍坊', '威海', '芜湖'] },
  { letter: 'X', cities: ['西安', '厦门', '徐州', '襄阳', '咸阳', '新乡'] },
  { letter: 'Y', cities: ['烟台', '扬州', '银川', '宜昌', '盐城', '岳阳'] },
  { letter: 'Z', cities: ['郑州', '珠海', '淄博', '中山', '株洲', '漳州'] },
];

function open() {
  visible.value = true;
}

function close() {
  visible.value = false;
}

function selectCity(city: string) {
  selectedCity.value = city;
  emit('change', city);
  close();
}

function selectLocatedCity() {
  if (locatedCity.value && locatedCity.value !== '定位失败') {
    selectCity(locatedCity.value);
  }
}

function getLocation() {
  uni.getLocation({
    type: 'gcj02',
    success: () => {
      locatedCity.value = '上海';
    },
    fail: () => {
      locatedCity.value = '定位失败';
    },
  });
}

onMounted(() => {
  getLocation();
});

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}

.city-picker {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.picker-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.picker-close {
  font-size: 36rpx;
  color: #999;
  padding: 8rpx;
}

.locate-section {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.locate-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.locate-icon {
  font-size: 28rpx;
}

.locate-text {
  font-size: 26rpx;
  color: #999;
}

.locate-city {
  background: #fff1eb;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
}

.locate-city .city-text {
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 500;
}

.hot-section {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.section-title {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
  display: block;
}

.city-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.city-tag {
  padding: 14rpx 28rpx;
  font-size: 28rpx;
  color: #333;
  background: #f5f7fa;
  border-radius: 8rpx;

  &.active {
    color: #FF6B35;
    background: #fff1eb;
    font-weight: 500;
  }
}

.city-list {
  flex: 1;
  overflow-y: auto;
}

.city-group {
  padding: 0 32rpx;
}

.group-letter {
  font-size: 26rpx;
  color: #999;
  padding: 16rpx 0;
  display: block;
  border-bottom: 1rpx solid #f5f5f5;
}

.city-item {
  padding: 24rpx 0;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;

  &.active {
    color: #FF6B35;
    font-weight: 500;
  }
}
</style>
