<template>
  <el-row :gutter="10">
    <el-col :span="span">
      <statistics-card
        :value="stat.order.payAmount - stat.orderRefund.amount"
        label="订单实收"
        icon="el-icon-money"
        start-color="#FF4D4F"
        end-color="#FF7A45"
        sub-label="今日订单实收"
        :sub-value="todayStat.order.payAmount - todayStat.orderRefund.amount"
        :precision="2"
      />
    </el-col>
    <el-col :span="span">
      <statistics-card
        :value="stat.device.count"
        label="车辆总数"
        icon="el-icon-bicycle"
        start-color="#52C41A"
        end-color="#73D13D"
        sub-label="车型总数"
        :sub-value="stat.model.count"
        :show-value-change="false"
      />
    </el-col>
    <el-col :span="span">
      <statistics-card
        :value="stat.user.count"
        label="用户总数"
        icon="el-icon-user"
        start-color="#722ED1"
        end-color="#EB2F96"
        sub-label="今日新增"
        :sub-value="todayStat.user.count"
      />
    </el-col>
    <el-col :span="span">
      <statistics-card
        :value="stat.area.count"
        label="运营区数量"
        icon="el-icon-location"
        start-color="#13C2C2"
        end-color="#52C41A"
        sub-label="商户余额"
        :sub-value="stat.user.balance"
        :show-value-change="false"
      />
    </el-col>
  </el-row>
</template>

<script>
import StatisticsCard from '@/components/StatisticsCard'
export default {
  name: 'Stat',
  components: {
    StatisticsCard
  },
  props: {
    stat: {
      type: Object,
      required: true
    },
    todayStat: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      span: 6
    }
  },
}
</script>

<style lang="scss" scoped>

</style>