<template>
  <el-row :gutter="20" class="panel-group">

    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4" class="card-panel-col">
      <div class="card-panel card-background-2">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="xinzenguser" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-num">
            <span class="card-panel-num-sz">{{panelData.todayAddMember}}</span> <span>个</span>
          </div>
          <div class="card-panel-text">
            今日新增会话
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4" class="card-panel-col">
      <div class="card-panel card-background-5">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="sumuser" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-num">
            <span class="card-panel-num-sz">{{panelData.totalMember}}</span> <span>个</span>
          </div>
          <div class="card-panel-text">
            累计总会话
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4" class="card-panel-col">
      <div class="card-panel card-background-1">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="jinriruzhang" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-num">
            <span class="card-panel-num-sz">{{panelData.todayIncome}}</span> <span>个</span>
          </div>
          <div class="card-panel-text">
            知识库数量
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="4" class="card-panel-col">
      <div class="card-panel card-background-4">
        <div class="card-panel-icon-wrapper">
          <svg-icon icon-class="admin_menu07" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-num">
            <span class="card-panel-num-sz">{{panelData.totalIncome}}</span> <span>USDT</span>
          </div>
          <div class="card-panel-text">
            知识库文件数量
          </div>
        </div>
      </div>
    </el-col>


  </el-row>
</template>

<script>
import {getTotalInfo} from "@/api/index";

export default {
  data() {
    return {
      panelData: {
        todayAddMember: 0,
        totalMember: 0,
        todayIncome: 0,
        totalIncome: 0,
        todayAddPower: 0,
        totalPower: 0,
        todayAddPowerMember: 0,
        totalPowerMember: 0,
        todayExchangeSol: 0,
        totalExchangeSol: 0,
        totalWithdrawSol: 0,
        totalWithdrawDisn: 0
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      //this.totalInfo()
    })
  },
  methods: {
    //顶部数据统计
    totalInfo() {
      getTotalInfo().then(response => {
        if (response.data != null) {
          this.panelData = response.data;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 0px;
  background-color: #FFFFFF;
  padding: 10px 0px 0px 0px !important;
  margin: 0px 20px 10px 10px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-background-1 {
    background: linear-gradient(to right, #0072d6 0%, #3d91da 100%);
  }
  .card-background-2 {
    background: linear-gradient(to right, #e05958 0%, #e47e7d 100%);
  }
  .card-background-3 {
    background: linear-gradient(to right, #409540 0%, #668f66 100%);
  }
  .card-background-4 {
    background: linear-gradient(to right, #8573a5 0%, #958ca4 100%);
  }
  .card-background-5 {
    background: linear-gradient(to right, #f0791c 0%, #f3995f 100%);
  }
  .card-background-6 {
    background: linear-gradient(to right, #13a8e1 0%, #5ab8db 100%);
  }

  .card-panel {
    height: 108px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 5px;

    .card-panel-icon-wrapper {
      float: left;
      margin: 23px 0px 0px 8px;
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      color: rgba(196, 204, 209, 0.8);

      .card-panel-icon {
        float: left;
        font-size: 40px;
      }
    }

    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 24px 0px;
      margin-left: 10px;

      .card-panel-num {
        font-size: 14px;
        margin-bottom: 10px;
        .card-panel-num-sz{
          font-size: 14px;
        }
      }
      .card-panel-text {
        line-height: 18px;
        color: #ffffff;
        font-size: 14px;
        margin-bottom: 12px;
      }
    }

  }
}

</style>
