<template>
  <!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
  <view class="country-bar" id="countryBar">
    <view class="country-inner">
      <view
        class="country-item"
        :class="{ active: selectedId === item.id }"
        v-for="(item, index) in list"
        :key="index"
        @tap="selectItem(item)"
      >
        <!-- 国家图标(18x18 圆形,来自后端 countryIcon 拼接 BASE_URL) -->
        <image class="country-icon" :src="item.icon" mode="aspectFill"></image>
        <text class="country-name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CountryBar',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    selectedId: {
      type: [String, Number],
      default: ''
    }
  },
  mounted() {
    // 首次测量
    this.$nextTick(() => this.emitHeight())
  },
  watch: {
    // 国家列表变化 → 换行行数可能变化 → 重新测量
    'list.length'() {
      this.$nextTick(() => this.emitHeight())
    }
  },
  methods: {
    emitHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#countryBar').boundingClientRect()
      query.exec((res) => {
        if (res && res[0]) {
          this.$emit('height-change', res[0].height)
        }
      })
    },
    selectItem(item) {
      this.$emit('select', item.id)
    }
  }
}
</script>

<style scoped>
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框
   Figma: Country Filter Bar 1511:195, y=6 起始, 行高约 31px(padding 6+6) */
.country-bar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  padding: 12rpx 20rpx;
  box-sizing: border-box;
}
/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
.country-inner {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16rpx;
  column-gap: 20rpx;
}
/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
.country-item {
  display: flex;
  align-items: center;
  gap: 20rpx; /* 10px gap */
  padding: 8rpx 20rpx; /* 4px 10px */
  background: #f7f7f7;
  border-radius: 60rpx;
  line-height: 1.2;
  border: 1rpx solid transparent;
  box-sizing: border-box;
}
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 边框宽度 0.5px Figma */
.country-item.active {
  background: #fff3eb;
  border-color: #ff6800;
}
.country-item.active .country-name {
  color: #ff6800;
}
/* 国家图标 - Figma 18x13 / 18x14 矩形, 圆角 2px,不是圆形 */
.country-icon {
  width: 36rpx;
  height: 26rpx;
  border-radius: 4rpx; /* 2px */
  flex-shrink: 0;
  display: block;
}
/* 文字 12px Medium */
.country-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #000000;
}
</style>
