<template>
  <ms-card
    class="top-card"
    :class="'top-card top-card-' + background"
    shadow="hover"
  >
    <span style="color: #181818">{{ title }}</span>
    <span style="float: right; margin-right: 4px">
      <el-tag size="small" type="success">{{ t('今日') }}</el-tag>
    </span>
    <p>
      <ms-count
        :decimals="countConfig.decimals"
        :duration="countConfig.duration"
        :end-val="countConfig.today"
        :prefix="countConfig.prefix"
        :separator="countConfig.separator"
        :start-val="countConfig.startVal"
        :suffix="countConfig.suffix"
      />
    </p>
    <div class="right-icon">
      <vab-icon :icon="icon" />
    </div>
    <div class="bottom">
      {{ t('昨日') }}{{ countConfig.prefix
      }}{{ countConfig.yestoday ? countConfig.yestoday : '—' }}
      <span style="margin-left: 5px">
        {{
          countConfig.daym2m == null
            ? '—'
            : Number(countConfig.daym2m * 100).toFixed(0) + '%'
        }}
      </span>
      <span v-if="countConfig.daym2m != null">
        <vab-icon
          v-if="countConfig.daym2m && countConfig.daym2m > 0"
          icon="arrow-up-line"
        />
        <vab-icon v-else icon="arrow-down-line" />
      </span>
      <span v-if="countConfig.month" style="float: right; line-height: 18px">
        {{ t('本月') }}{{ countConfig.prefix }}{{ countConfig.month }}
      </span>
    </div>
    <div v-if="false" class="bottom">
      {{ bottomText }}
      <div style="float: right">{{ countConfig.month }}{{ unitText }}</div>
    </div>
  </ms-card>
</template>

<script>
import { translateTitle as t } from '@/utils/i18n'
import _ from 'lodash'

import MsCount from '@/components/MsCount'
import MsCard from '@/components/MsCard'

export default {
  name: 'TopCard',
  components: {
    MsCount,
    MsCard,
  },
  props: {
    background: {
      type: String,
      default: 'white',
    },
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: 'album-line',
    },
    bottomText: {
      type: String,
      default: '',
    },
    unitText: {
      type: String,
      default: '',
    },
    countConfig: {
      type: Object,
      default: () => {
        return {
          startVal: 0,
          endVal: _.random(1000, 20000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        }
      },
    },
  },
  methods: {
    t,
  },
}
</script>

<style scoped>
.top-card {
  position: relative;
  height: 158px !important;
}

.top-card p {
  font-size: 28px;

  display: block;
  margin-block-start: 20px;
  margin-block-end: 20px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.top-card .right-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: var(--el-color-primary);
  text-align: center;
  background: var(--el-color-primary-light-9);
  border-radius: 50%;
  transform: translateY(-50%);
}

.top-card .right-icon i {
  font-size: 30px;
}

.top-card .bottom {
  font-size: 12px;
  margin-top: 10px;
}

.top-card .bottom .ri-arrow-up-line,
.top-card .bottom .ri-arrow-down-line {
  width: 18px;
  height: 18px;
  margin: 0 3px 0 2px;
  vertical-align: -3px !important;
  border-radius: 50%;
  transform: scale(0.8);
}

.top-card .bottom .ri-arrow-up-line {
  color: var(--el-color-error);
  background: var(--el-color-error-light);
}

.top-card .bottom .ri-arrow-down-line {
  color: var(--el-color-success);
  background: var(--el-color-success-light);
}

.top-card .bottom span {
  color: var(--el-color-success);
}

.top-card.blue {
  color: #fff;
  background: var(--el-color-primary);
  background: linear-gradient(
    90deg,
    var(--el-color-primary-light-4),
    var(--el-color-primary)
  );
}

.top-card.blue .bottom {
  font-size: 12px;
}

.top-card.blue .bottom .ri-arrow-up-line {
  color: #fff;
  background: transparent;
}

.top-card.blue .bottom .ri-arrow-up-line {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  transform: scale(0.8);
}

.top-card.blue .bottom span {
  color: #fff;
}
</style>
