import React, { useEffect, useState } from 'react';
import { Empty } from 'antd';
import { Responsive, WidthProvider } from 'react-grid-layout';
import { useParams } from 'umi';
import { getReportData, queryReportSchema } from './services';
import ItemChart from './components/item-chart';
import { transferEchartsJson } from './utils';
import './index.less';

const ResponsiveGridLayout = WidthProvider(Responsive);

const ChartList: React.FC = () => {
  const [layouts, setLayouts] = useState<{ lg: any[] }>({ lg: [] });
  const [chartList, setChartList] = useState<any[]>([]);
  const { appCode, reportCode } = useParams<{
    appCode: string;
    reportCode: string;
  }>();

  //使用统计无类别项   统计无类别项  会返回没有标题的group,现产品要求将字段设置为空 结构真难搞
  const translate = (groups: any) => {
    let groupsTemp = groups;
    for (let value in groupsTemp) {
      let item = groupsTemp[value];
      for (let values in item) {
        console.log(item[values]);
        if (!item[values].data_title) {
          item[values] = { data_title: '空' };
        }
      }
    }
    return groupsTemp;
  };

  useEffect(() => {
    // 临时处理
    setTimeout(() => {
      const myEvent = new Event('resize');
      window.dispatchEvent(myEvent);
    }, 200);
  }, []);

  const getData = (cards: any[]) => {
    let i: number = 0;
    cards.forEach((item) => {
      getReportData(appCode, reportCode, item.code).then((res) => {
        i++;
        if (res) {
          item.options = transferEchartsJson(
            res.result,
            item,
            translate(res?.groups || []),
          );
        }
        if (i === cards.length) {
          setChartList(cards);
        }
      });
    });
  };

  const handleInit = (cards: any[]) => {
    const _layouts: any = { lg: [] };
    cards.forEach((item: any, index) => {
      _layouts.lg[index] = {};
      _layouts.lg[index].w = item.sizeX;
      _layouts.lg[index].h = item.sizeY;
      _layouts.lg[index].x = item.row;
      _layouts.lg[index].y = item.col;
      _layouts.lg[index].i = item.code;
      _layouts.lg[index].static = true;
    });
    setLayouts(_layouts);
    getData(cards);
  };

  useEffect(() => {
    queryReportSchema(appCode, reportCode)
      .then((data) => {
        if (data) {
          handleInit(data.cards);
        } else {
          setChartList([]);
        }
      })
      .catch(() => {
        setChartList([]);
      });
  }, [appCode, reportCode]);

  return (
    <div
      className={'qx-chart-view app-view-cont'}
      style={{
        backgroundColor: '#fff',
      }}
    >
      {chartList && chartList.length > 0 ? (
        <ResponsiveGridLayout
          className="qx-chart-view_layout"
          // layouts={layouts}
          breakpoints={{ lg: 1200 }}
          cols={{ lg: 24 }}
          rowHeight={50}
        >
          {chartList.map((item, index) => {
            return (
              <div key={item.code} data-grid={layouts.lg[index]}>
                <ItemChart
                  options={item.options || {}}
                  card={item.card}
                  checkedItem={''}
                />
              </div>
            );
          })}
        </ResponsiveGridLayout>
      ) : (
        <Empty
          image={require('/public/img/no_chart.png')}
          style={{
            height: '100%',
            paddingTop: '35.2vh',
            margin: '0',
            backgroundColor: '#fff',
          }}
          imageStyle={{
            height: 90,
          }}
          description={
            <span style={{ fontSize: '14px', color: '#999' }}>
              很抱歉，暂时没有内容，看看别的呢
            </span>
          }
        />
      )}
    </div>
  );
};

export default ChartList;