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

import type { RegionNameList } from '@/types';

interface Props {
  data: RegionNameList[];
  selectId: number;
  width: string;
  radius: string;
  tooltip: boolean;
}

interface ButtonStyle {
  height: string;
  width: string;
  borderRadius: string;
}
const emit = defineEmits(['selectClick']);
const props = defineProps<Props>();

const buttonStyle = ref<ButtonStyle>({
  height: '32px',
  width: props.width,
  borderRadius: props.radius,
});

const buttonClick = (id: number) => {
  emit('selectClick', id);
};
</script>

<template>
  <div>
    <div v-for="item in data" :key="item.id">
      <div @click="buttonClick(item.id)">
        <AFlex
          :class="item.id === selectId ? 'button-tabs-select button-tabs' : 'button-tabs-default button-tabs'"
          justify="center"
          align="center"
          :style="buttonStyle"
        >
          <ATooltip v-if="tooltip" :title="item.name">
            <div class="button-tabs-text">
              {{ item.name }}
            </div>
          </ATooltip>
          <div v-else class="button-tabs-text">
            {{ item.name }}
          </div>
        </AFlex>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.button-tabs {
  padding: 0 6px;
  margin-bottom: 16px;
  cursor: pointer;
}

.button-tabs-text {
  overflow: hidden; /* 隐藏超出容器的内容 */
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
  white-space: nowrap; /* 禁止文本换行 */
}

.button-tabs-default {
  color: var(--antd-color-primary);
  background: rgb(50 186 192 / 15%);
}

.button-tabs-select {
  color: #fff;
  background: var(--antd-color-primary);
}
</style>
