<template>
  <!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
  <view class="country-bar">
    <view class="country-inner">
      <view
        class="country-item"
        :class="{ active: selectedId === item.id }"
        v-for="(item, index) in list"
        :key="index"
        @tap="selectItem(item)"
      >
        <text class="country-flag">{{ item.flag }}</text>
        <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: ''
    }
  },
  methods: {
    selectItem(item) {
      this.$emit('select', item.id)
    }
  }
}
</script>

<style scoped>
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
.country-bar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  padding: 12rpx 20rpx;
  box-sizing: border-box;
}
/* 换行布局(不用横向滚动) */
.country-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
/* 单个标签 - padding 4px 10px 圆角 60px */
.country-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 20rpx;
  background: #f7f7f7;
  border-radius: 60rpx;
  font-size: 24rpx;
  color: #000000;
  line-height: 1.2;
}
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
.country-item.active {
  background: #fff3eb;
  border: 1rpx solid #ff6800;
  color: #ff6800;
}
.country-flag {
  font-size: 24rpx;
}
/* 文字 12px Medium */
.country-name {
  font-size: 24rpx;
  font-weight: 500;
}
</style>
