import services from '@/services';
import { useSetState } from 'ahooks';
import { Button } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect } from 'react';
import { ChildrenModalMethods } from '../../type';
import CenterStats from './components/CenterStats';
import DataActivityCard from './components/DataActivityCard';
import DataFlowSection from './components/DataFlowSection';
import DataQualityCard from './components/DataQualityCard';
import styles from './index.less';
import { governanceData } from './mockData';

const DataGovernance = ({
  modalDispatch,
}: {
  modalDispatch: ChildrenModalMethods;
}) => {
  const [dataSource, setDataSource] = useSetState(governanceData);
  useEffect(() => {
    modalDispatch.setOptions({
      headerRight: () => {
        return (
          <Button
            type="text"
            style={{ marginLeft: 24 }}
            onClick={() => {
              modalDispatch.push(
                'DataActivity',
                {
                  title: '三级标签体系',
                },
                1,
              );
            }}
          >
            三级标签体系
          </Button>
        );
      },
    });
  }, []);

  useEffect(() => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dp-sjzljr',
    }).then((res: any) => {
      if (res.code === 200) {
        const record = res.data?.data?.records[0];
        let newCenterStatsData,
          sourceData,
          businessData,
          baseInfoData,
          themeData,
          specialData,
          dataQuality,
          dataActivity;

        const { bt, ct, rt, lt } = record;
        if (ct) {
          newCenterStatsData = cloneDeep(dataSource.centerStats);
          newCenterStatsData[0].num = ct.sjzl;
          newCenterStatsData[1].num = ct.jrxz;
          newCenterStatsData[2].num = ct.msj;
          newCenterStatsData[3].num = ct.wsj;
          newCenterStatsData[4].num = ct.rsj;
          newCenterStatsData[5].num = ct.lsj;

          newCenterStatsData = newCenterStatsData.map((v) => {
            return {
              ...v,
              unit: ct.dw,
            };
          });
        }

        if (bt) {
          sourceData = bt.ysk.map((v: any, index: number) => {
            return {
              id: index + '_source',
              type: '原始库',
              type_desc: v.name,
              num: v.value,
              unit: v.dw,
            };
          });
          businessData = bt.ywk.map((v: any, index: number) => {
            return {
              id: index + '_business',
              type: '业务域明细库',
              type_desc: v.name,
              num: v.value,
              unit: v.dw,
            };
          });
          baseInfoData = bt.jck.map((v: any, index: number) => {
            return {
              id: index + '_baseInfo',
              type: '基础信息库',
              type_desc: v.name,
              num: v.value,
              unit: v.dw,
            };
          });
          themeData = bt.ztk.map((v: any, index: number) => {
            return {
              id: index + '_theme',
              type: '主题库',
              type_desc: v.name,
              num: v.value,
              unit: v.dw,
            };
          });

          specialData = bt.zuantk.map((v: any, index: number) => {
            return {
              id: index + '_special',
              type: '专题库',
              type_desc: v.name,
              num: v.value,
              unit: v.dw,
            };
          });
        }

        if (rt) {
          dataQuality = cloneDeep(dataSource.dataQuality);
          dataQuality.score = rt.sjgx;
          dataQuality.metrics = rt.xq;
        }

        if (lt) {
          dataActivity = cloneDeep(dataSource.dataActivity);
          dataActivity.score = lt.sjjr;
          dataActivity.topList = lt.top3.map((v: any) => {
            return {
              name: v.name,
              value: v.num,
            };
          });
        }

        setDataSource({
          centerStats: newCenterStatsData!,
          sourceData,
          businessData,
          baseInfoData,
          themeData,
          specialData,
          dataQuality: dataQuality!,
          dataActivity: dataActivity!,
        });
      }
    });
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.leftSection}>
        <DataActivityCard data={dataSource.dataActivity} />
        <div className={styles.flowSection}>
          <DataFlowSection
            sourceData={dataSource.sourceData}
            businessData={dataSource.businessData}
            baseInfoData={dataSource.baseInfoData}
            themeData={dataSource.themeData}
            specialData={dataSource.specialData}
          />
        </div>
      </div>

      <div className={styles.centerSection}>
        <CenterStats data={dataSource.centerStats} />
      </div>

      <div className={styles.rightSection}>
        <DataQualityCard data={dataSource.dataQuality} />
      </div>
    </div>
  );
};

export default DataGovernance;
