<template>
  <div class="c-balance-graph">
    <div class="flex items-center justify-between">
      <dir>
        {{ $t('lang.address.accountBalance') }}
      </dir>
      <div class="">
        <span
          class="text-text-color ml-3"
          v-for="(s, i) in scaleList"
          :key="i"
          :class="{
            ' text-footer-color': s === selectedScale,
          }"
          @click="selectedScale = s"
        >
          {{ s }}
        </span>
      </div>
    </div>
    <div class="relative">
      <!-- <img :src="noData" alt="" />
      <div
        class="absolute text-center left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 text-text-color text-xs"
      >
        暂无数据
      </div> -->
      <charts-in-addr
        :scale="selectedScale"
        :grid="{
          top: '10px',
          bottom: '25px',
          left: '50px',
          right: '20px',
        }"
        style="height: 110px;"
      ></charts-in-addr>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import noData from '@/assets/images/blockChainBrowser/address/mobile-chart-no-data.png'
import chartsInAddr from '@/components/chartsInAddr.vue'
export default Vue.extend({
  components: { chartsInAddr },
  data() {
    return {
      noData,
      scaleList: ['W1', 'M1', 'M6', 'Y1'],
      selectedScale: 'W1',
    }
  },
})
</script>
<style lang="scss" scoped>
.c-balance-graph {
  height: 140px;
  background: #ffffff;
  border-radius: 2px;
}
</style>
