import RelationCharts from '@/components/RelationCharts';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Tabs } from 'antd';
import { useMemo } from 'react';
import SignArithmetic from './SignArithmetic';
import styles from './index.less';
import { treeToArray } from '@/utils/index';
import BaseCard from '@/pages/Common/components/BaseCard';
import SignStatus from './SignStatus';

/**
 * @description 体征模型
 */

const SymbolSize: Record<number, number> = {
  1: 100,
  2: 80,
  3: 60,
};
type Item = PhysicalsignApi.SignWeightSystem & {
  colors?: string;
  children?: Item[];
};

const colors = ['#2b85ff', '#558af4', '#57db8c', '#ae63d1', '#f56862'];
const ColosMap: Record<string, any> = {
  安全: '#558AF4',
  整洁: '#57DB8C',
  有序: '#AE62D1',
  便民: '#F56862',
  美观: '#FBB22C',
};
const SignModel =  () => {
  const getColor = (
    data: PhysicalsignApi.SignWeightSystem,
    list: PhysicalsignApi.SignWeightSystem[],
  ) => {
    const random = Math.floor(Math.random() * (4 + 1));
    if (data.level === 1) return '#2b85ff';

    if (data.source === 'CQI') {
      let color = colors[random];
      list.forEach((item) => {
        if (item.target === data.target) {
          item.color = colors[random];
        }
      });
      return color;
    }
    let color = '#2b85ff';
    list.forEach((item) => {
      if (item.target === data.source) {
        color = item.color || '#2b85ff';
        if (data.target === item.target) {
          item.color = color;
        }
      }
    });
    return color;
  };
  const { data } = useRequest(services.Physicalsign.getWeightSystem); //权重
  const { data: physicalData } = useRequest(
    services.Physicalsign.getPhysicalSignSystem,
  );
  const addColor = (data: Item[]) => {
    const map: any = {};
    data?.forEach((item) => {
      const random = Math.floor(Math.random() * (4 + 1));
      if (item.source === 'CQI') {
        item.colors = ColosMap[item.target] ?? colors[random];
      }
      if (item.target === 'CQI') {
        item.colors = '#2b85ff';

      }
      map[item.target] = item;
    });
    const res: Item[] = [];
    data?.forEach((item) => {
      const parent: Item = map[item.source];
      if (parent) {
        if (item.source !== 'CQI') {
          item.colors = parent.colors;
        }

        parent?.children
          ? parent.children.push(item)
          : (parent.children = []).push(item);
      } else {
        res.push(item);
      }
    });
    return treeToArray(res);
  };
  const list = useMemo(() => {
    return addColor(physicalData?.data || []);
  }, [data]);

  const tabItems = useMemo(() => {
    return [
      {
        label: `体征状态`,
        key: '0',
        children: (
      <SignStatus/>
        ),
      },
      {
        label: `体征体系`,
        key: '1',
        children: (
          <RelationCharts
            style={{ width: 1330, height: 640 }}
            data={physicalData?.data?.map((item) => {
              return {
                ...item,
                name: item.target,
                // colors: getColor(item, physicalData?.data),
                symbolSize: SymbolSize[item.level as number] ?? 50,
                draggable: 'true',
              };
            })}
          ></RelationCharts>
        ),
      },
      {
        label: `体征算法`,
        key: '2',
        children: <SignArithmetic />,
      },
      {
        label: `影响权重`,
        key: '3',
        children: (
          <RelationCharts
            style={{ width: 1330, height: 640 }}
            data={data?.data?.map((item) => {
              return {
                ...item,
                name: item.target,
                colors: getColor(item, data?.data),
                symbolSize: SymbolSize[item.level as number] ?? 50,
                draggable: 'true',
              };
            })}
          ></RelationCharts>
        ),
      },
    ];
  }, [data, physicalData]);

  return (
    <BaseCard>
      <div className={styles.wrap}>
        <Tabs
          size="large"
          defaultActiveKey="0"
          centered
          items={tabItems}
          destroyInactiveTabPane
        />
      </div>
    </BaseCard>
  );
};

export default SignModel;
