<template>
  <div class="_container">
    <div class="top flex items-center">
      <div class="address_label mr-2.5 my-title">
        {{ $t('lang.address.address') }}
      </div>
      <div class="address_value mr-2.5">
        {{ $route.query.address }}
      </div>
      <copy-btn :copyTxt="$route.query.address" class="mr-2.5">
        {{ $t('lang.components.copy') }}
      </copy-btn>
      <div class="little-qrcode flex items-center justify-center">
        <Popover placement="right" trigger="hover">
          <canvas id="qrcode" style="margin: 13px;"></canvas>
          <img
            slot="reference"
            src="@/assets/images/blockChainBrowser/address/qrcodeIcon.png"
            alt=""
            class="w-5 h-5 cursor-pointer"
          />
        </Popover>
      </div>
    </div>
    <div class="flex">
      <Balance
        class="flex-shrink-0"
        :balance="balance"
        :frozen="frozen"
        :selectedValue="selectedValue"
        :optionsList="optionsList"
        :handleSelectChange="handleSelectChange"
      ></Balance>
      <div class="w-full flex flex-col overflow-hidden">
        <div class="flex-grow relative">
          <div class="text-right" style="padding-right: 30px;">
            <span
              class="text-text-color ml-7 cursor-pointer"
              v-for="(s, i) in scaleList"
              :key="i"
              :class="{
                ' text-footer-color': s === selectedScale,
              }"
              @click="selectedScale = s"
            >
              {{ s }}
            </span>
          </div>
          <div
            style="padding-left: 30px; padding-right: 30px; margin-top: 10px;"
          >
            <charts-in-addr
              style="height: 190px;"
              :scale="selectedScale"
              :grid="{
                top: '10px',
                bottom: '25px',
                left: '50px',
                right: '20px',
              }"
            ></charts-in-addr>
          </div>
          <!-- <img :src="chartNoDataImg" alt="" />
          <div class="absolute text-text-color text-sm text-center w-full">
            暂无数据
          </div> -->
        </div>
        <card-show-trade-in-total
          class="flex-shrink-0"
          :list="tradeInTotalList"
        ></card-show-trade-in-total>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import CopyBtn from '../../CopyBtn.vue'
import { Popover } from 'element-ui'
import AddressOverview from '@/mixin/componentsMixin/AddressOverview'
import chartNoDataImg from '@/assets/images/blockChainBrowser/address/chart-no-data.png'
import Balance from './Balance.vue'
import CardShowTradeInTotal from './CardShowTradeInTotal.vue'
import ChartsInAddr from '@/components/chartsInAddr.vue'
export default VueTypedMixins(AddressOverview).extend({
  components: { CopyBtn, Popover, Balance, CardShowTradeInTotal, ChartsInAddr },
  props: {
    balance: [Number, Object],
    selectedValue: String,
    frozen: [Number, Object],
    optionsList: Array,
    handleSelectChange: Function,
  },
  data() {
    return {
      chartNoDataImg,
      scaleList: ['W1', 'M1', 'M6', 'Y1'],
      selectedScale: 'W1',
    }
  },
})
</script>

<style lang="scss" scoped>
._container {
  width: 1200px;
  height: 440px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
  border-radius: 4px;
  .top {
    height: 80px;
    padding-left: 30px;
  }
  .address_value {
    font-size: 18px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2545cb;
  }
  .little-qrcode {
    width: 30px;
    height: 30px;
    background-color: rgba(37, 69, 203, 0.1);
    border-radius: 4px;
  }
}
</style>
<style>
.el-popover,
.el-popper {
  z-index: 3001 !important;
}
</style>
