<template>
  <div class="center-top-wrap">
    <div>
      <dv-digital-flop :config="config" style="width:90%;height:50px;" />
      <div>{{ year }}年总销售数量</div>
    </div>
    <div>
      <dv-digital-flop :config="config1" style="width:90%;height:50px;" />
      <div>{{ year }}年总销售金额</div>
    </div>
  </div>
</template>

<script>
import { formatThousands } from '@/utils/util.js'
export default {
  props: {
    totalNums: {
      type: [Number, String],
      default: 0
    },
    totalAmount: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      year: 0,
      config: null,
      config1: null
    }
  },
  mounted () {
    this.year = new Date().getFullYear()
  },
  watch: {
    totalNums (newValue, oldValue) {
      console.log(newValue)
      this.config = {
        number: [newValue],
        content: '{nt}',
        style: {
          fill: '#00aaff',
          fontSize: 40,
          fontWeight: 'bold'
        },
        formatter: formatThousands
      }
    },
    totalAmount (newValue, oldValue) {
      console.log(newValue)
      this.config1 = {
        number: [newValue],
        toFixed: 2,
        content: '{nt}',
        style: {
          fill: '#ffb442',
          fontSize: 40,
          fontWeight: 'bold'
        },
        formatter: formatThousands
      }
    }
  }
}
</script>

<style lang="less" scoped>
	.center-top-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		> div{
			width: 50%;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 110px;
			color: rgba(255, 255, 255, 0.4);
      font-size:16px;
		}
	}
</style>
