import { Progress, TinyArea, TinyColumn } from '@ant-design/charts';
import { InfoCircleOutlined } from '@ant-design/icons';
import { ProCard, StatisticCard } from '@ant-design/pro-components';
import { Divider, Space, Tooltip } from 'antd';

import React from 'react';

// 测试数据
import testData from '../testData';
// const { useState } = React;

/**data 数据源 */
const { equipData } = testData;
console.log(equipData, 'equipData');
/**comp 组件分解 */
const { Statistic } = StatisticCard;

/**styles 组件样式配置 */
const topColSpanProps = { sm: 24, md: 12, lg: 6 }; // 每个卡片项栅格配置
const topItemStyle = { marginBottom: 24, height: 160, backgroundColor: '#FFFAF5', border: '1px solid #FFE9D6', borderRadius: 4 }; // 每个卡片独立样式
const topItemStyle1 = { marginBottom: 24, height: 160, backgroundColor: '#F5F8FF', border: '1px solid #D6E1FF', borderRadius: 4 }; // 每个卡片独立样式
const topItemStyle2 = { marginBottom: 24, height: 160, backgroundColor: '#F5F3FD', border: '1px solid #DDD5FD', borderRadius: 4 }; // 每个卡片独立样式
const topItemStyle3 = { marginBottom: 24, height: 160, backgroundColor: '#F5FBFF', border: '1px solid #D6EFFF', borderRadius: 4 }; // 每个卡片独立样式
const topItemHeadStyle = { padding: 15 };
const chartsStyle = {
  height: 84
}
/**
 * @顶部展示信息
 * @returns HTML components
 */
const NavInfoCardList: React.FC = () => {
  return (
    <div className="NavInfoCardList_wrap">
      <ProCard key="resize-observer" wrap gutter={24}>
        {/* 异常总量 */}
        <ProCard
          gutter={24}
          wrap
          ghost
          title="风险人员总量"
          headStyle={topItemHeadStyle}
          extra={
            <>
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            </>
          }
          colSpan={topColSpanProps}
          style={topItemStyle}
          
        >
          <StatisticCard
            bodyStyle={{ padding: 0, backgroundColor: '#FFFAF5' }}
            statistic={{
              value: 1102893,
              style: chartsStyle,
              description: (
                <Space style={{ marginTop: 10 }}>
                  <Statistic title="周同比" value="12%" trend="up" />
                  <Statistic title="日同比" value="11%" trend="down" />
                </Space>
              ),
            }}
            // chart={
            //   <>
            //     <Divider style={{ margin: 5 }} />
            //     <Space>
            //       <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#FFFAF5' }}>
            //         <Statistic title="日异常量" value="0.00%" />
            //       </StatisticCard>
            //     </Space>
            //   </>
            // }
          />
        </ProCard>
        {/* 设备总量 */}
        <ProCard
          gutter={24}
          wrap
          ghost
          title="总识别人员"
          headStyle={topItemHeadStyle}
          extra={
            <>
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            </>
          }
          colSpan={topColSpanProps}
          style={topItemStyle1}
          
        >
          <StatisticCard
            bodyStyle={{ padding: 0, backgroundColor: '#F5F8FF' }}
            statistic={{
              value: 467,
              style: chartsStyle,
              description: (
                <>
                  {/* TODO1025 需要替换成reactEcharts */}
                  <TinyArea
                    color="#975FE4"
                    xField="x"
                    height={46}
                    forceFit
                    yField="y"
                    smooth
                    data={[8,5,9,1, 3, 2, 6, 7, 4, 6]}
                  />
                </>
              ),
            }}
            // chart={
            //   <>
            //     <Divider style={{ margin: 5 }} />
            //     <Space>
            //       <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#F5F8FF' }}>
            //         <Statistic title="设备量" value="0.00%" />
            //       </StatisticCard>
            //     </Space>
            //   </>
            // }
          />
        </ProCard>
        {/* 覆盖网点 */}
        <ProCard
          gutter={24}
          wrap
          ghost
          title="总告警量"
          headStyle={topItemHeadStyle}
          extra={
            <>
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            </>
          }
          colSpan={topColSpanProps}
          style={topItemStyle2}
          
        >
          <StatisticCard
            bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }}
            statistic={{
              value: 3048,
              style:chartsStyle,
              description: (
                <>
                  {/* TODO1025 需要替换成reactEcharts */}
                  <TinyColumn
                    xField="x"
                    height={46}
                    forceFit
                    yField="y"
                    data={[8,5,2,9,1,3, 4,9,9,3,6, 3,4,6, 7, 4, 6]}
                  />
                </>
              ),
            }}
            // chart={
            //   <>
            //     <Divider style={{ margin: 5 }} />
            //     <Space>
            //       <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }}>
            //         <Statistic title="覆盖网点率" value="0.00%" />
            //       </StatisticCard>
            //     </Space>
            //   </>
            // }
          />
        </ProCard>
        {/* 资源使用 */}
        <ProCard
          gutter={24}
          wrap
          ghost
          title="设备数量"
          headStyle={topItemHeadStyle}
          extra={
            <>
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            </>
          }
          colSpan={topColSpanProps}
          style={topItemStyle3}
          
        >
          <StatisticCard
            bodyStyle={{ padding: 0, backgroundColor: '#F5FBFF' }}
            statistic={{
              value: 893,
              style:chartsStyle,

              description: (
                <>
                  {/* TODO1025 需要替换成reactEcharts */}
                  <Progress
                    height={46}
                    percent={0.78}
                    color="#13C2C2"
                    forceFit
                    size={8}
                    marker={[
                      {
                        value: 0.8,
                        style: {
                          stroke: '#13C2C2',
                        },
                      },
                    ]}
                  />
                </>
              ),
            }}
            // chart={
            //   <>
            //     <Divider style={{ margin: 5 }} />
            //     <Space style={{ marginTop: 0, backgroundColor: '#F5FBFF' }}>
            //       <Statistic title="周同比" value="12%" trend="up" />
            //       <Statistic title="日同比" value="11%" trend="down" />
            //     </Space>
            //   </>
            // }
          />
        </ProCard>
      </ProCard>
    </div>
  );
};

export default NavInfoCardList;
