import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import './index.less';
export default defineComponent({
  setup() {
    const { t } = useI18n();
    const currentBtn = ref('default');
    const btns = computed(() => {
      return [
        {
          label: t('filter.pairs'),
          value: 'default',
        },
        {
          label: t('filter.updated'),
          value: 'new',
        },
        {
          label: t('filter.gainers'),
          value: 'max-up',
        },
        {
          label: t('filter.losers'),
          value: 'max-down',
        },
        {
          label: t('filter.r24hVolume'),
          value: 'max-tx',
        },
      ];
    });
    const btnChange = (value: string) => {
      currentBtn.value = value;
      //   更新筛选条件
    };
    return () => (
      <div class="custom-table-filter-btns">
        {btns.value.map((item: any) => (
          <t-button
            class={[
              'table-filter-btn',
              currentBtn.value == item.value ? 'active' : '',
            ]}
            onClick={btnChange.bind(this, item.value)}
          >
            {item.label}
          </t-button>
        ))}
      </div>
    );
  },
});
