<template>
  <view class="tabs">
    <view
      v-for="it in items"
      :key="it.value"
      class="tab"
      :class="value === it.value ? 'on' : ''"
      @click="pick(it.value)"
    >
      <text>{{ it.label }}</text>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  props: {
    value: { type: String, default: '30d' },
    items: { type: Array, default: () => [] }
  },
  methods: {
    pick(v: string) {
      this.$emit('change', v)
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
  background: rgba(17, 17, 17, 0.04);
  border-radius: 999rpx;
  padding: 6rpx;
}

.tab {
  padding: 10rpx 16rpx;
  border-radius: 999rpx;
  color: rgba(17, 17, 17, 0.65);
  font-size: 22rpx;
}

.tab.on {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
}
</style>
