import React, { useState, useEffect } from 'react';
import { Grid, Row, Col, Typography } from '@tencent/tea-component-mobile';
import '@tencent/tea-component-mobile/dist/tea.css';
// import ReactEcharts from 'echarts-for-react';
import GaugeChart from './gauge-chart';
import BarChart from './bar-chart';
export default function DashBoard({}) {
  const time = [
    {
      title: '最近关机',
      description: '2021-11-21 11:11:11',
    },
    {
      title: '设备开机',
      description: '2021-11-22 22:22:22',
    },
  ];

  const deviceCount = [
    {
      title: '累计工作时间',
      description: '5665.22小时',
    },
    {
      title: '累计燃油消耗',
      description: '166L',
    },
    {
      title: '开工天数',
      description: '12天',
    },
    {
      title: '历史时间统计',
      description: '1条',
    },
    {
      title: '历史报警统计',
      description: '16条',
    },
  ];

  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };

  return (
    <>
      <Grid data={time} columnNum={2}></Grid>

      <Row>
        <Col span={4}>
          <Typography.Text className="small-font-size">
            xx省xx市xx区xx街
          </Typography.Text>
        </Col>
        <Col span={8}>
          <div>
            <Typography.Text theme="light" className="small-font-size">
              最后上报时间 2021-11-10 00:00
            </Typography.Text>
            <br />
            <Typography.Text theme="light" className="small-font-size">
              数据来源 CAT Daily
            </Typography.Text>
          </div>
        </Col>
      </Row>
      <Row>
        <Col span={4}>
          <GaugeChart></GaugeChart>
        </Col>
        <Col span={4}>
          <GaugeChart></GaugeChart>
        </Col>
        <Col span={4}>
          <GaugeChart></GaugeChart>
        </Col>
      </Row>
      <Row>
        <Col span={6}>发动机编号</Col>
        <Col span={6}>
          <Typography.Text theme="success">正常</Typography.Text>
          <span>GBA01858</span>
        </Col>
      </Row>
      <p className="title">设备信息统计</p>
      <Row>
        <Col span={12}>
          <BarChart></BarChart>
        </Col>
        <Col span={12}>
          <BarChart></BarChart>
        </Col>
      </Row>
      <p className="title">设备累计信息</p>
      <Grid data={deviceCount}></Grid>
    </>
  );
}
