import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, DatePicker, Form, Row, Space, Spin } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import styles from './Welcome.less';
import {
  getAppUserData,
  getDailyActiveData,
  getNewUserData,
  getStatisticData,
} from '@/services/statistic';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import moment from 'moment/moment';
import * as echarts from 'echarts';
import userIcon from '../../public/assets/user-icon.png';
import appIcon from '../../public/assets/app-icon.png';
import monthIcon from '../../public/assets/month-icon.png';
import todayIcon from '../../public/assets/today-icon.png';
import LineChart from '@/components/EchartsCommon/lineChart';
import BarChart from '@/components/EchartsCommon/barChart';

const { RangePicker } = DatePicker;

/**
 * 首页
 * @constructor
 */
const Welcome: React.FC = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState<any>(null);
  const [searchData, setSearchData] = useState<object | null>({});
  const [userData, setUserData] = useState<any>(null);
  const [appUserData, setAppUserData] = useState<any>(null);
  const [dailyActiveData, setDailyActiveData] = useState<any>(null);
  const [deviceTypeData, setDeviceType] = useState<any>(null);
  const chartRef: any = useRef();

  // 获取数据
  const getDeviceData = () => {
    const params = {
      ...searchData,
    };
    getStatisticData(params).then((res) => {
      if (res && res.code === 0) {
        setData(res.data);
        // 设备类型统计数据
        if (
          res.data &&
          res.data.ffx &&
          res.data.wuheng &&
          res.data.xfcs &&
          res.data.xfjh &&
          res.data.xfjs
        ) {
          const deviceName = ['分风箱', '五恒一体机', '新风除湿', '新风净化', '新风加湿'];
          const deviceTypeValue = [
            res.data.ffx,
            res.data.wuheng,
            res.data.xfcs,
            res.data.xfjh,
            res.data.xfjs,
          ];
          setDeviceType({ deviceName, deviceTypeValue });
        } else {
          setDeviceType(null);
        }
        // 渲染环形图
        const chart = echarts.init(chartRef.current);
        const region = JSON.parse(res.data.region);
        const newData = Object.entries(region).map(([name, value]) => ({ value, name }));
        const options = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            type: 'plain',
            icon: 'circle',
            orient: 'vertical',
            left: 40,
          },
          series: [
            {
              type: 'pie',
              radius: [175, 200],
              center: ['65%', '50%'],
              data: newData,
              avoidLabelOverlap: false,
              padAngle: 5,
              itemStyle: {
                borderRadius: 10,
              },
              label: {
                normal: {
                  show: false,
                  position: 'center',
                  formatter: '{text|{c}}\n{b}',
                  rich: {
                    text: {
                      align: 'center',
                      verticalAlign: 'middle',
                      padding: 8,
                      fontSize: 50,
                      fontWeight: 'bold',
                      color: '#333',
                    },
                    value: {
                      align: 'center',
                      verticalAlign: 'middle',
                      fontSize: 20,
                      color: '#bfbfbf',
                    },
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '12',
                  },
                },
              },
              labelLine: {
                show: false,
              },
            },
          ],
        };
        // 设置图表实例的配置项和数据
        chart.setOption(options);
      }
    });
  };

  // 新增用户数统计
  const getUserData = () => {
    getNewUserData().then((res) => {
      if (res && res.code === 0) {
        setUserData(res.data);
      }
    });
  };

  // app使用次数统计
  const getAppCount = () => {
    getAppUserData().then((res) => {
      if (res && res.code === 0) {
        setAppUserData(res.data);
      }
    });
  };

  // 获取日活用户统计数据
  const getDailyActiveUser = () => {
    getDailyActiveData().then((res) => {
      if (res && res.code === 0) {
        const list = res.data || [];
        if (list && list.length > 0) {
          // 把x轴的数据和y轴的数据进行匹配
          const xData = list.map(
            (el: { date: string }) => moment(el.date).format('MM-DD') || '暂无',
          );
          const yData = list.map((el: { dau: number }) => el.dau);
          setDailyActiveData({ xData, yData });
        } else {
          setDailyActiveData(null);
        }
      }
    });
  };

  // 初始化
  useEffect(() => {
    getDeviceData();
    // 用户数据
    getUserData();
    // app使用次数统计
    getAppCount();
    // 获取日活用户统计
    getDailyActiveUser();
  }, []);

  useEffect(() => {
    getDeviceData();
  }, [searchData]);

  //  搜索
  const onFinish = () => {
    const params: any = {};
    form.validateFields().then((res) => {
      if (res.time) {
        params.time_start = moment(res.time[0]).format('YYYY-MM-DD');
        params.time_end = moment(res.time[1]).format('YYYY-MM-DD');
      }
      setSearchData(params);
    });
  };
  //  重置
  const onReset = () => {
    form.resetFields();
    setSearchData(null);
  };

  // 千分号格式化
  const formatNumber = (num: any) => {
    if (num === null || num === undefined || isNaN(num)) return '';
    return parseFloat(num).toLocaleString(undefined, {
      maximumFractionDigits: 20,
    });
  };

  return (
    <PageContainer>
      <Card style={{ marginBottom: '20px' }} hoverable>
        <div className={styles.welcomeTitle}>Hi，欢迎使用永续绿建运营管理平台！</div>
        <div className={styles.timeSearch}>
          <div className={styles.dataOverviewTitle}>数据总览</div>
          <Form form={form} layout="inline" onFinish={onFinish}>
            <Form.Item name="time" label="时间">
              <RangePicker />
            </Form.Item>
            <Form.Item style={{ marginBottom: '10px' }}>
              <Space>
                <Button type="primary" htmlType="submit">
                  <SearchOutlined />
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  <ReloadOutlined />
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </div>

        <div className={styles.dataTop}>
          <Row gutter={[20, 20]}>
            <Col flex="1">
              <Card className={styles.dataItem} bordered={false}>
                <div className={styles.dataTitle}>设备总数</div>
                <div className={styles.dataValue}>
                  <span className={styles.dataNum}>{data?.total || 0}</span>
                  <span style={{ color: 'gray' }}>台</span>
                </div>
              </Card>
            </Col>
            <Col flex="1">
              <Card className={styles.dataItem} bordered={false}>
                <div className={styles.dataTitle}>总在线数</div>
                <div className={styles.dataValue}>
                  <span className={styles.dataNum}>{data?.online || 0}</span>
                  <span style={{ color: 'gray' }}>台</span>
                </div>
              </Card>
            </Col>
            <Col flex="1">
              <Card className={styles.dataItem} bordered={false}>
                <div className={styles.dataTitle}>五恒在线数</div>
                <div className={styles.dataValue}>
                  <span className={styles.dataNum}>{data?.wuheng_online || 0}</span>
                  <span style={{ color: 'gray' }}>台</span>
                </div>
              </Card>
            </Col>
            <Col flex="1">
              <Card className={styles.dataItem} bordered={false}>
                <div className={styles.dataTitle}>激活五恒数</div>
                <div className={styles.dataValue}>
                  <span className={styles.dataNum}>{data?.wuheng || 0}</span>
                  <span style={{ color: 'gray' }}>台</span>
                </div>
              </Card>
            </Col>
            <Col flex="1">
              <Card className={styles.dataItem} bordered={false}>
                <div className={styles.dataTitle}>分风箱在线数</div>
                <div className={styles.dataValue}>
                  <span className={styles.dataNum}>{data?.ffx_online || 0}</span>
                  <span style={{ color: 'gray' }}>台</span>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Card>

      <Row gutter={[20, 20]}>
        <Col span={16}>
          <div>
            <Row gutter={[20, 20]}>
              <Col flex="1">
                <Card hoverable>
                  <div className={styles.userDataItem}>
                    <div>
                      <div className={styles.dataItemTitle}>用户数</div>
                      <div>
                        <span className={styles.dataItemValue}>
                          {userData?.total && userData?.total.length > 3
                            ? formatNumber(userData?.total)
                            : userData?.total || 0}
                        </span>
                        <span style={{ color: 'gray' }}>人</span>
                      </div>
                    </div>
                    <div className={styles.dataItemIcon}>
                      <img src={userIcon} alt="用户icon" />
                    </div>
                  </div>
                </Card>
              </Col>
              <Col flex="1">
                <Card hoverable>
                  <div className={styles.userDataItem}>
                    <div>
                      <div className={styles.dataItemTitle}>今日新增用户数</div>
                      <div>
                        <span className={styles.dataItemValue}>{userData?.tnu || 0}</span>
                        <span style={{ color: 'gray' }}>人</span>
                      </div>
                    </div>
                    <div className={styles.dataItemIcon}>
                      <img src={todayIcon} alt="今日新增icon" />
                    </div>
                  </div>
                </Card>
              </Col>
              <Col flex="1">
                <Card hoverable>
                  <div className={styles.userDataItem}>
                    <div>
                      <div className={styles.dataItemTitle}>本月新增用户数</div>
                      <div>
                        <span className={styles.dataItemValue}>{userData?.mnu || 0}</span>
                        <span style={{ color: 'gray' }}>人</span>
                      </div>
                    </div>
                    <div className={styles.dataItemIcon}>
                      <img src={monthIcon} alt="本月新增icon" />
                    </div>
                  </div>
                </Card>
              </Col>
              <Col flex="1">
                <Card hoverable>
                  <div className={styles.userDataItem}>
                    <div>
                      <div className={styles.dataItemTitle}>今日App使用次数</div>
                      <div>
                        <span className={styles.dataItemValue}>{appUserData?.total || 0}</span>
                        <span style={{ color: 'gray' }}>次</span>
                      </div>
                    </div>
                    <div className={styles.dataItemIcon}>
                      <img src={appIcon} alt="App统计次数icon" />
                    </div>
                  </div>
                </Card>
              </Col>
              <Col flex="1">
                <Card hoverable>
                  <div className={styles.userDataItem}>
                    <div>
                      <div className={styles.dataItemTitle}>本月日均使用APP次数</div>
                      <div>
                        <span className={styles.dataItemValue}>{appUserData?.month_avg || 0}</span>
                        <span style={{ color: 'gray' }}>次</span>
                      </div>
                    </div>
                    <div className={styles.dataItemIcon}>
                      <img src={appIcon} alt="App统计次数icon" />
                    </div>
                  </div>
                </Card>
              </Col>
            </Row>
            <Row gutter={[20, 20]} style={{ marginTop: '20px' }}>
              <Col span={12}>
                <Card hoverable>
                  <div style={{ marginBottom: '20px', fontWeight: 'bold' }}>日活用户统计</div>
                  {dailyActiveData && dailyActiveData.xData && dailyActiveData.yData ? (
                    <LineChart
                      color="#1890ff"
                      height="450px"
                      width="700px"
                      xData={dailyActiveData?.xData}
                      yData={dailyActiveData?.yData}
                    />
                  ) : (
                    <Spin />
                  )}
                </Card>
              </Col>
              <Col span={12}>
                <Card hoverable>
                  <div style={{ marginBottom: '20px', fontWeight: 'bold' }}>设备类型统计</div>
                  {deviceTypeData && deviceTypeData.deviceName && deviceTypeData.deviceTypeValue ? (
                    <BarChart
                      color="#1890ff"
                      height="450px"
                      width="700px"
                      seriesData={deviceTypeData?.deviceTypeValue}
                      yData={deviceTypeData?.deviceName}
                    />
                  ) : (
                    <Spin />
                  )}
                </Card>
              </Col>
            </Row>
          </div>
        </Col>
        <Col span={8}>
          <Card hoverable>
            <div style={{ marginBottom: '20px', fontWeight: 'bold' }}>设备使用地区统计</div>
            <div style={{ width: '700px', height: '620px' }} ref={chartRef} />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Welcome;
