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

    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-panel-col">
      <div class="card-panel card-background-1">
        <div class="card_header">
          <div class="card_header_wrapper">
            <div>
              <div class="card_header_title">会话统计</div>
            </div>
          </div>
        </div>
        <div class="card_body">
          <div class="card_body_item">
            <span>{{panelData.sessionTotalNum}}</span>
          </div>
          <div class="card_body_right">
            <span>
              <svg-icon icon-class="huihua" class-name="card-panel-icon" />
            </span>
          </div>
        </div>
        <div class="card_footer">
          <div>
            <span>今日新增</span>
            <span class="add_num">+{{panelData.sessionTodayNum}}</span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-panel-col">
      <div class="card-panel card-background-1" >
        <div class="card_header">
          <div class="card_header_wrapper">
            <div>
              <div class="card_header_title">对话统计</div>
            </div>
          </div>
        </div>
        <div class="card_body">
          <div class="card_body_item">
            <span>{{panelData.chatTotalNum}}</span>
          </div>
          <div class="card_body_right">
            <span>
              <svg-icon icon-class="duihua" class-name="card-panel-icon" />
            </span>
          </div>
        </div>
        <div class="card_footer">
          <div>
            <span>今日新增</span>
            <span class="add_num">+{{panelData.chatTodayNum}}</span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-panel-col">
      <div class="card-panel card-background-1">
        <div class="card_header">
          <div class="card_header_wrapper">
            <div>
              <div class="card_header_title">知识库</div>
            </div>
          </div>
        </div>
        <div class="card_body">
          <div class="card_body_item">
            <span>{{panelData.knowledgeTotalNum}}</span>
          </div>
          <div class="card_body_right">
            <span>
              <svg-icon icon-class="zhishiku" class-name="card-panel-icon" />
            </span>
          </div>
        </div>
        <div class="card_footer">
          <div>
            <span>今日新增</span>
            <span class="add_num">+{{panelData.knowledgeTodayNum}}</span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-panel-col">
      <div class="card-panel card-background-1">
        <div class="card_header">
          <div class="card_header_wrapper">
            <div>
              <div class="card_header_title">知识库文件数</div>
            </div>
          </div>
        </div>
        <div class="card_body">
          <div class="card_body_item">
            <span>{{panelData.knowledgeFileTotalNum}}</span>
          </div>
          <div class="card_body_right">
            <span>
              <svg-icon icon-class="zhishikuwenjian" class-name="card-panel-icon" />
            </span>
          </div>
        </div>
        <div class="card_footer">
<!--          <div>
            <span>今日新增</span>
            <span class="add_num">+{{panelData.knowledgeFileTodayNum}}</span>
          </div>-->
        </div>
      </div>
    </el-col>

  </el-row>
</template>

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

export default {
  data() {
    return {
      panelData: {
        sessionTotalNum : 0, // 会话统计-累计会话数
        sessionTodayNum : 0, // 会话统计-今日新增
        chatTotalNum : 0, // 对话统计-累计对话数
        chatTodayNum : 0, // 对话统计-今日新增
        knowledgeTotalNum : 0, // 知识库-累计数量
        knowledgeTodayNum : 0, // 知识库-今日新增
        knowledgeFileTotalNum : 0, // 知识库文件-累计数量
        knowledgeFileTodayNum : 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;
  padding: 10px 0px 0px 0px !important;
  margin: 0px 20px 0px 10px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-background-1 {
    background: linear-gradient(to right, #ffffff 0%, #fdfdfd 100%);
  }

  .card-panel {
    height: 168px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #000000e6;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 5px;
    padding: 20px 25px;

    .card_header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .card_header_wrapper{
        flex: 1;
        display: flex;
        align-items: center;
        padding-bottom: 24px;
        .card_header_title{
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
    .card_body{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      position: relative;
      padding-bottom: 16px;
      .card_body_item{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        span{
          display: inline-block;
          color: #000000e6;
          font-size: 36px;
          line-height: 44px;
        }
      }
      .card_body_right{
        position: absolute;
        top: -16px;
        right: 32px;
        span{
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 56px;
          height: 56px;
          background: #f2f3ff;
          border-radius: 50%;
          color: #0051d7;
          font-size: 24px;
        }
      }
    }
    .card_footer{
      color: #0006;
      line-height: 24px;
      font-size: 14px;
      .add_num{
        color: #2ba471;
        margin-left: 8px;
      }
    }
  }
}

</style>
