<template>
  <div class="c-chain-price flex flex-col">
    <div
      class="top w-full"
      :style="{
        backgroundImage: `url(${bg})`,
      }"
    >
      <img :src="yccIcon" alt="" class="yccIcon" />
      <div class="text-white font-bold text-xl mt-1">
        {{ price }}{{ $t('lang.price.dollar') }}
      </div>
      <div
        class="updown text-my-red font-bold text-xs flex items-center justify-center"
      >
        {{ quoteChange }}
      </div>
      <div class="text-xs text-white mt-6">
        {{ $t('lang.price.realTimeQuotes') }}
      </div>
      <div class="text-xs text-white mt-1">
        {{ $t('lang.price._24hourVolatility') }}
      </div>
    </div>
    <div class="bottom text-center flex items-center w-full justify-center flex-grow">
      <div>
        <div class="text-text-color text-xs">
          {{ $t('lang.price.marketValueInDollars') }}
        </div>
        <div class="text-footer-color font-bold">
          {{ marketValue | filterNum }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import bg from '@/assets/images/blockChainBrowser/home/beautiful-rect.png'
import yccIcon from '@/assets/images/blockChainBrowser/home/ycc-icon.png'
export default Vue.extend({
  props: {
    price: String,
    quoteChange: String,
    marketValue: Number,
  },
  data() {
    return {
      bg,
      yccIcon,
    }
  },
})
</script>
<style lang="scss" scoped>
.c-chain-price {
  width: 175px;
  height: 240px;
  background: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
  border-radius: 2px;

  .top {
    width: 175px;
    height: 175px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 17px;
    padding-left: 15px;
    .yccIcon {
      width: 26px;
      height: 26px;
    }
    .updown {
      width: 50px;
      height: 20px;
      background: #ffffff;
      border-radius: 2px;
    }
  }
}
</style>
