<template>
  <div v-loading="loading">
    <h1>欢迎您，{{adminName}}</h1>
    <div class="white-box" style="margin-bottom: 15px;" v-show="false">
      <h1>欢迎您，{{adminName}}</h1>
      <el-button type="primary" @click="tool.go('/user/index')" v-show="permission.hasPermission(`user/index`)">会员管理
      </el-button>
      <el-button type="success" @click="tool.go('/bonus/period')" v-show="permission.hasPermission(`bonus/period`)">
        封期管理
      </el-button>
      <el-button type="danger" @click="tool.go('/finance/withdraw')" v-show="permission.hasPermission(`finance/withdraw`)">
        提现管理
      </el-button>
      <el-button type="primary" @click="tool.go('/finance/balance-audit-list')"
                 v-show="permission.hasPermission(`finance/balance-audit-list`)">余额管理
      </el-button>
      <el-button type="warning" @click="tool.go('/atlas/relation-opt')" v-show="permission.hasPermission(`atlas/relation`)||permission.hasPermission(`atlas/relation-list`)">
        开拓网络
      </el-button>
      <el-button type="success" @click="tool.go('/atlas/network-opt')" v-show="permission.hasPermission(`atlas/network`)||permission.hasPermission(`atlas/network-list`)">
        安置网络
      </el-button>
      <el-button type="danger" @click="tool.go('/admin/change-password')"
                 v-show="permission.hasPermission(`admin/change-password`)">重置密码
      </el-button>
    </div>
    <el-row :gutter="20" v-if="permission.hasPermission(`dashboard/total-item`)" v-show="false" style="margin-bottom: 15px;">
      <el-col :span="6">
        <div class="white-box text-center box-bg-primary">
          <h3 class="text-white number-font">
            <countUp
                :startVal="Number.parseFloat(infoData.totalBonus * (1 - 0.5))"
                :endVal="Number.parseFloat(infoData.totalBonus)"
            />
          </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.totalPerf * (1 - 0.5))"
                :endVal="Number.parseFloat(infoData.totalPerf)"
            />
          </h3>
          <p class="text-white">本年度累计报单业绩</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-warning">
          <h3 class="text-white number-font">
            <countUp
                :startVal="Number.parseFloat(infoData.totalWithdraw * (1 - 0.5))"
                :endVal="Number.parseFloat(infoData.totalWithdraw)"
            />
          </h3>
          <p class="text-white">本年度累计提现</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="white-box text-center box-bg-megna">
          <h3 class="text-white number-font">
            <countUp
                :startVal="Number.parseFloat(infoData.totalUser * (1 - 0.5))"
                :endVal="Number.parseFloat(infoData.totalUser)"
            />
          </h3>
          <p class="text-white">累计会员数量</p>
        </div>
      </el-col>
    </el-row>


    <el-row :gutter="20" v-show="false">
      <el-col :span="8" v-if="permission.hasPermission(`dashboard/reg-num`)">
        <div class="white-box">
          <h2>会员注册</h2>
          <ve-line :data="memberData" :settings="memberChartSettings" :colors="memberColors"></ve-line>
        </div>
      </el-col>
      <el-col :span="8" v-if="permission.hasPermission(`dashboard/bonus-num`)">
        <div class="white-box">
          <h2>奖金</h2>
          <ve-line :data="bonusData" :settings="bonusChartSettings" :colors="bonusColors"></ve-line>
        </div>
      </el-col>
      <el-col :span="8" v-if="permission.hasPermission(`dashboard/withdraw-num`)">
        <div class="white-box">
          <h2>财务</h2>
          <ve-line :data="balanceData" :settings="balanceChartSettings" :colors="balanceColors"></ve-line>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import baseInfo from '@/utils/baseInfo'
  import userInfo from '@/utils/userInfo'
  import VeLine from 'v-charts/lib/line'
  import countUp from 'vue-countup-v2'
  import permission from '@/utils/permission'

  export default {
    name: 'dashboard_index',
    components: {
      countUp, VeLine
    },
    mounted() {
      network.getData(`dashboard/index`).then(response => {
        this.periodNum = response.periodNum
        return permission.hasPermission(`dashboard/reg-num`) ? network.getData(`dashboard/reg-num`) : false
      }).then(response => {
        this.memberData.rows = response
        return permission.hasPermission(`dashboard/bonus-num`) ? network.getData(`dashboard/bonus-num`) : false
      }).then(response => {
        this.bonusData.rows = response
        return permission.hasPermission(`dashboard/withdraw-num`) ? network.getData(`dashboard/withdraw-num`) : false
      }).then(response => {
        this.balanceData.rows = response
        return permission.hasPermission(`dashboard/total-item`) ? network.getData(`dashboard/total-item`) : false
      }).then(response => {
        if (response) {
          this.infoData.totalBonus = response.totalBonus
          this.infoData.totalPerf = response.totalPerf
          this.infoData.totalWithdraw = response.totalWithdraw
          this.infoData.totalUser = response.totalUser
        }
      }).catch(response => {
      })
      this.loading = false
      this.calcTime()
    },
    data() {
      return {
        loading: true,
        nowTime: tool.getTimestamp(),
        tool: tool,
        permission: permission,
        periodNum: 0,
        infoData: {
          totalBonus: '0.00',
          totalPerf: '0.00',
          totalWithdraw: '0.00',
          totalUser: '0.00',
        },
        memberData: {
          columns: ['month', 'num'],
          rows: [
            {'month': '201801', 'num': 0},
            {'month': '201802', 'num': 0},
            {'month': '201803', 'num': 0},
            {'month': '201804', 'num': 0},
            {'month': '201805', 'num': 0},
          ]
        },
        memberChartSettings: {
          labelMap: {
            num: '注册数量',
          },
          area: true
        },
        memberColors: ['#3794ff'],
        bonusData: {
          columns: ['month', 'num'],
          rows: [
            {'month': '201801', 'num': 0},
            {'month': '201802', 'num': 0},
            {'month': '201803', 'num': 0},
            {'month': '201804', 'num': 0},
            {'month': '201805', 'num': 0},
          ]
        },
        bonusChartSettings: {
          labelMap: {
            num: '奖金金额',
          },
          area: true
        },
        bonusColors: ['#f46061'],
        balanceData: {
          columns: ['month', 'num'],
          rows: [
            {'month': '201801', 'num': 0},
            {'month': '201802', 'num': 0},
            {'month': '201803', 'num': 0},
            {'month': '201804', 'num': 0},
            {'month': '201805', 'num': 0},
          ]
        },
        balanceChartSettings: {
          labelMap: {
            num: '提现金额',
          },
          area: true
        },
        balanceColors: ['#f8c255'],
        adminName: userInfo.adminName(),
      }
    },
    computed: {
      nowDateTime: function () {
        return tool.formatDate(this.nowTime)
      }
    },
    methods: {
      calcTime() {
        let obj = this
        setInterval(function () {
          obj.nowTime += 1
        }, 1000)
      },
    }
  }
</script>

<style scoped>
  h1, h2 {
    margin-top: 0
  }

  h2 {
    font-size: 1em
  }
</style>