<template>
  <div class="num flow-root">
    <div class="mt-2.5 flex items-center justify-between">
      <div class="text-darkBlue font-bold">
        {{ $t('lang.chainPerf.txNumberOnTheChain') }}
      </div>
      <div>
        <span
          v-for="(filter, i) in filters"
          :key="i"
          @click="currentFilter = filter"
          :style="{
            'margin-left': i !== 0 && '15px',
          }"
          class="text-text-color"
          :class="{
            'text-darkBlue': currentFilter === filter,
            'font-bold': currentFilter === filter,
          }"
        >
          {{ filter }}
        </span>
      </div>
    </div>
    <charts
      :scale="currentFilter"
      style="height: 100px;"
      :grid="{
        top: '12px',
        bottom: '25px',
        left: '50px',
        right: '20px',
      }"
    ></charts>
  </div>
</template>

<script lang="ts">
import charts from '@/components/charts.vue'
import Vue from 'vue'
export default Vue.extend({
  components: { charts },
  data() {
    return {
      filters: ['D1', 'W1', 'M1', 'Y1'],
      currentFilter: 'D1',
    }
  },
})
</script>

<style lang="scss" scoped>
.num {
  padding: 0 15px;
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
  border-radius: 2px;
}
</style>
