<template>
  <div
    class="content-box full-width flex flex-child-average"
    :style="type === 'primary' ? 'width:188px' : 'width:188px'"
  >
    <div :class="type === 'primary' ? 'dot' : 'dot-blue'"></div>
    <div
      class="sub bold white flex flex-center flex flex-justify-between full-width"
    >
      <img :src="info.img" alt="" />
      <div class="info" />
      <div class="flex flex-col full-width ml-5">
        <span class="full-width">{{ info.name }}</span>
        <div>
          <span style="color: #aef9fd; font-size: 14px">{{
            info.unit.indexOf('元') > -1
              ? Number.parseFloat(info.value).toLocaleString()
              : info.value.toLocaleString()
          }}</span>
          <span class="ml-5">{{ info.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    info: {
      type: Object,
      default: null
    },
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  border: #89634d solid 1px;
  width: 188px;
  background-color: rgba(238, 238, 238, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);
  height: 64px;
  margin: 0 8px;

  img {
    width: 39px;
    height: 39px;
  }
  .dot {
    position: absolute;
    width: 188px;
    height: 64px;
    background: radial-gradient(circle at 50% -80px, #8c5057, rgba(0, 0, 0, 0));
  }

  .dot-blue {
    position: absolute;
    width: 188px;
    height: 64px;
    background: radial-gradient(circle at 50% -80px, #508aa9, rgba(0, 0, 0, 0));
  }

  .info {
    width: 2px;
    height: 40px;
  }

  .sub {
    z-index: 3;
    border-image-source: radial-gradient(
      55% 80%,
      transparent 0px,
      transparent 100%,
      #dc9245 100%
    );
    height: 62px;
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    padding: 0 10px;
  }
}
</style>
