<template>
  <!-- 国家选择条 - 横向滚动 -->
  <scroll-view scroll-x class="country-bar" show-scrollbar="false">
    <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>
  </scroll-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>
.country-bar {
  width: 100%;
  white-space: nowrap;
  background: #ffffff;
  padding: 16rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}
.country-inner {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 32rpx;
}
.country-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 12rpx 24rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666666;
}
.country-item.active {
  background: #ff6800;
  color: #ffffff;
}
.country-flag {
  font-size: 28rpx;
}
.country-name {
  font-size: 24rpx;
}
</style>
