/*
 * @Author: zhuqin zq627501913@163.com
 * @Date: 2022-05-30 17:40:47
 * @LastEditors: zhuqin zq627501913@163.com
 * @LastEditTime: 2022-05-31 09:14:16
 * @FilePath: \qx-apaas-fe\src\pages\app-view\custom\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react';
import { Empty } from 'antd';
import { Responsive, WidthProvider } from 'react-grid-layout';
import ItemComponent from './components/item-component';
import { useParams } from 'umi';
import {
  queryCustomComponents,
  getProcessInstance,
} from '@/pages/editor/custom/service';
import _ from 'lodash';
import './index.less';

const ResponsiveGridLayout = WidthProvider(Responsive);

const CustomList: React.FC = () => {
  const [layouts, setLayouts] = useState<{ lg: any[] }>({ lg: [] });
  const [compList, setCompList] = useState<any[]>([]);
  const { appCode, customCode } = useParams<{
    appCode: string;
    customCode: string;
  }>();
  const [taskData, setTaskData] = useState<any>();

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

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

  useEffect(() => {
    if (document) {
      if (document?.documentElement || document?.body) {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
      if (document.getElementsByClassName('reset-scroll-top')?.[0]) {
        // 找你自己框架主体样式
        document.getElementsByClassName('reset-scroll-top')[0].scrollTop = 0;
      }
    }
    queryCustomComponents(appCode, customCode)
      .then((data) => {
        if (data) {
          const taskFlagArr = (data || []).filter(
            (item: any) => item.widget === 'TASK',
          );
          if (taskFlagArr && !!taskFlagArr.length) {
            getProcessInstance().then((taskRes) => {
              if (!_.isEmpty(taskRes)) {
                setTaskData(taskRes);
              } else {
                setTaskData({});
              }
            });
          }
          handleInit(data || []);
        } else {
          setCompList([]);
        }
      })
      .catch(() => {
        setCompList([]);
      });
  }, [appCode, customCode]);

  return (
    <>
      {compList && compList.length > 0 ? (
        <div
          className={
            'qx-chart-view app-view-cont qx-page__content reset-scroll-top'
          }
          style={{
            height: '100%',
            backgroundColor: '#f9f9f9',
          }}
        >
          <ResponsiveGridLayout
            className="qx-chart-view_layout"
            // layouts={layouts}
            breakpoints={{ lg: 1200 }}
            cols={{ lg: 24 }}
            rowHeight={10}
          >
            {compList.map((item, index) => {
              return (
                <div key={item.code} data-grid={layouts.lg[index]}>
                  <ItemComponent
                    component={item}
                    appCode={appCode}
                    customCode={customCode}
                    taskData={taskData}
                  />
                </div>
              );
            })}
          </ResponsiveGridLayout>
        </div>
      ) : (
        <div
          className={'qx-chart-view app-view-cont'}
          style={{ height: '100%', backgroundColor: '#fff' }}
        >
          <Empty
            image={require('/public/img/no_page.png')}
            style={{
              height: '100%',
              paddingTop: '35.2vh',
              paddingBottom: '35.2vh',
              margin: '0',
              backgroundColor: '#fff',
            }}
            imageStyle={{
              height: 90,
            }}
            description={
              <span style={{ fontSize: '14px', color: '#999' }}>
                很抱歉，暂时没有内容，看看别的呢
              </span>
            }
          />
        </div>
      )}
    </>
  );
};

export default CustomList;