<template>
  <div v-loading="loading">
    <el-row :gutter="20" style="display: none;">
      <el-col :span="6">
        <div class="white-box text-center box-bg-primary">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.BONUS * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.BONUS)"
            />
          </h3>
          <p class="text-white">总奖金余额</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-success">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.QY_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.QY_TOTAL)"
            />
          </h3>
          <p class="text-white">累计区域津贴</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-info">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.YC_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.YC_TOTAL)"
            />
          </h3>
          <p class="text-white">累计育成津贴</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-theme">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.FX_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.FX_TOTAL)"
            />
          </h3>
          <p class="text-white">累计复销奖</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="display: none;">
      <el-col :span="6">
        <div class="white-box text-center box-bg-warning">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.LS_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.LS_TOTAL)"
            />
          </h3>
          <p class="text-white">累计零售奖</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-primary">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.CF_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.CF_TOTAL)"
            />
          </h3>
          <p class="text-white">累计车房养老奖</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-purple">
          <h3 class="text-white number-font">
            <countUp
              :startVal="Number.parseFloat(infoData.LX_TOTAL * (1 - 0.5))"
              :endVal="Number.parseFloat(infoData.LX_TOTAL)"
            />
          </h3>
          <p class="text-white">累计领袖分红</p>
        </div>
      </el-col>
    </el-row>

    <div class="white-box">
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'
import store from '@/utils/vuexStore'
import countUp from 'vue-countup-v2'
import VeLine from 'v-charts/lib/line'

export default {
  name: 'user_index',
  components: {
    countUp, VeLine
  },
  mounted () {
    this.getData()
  },
  data () {
    return {
      infoData: {
        BONUS: '0.00',
        QY_TOTAL: '0.00',
        YC_TOTAL: '0.00',
        FX_TOTAL: '0.00',
        LS_TOTAL: '0.00',
        CF_TOTAL: '0.00',
        LX_TOTAL: '0.00',
        FL_TOTAL: '0.00',
        FW_TOTAL: '0.00',
      },
      tabActive: 'baseInfo',
      loading: true,
      chartData: {
        columns: ['month', 'BONUS_QY', 'BONUS_YC', 'BONUS_FX', 'BONUS_LS', 'BONUS_CF', 'BONUS_LX'],
        rows: [
          {'month': '1/1', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0},
          {'month': '1/2', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0},
          {'month': '1/3', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0},
          {'month': '1/4', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0},
          {'month': '1/5', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0},
          {'month': '1/6', 'BONUS_QY': 0, 'BONUS_YC': 0, 'BONUS_FX': 0, 'BONUS_LS': 0, 'BONUS_CF': 0, 'BONUS_LX': 0}
        ]
      },
      chartSettings: {
        labelMap: {
          BONUS_QY: '区域津贴',
          BONUS_YC: '育成津贴',
          BONUS_FX: '复销奖',
          BONUS_LS: '零售奖',
          BONUS_CF: '车房养老奖',
          BONUS_LX: '领袖分红',
        },
        area: false
      }
    }
  },
  methods: {
    getData () {
      network.getData('finance/index').then(response => {
        this.infoData = response
        this.loading = false
        return network.getData(`dashboard/bonus-num`)
      }).then(response => {
        this.chartData.rows = response
      })
    }
  }
}

</script>

<style scoped>
  .white-box {
    padding: 25px;
  }

  .white-box h3 {
    font-size: 36px;
    line-height: 48px;
    margin: 10px 0;
  }

  .white-box p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
</style>