<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 用户操作 -->
        <div>
          <el-row :gutter="20">
            <el-col :span="6"><el-card shadow="always">用户数量<span style="margin-left: 12px;color: #606266;">{{ synthesizecount.usercount }}</span>个</el-card></el-col>
            <el-col :span="6"><el-card shadow="always">设备数量<span style="margin-left: 12px;color: #409EFF;">{{ synthesizecount.devicecount }}</span>个</el-card></el-col>
            <el-col :span="6"><el-card shadow="always">报警数量<span style="margin-left: 12px;color: #E6A23C;">{{ synthesizecount.devicepolice }}</span>个</el-card></el-col>
            <el-col :span="6"><el-card shadow="always">今天报警次数<span style="margin-left: 12px;color: #F56C6C;">{{ synthesizecount.timedevicepolice }}</span>个</el-card></el-col>
          </el-row>
        </div>
        <!-- 混合统计 -->
        <div class="chart-container" style="position: relative; top: 20px; height: 500px;">
          <chart height="100%" width="100%" />
        </div>
      </el-col>
      <el-col :span="4">
        <!-- 时间线 -->
        <div>
          <el-timeline :reverse="reverse">
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">{{ activity.content }}</el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Chart from '@/components/Charts/MixChart';
import { homepagecount } from '@/api/homepage';
export default {
  name: 'Dashboard',
  components: { Chart },
  data() {
    return {
      reverse: true,
      synthesizecount: [],
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15',
      }, {
        content: '创建成功',
        timestamp: '2018-04-11',
      }],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      homepagecount()
        .then(response => {
          this.synthesizecount = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  .chart-container{
    position: relative;
    width: 100%;
    top: 40px;
    // height: calc(100vh - 84px);
  }
}
</select>
