<template>
  <div class="dashboard-editor-container">

    <panel-group @handleRoute="handleRoute" :countsData="countsData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/warning">数据统计</router-link>
            <div>
              <el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
                {{item.name}}
              </el-tag>
            </div>
          </div>
          <bar-chart :chartData="stat.warning" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <router-link to="/toolbox/exception">登录统计</router-link>
            <div>
              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                {{item.name}}
              </el-tag>
            </div>
          </div>
          <bar-chart :chartData="stat.exception" />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import BarChart from './components/BarChart'
  import {
    getChartsData,
    getCounts
  } from "../../api/dashboard.js"
  export default {
    name: 'DashboardAdmin',
    components: {
      PanelGroup,
      BarChart
    },
    data() {
      return {
        countsData: {
          client_count: 0,
          tool_count: 0,
          user_count: 0
        },
        stat: {
          warning: {
            xArr: ["一","二","三","四","五"],
            yArr: [200,300,400,500,330],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
          exception: {
            xArr: ["一","二","三","四","五"],
            yArr: [200,300,400,500,330],
            dateRange: [{
              checked: true,
              type: "week",
              name: "本周"
            }, {
              checked: false,
              type: "month",
              name: "本月"
            }]
          },
        }
      }
    },
    created: function() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

      .chart-title {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
