<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="6">
        <TopCard :footer="deviceFooter" :value="10"
                 img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="设备数量"></TopCard>
      </el-col>
      <el-col :span="6">
        <TopCard :footer="deviceFooter" :value="10"
                 img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="设备数量"></TopCard>
      </el-col>
      <el-col :span="6">
        <TopCard :footer="deviceFooter" :value="10"
                 img="https://demo.jetlinks.cn/images/DataCollect/dashboard/channel.png" title="设备数量"></TopCard>
      </el-col>
      <el-col :span="6">
        <TopCard :footer="messageFooter" :value="20" title="今日设备消息量">
          <Charts :options="TodayDevOptions"></Charts>
        </TopCard>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import TopCard from '../components/TopCard';
import Charts from '../components/Charts';

export default {
  components: {
    TopCard, Charts
  },
  data() {
    return {
      deviceFooter: [
        {
          title: '在线',
          value: 0,
          status: 'success',
        },
        {
          title: '离线',
          value: 0,
          status: 'error',
        },
        {
          title: '离线',
          value: 0,
          status: 'error',
        },
      ],
      messageFooter: [
        {
          title: '当月设备消息量',
          value: 0,
        },
      ],
    };
  },
  computed: {
    TodayDevOptions() {
      let myTodayDevOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false,
          data: [1, 2, 3],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        grid: {
          top: '2%',
          bottom: 0,
        },
        series: [
          {
            name: '消息量',
            data: [4, 5, 6],
            type: 'line',
            smooth: true, // 是否平滑曲线
            symbolSize: 0, // 拐点大小
            color: '#F29B55',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FBBB87', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF', //   0% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      return myTodayDevOptions;
    }
  }
};
</script>
