import {
  postDeviceGroupGetDeviceGroupById,
  postDeviceGroupGetDeviceGroupTree,
} from '@/services/device/DeviceGroup';

import TreeAndTableList, { ProCardTypeProps } from '@/layouts/treeAndTableList';
import { postProjectGetProjectByGroupId } from '@/services/project/Project';
import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
import { FormattedMessage } from '@@/exports';
import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { PageContainer, ProCard, ProDescriptions, ProList } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Empty, Tabs, Tag, message } from 'antd';
import Tree, { DataNode } from 'antd/es/tree';
import React, { useEffect, useRef, useState } from 'react';
import AlarmSetForm from './components/AlarmSetForm';
import ProjectCard from './components/ProjectCard';
import UpdateForm from './components/UpdateForm';

/**默认数据 */
type tabModeListProps = {
  label: string;
  value: string;
};
const tabModeList: tabModeListProps[] = [
  {
    label: '项目详情',
    value: '1',
  },
  {
    label: '告警设置',
    value: '2',
  },
];

const AlgorithmSetting: React.FC = () => {
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();
  const actionRef = useRef<ActionType>();
  const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
  const [hasInit, setHasInit] = useState<boolean>(false);
  const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]);
  const [selectNodes, setSelectNodes] = React.useState<any[]>([]);
  const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();

  const [tabs, setTabs] = useState([]);
  const [modelVersionData, setModelVersionData] = useState<any[]>([]);
  const [projectData, setProjectData] = useState<Record<string, any>>({});
  const [projectConfigId, setProjectConfigId] = useState<number>(0);
  const handleUpdateModal = () => {
    if (updateModalOpen) {
      setUpdateModalOpen(false);
      setProjectConfigId(0);
    } else {
      setUpdateModalOpen(true);
    }
  };
  const [modelData, setModelData] = useState<Record<string, any>[]>([]);
  const [tab, setTab] = useState<string>('');
  const [activeMode, setActiveMode] = useState<string>('1'); // 项目 | 告警
  const columns = [
    {
      title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
      dataIndex: 'name',
      hideInSearch: true,
    },

    {
      title: <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />,
      dataIndex: 'isEnable',
      filters: true,
      onFilter: true,
      hideInSearch: true,
      valueType: 'switch',
    },

    {
      title: (
        <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
      ),
      dataIndex: 'createTime',
      sorter: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },

    {
      title: (
        <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
      ),
      dataIndex: 'updateTime',
      sorter: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },

    {
      title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
      dataIndex: 'code',
      hideInSearch: true,
    },

    {
      title: <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />,
      dataIndex: 'address',
      hideInSearch: true,
    },
  ];

  // 项目信息展示
  async function fetchProjectInfoByGroupId(record: Record<string, any>) {
    const resp = await postDeviceGroupGetDeviceGroupById({ id: record.key });
    console.log('fetchProjectInfoByGroupId_resp', resp.data.deviceGroup);
    setCurrentRow(resp.data.deviceGroup);
  }

  // TODO 左侧图标目前写死，需替换
  // 操作左侧网点数据节点， 项目列表数据变更
  function fetchProjectByGroupId(record: Record<string, any>) {
    postProjectGetProjectByGroupId({ id: record.key }).then((resp) => {
      let tab_data = (resp?.data?.list || []).map((v: any) => {
        console.log(resp.data.list);
        let model_data = ([...v?.models] || []).map((item: any) => ({
          content: (
            <ProCard
              style={{ backgroundColor: 'rgba(21, 91, 212, 0.03)' }}
              bodyStyle={{ margin: 0, padding: 0 }}
            >
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  padding: 15,
                  justifyContent: 'space-between',
                }}
              >
                <div>
                  <img src="/images/icons/logo.svg" alt="" style={{ width: '64px' }} />
                </div>
                <Button
                  type="link"
                  size="small"
                  key={item.configId}
                  style={{ padding: 0, fontWeight: 700 }}
                  onClick={() => {
                    setProjectData(item);
                    console.log(item, 'setProjectData_item', projectData);
                    setProjectConfigId(item.configId);
                    handleUpdateModal();
                  }}
                >
                  配置参数
                </Button>
              </div>
              <ProjectCard info={item}></ProjectCard>
            </ProCard>
          ),
        }));
        setModelData(model_data);
        return {
          label: v.name,
          key: v.id,
        };
      });
      if (tab_data.length) {
        setTab(tab_data[0].key);
      }
      setTabs(tab_data);
    });
  }

  // TODO 需联调
  // 操作项目列表数据类别切换， 项目列表数据变更
  function changeProjectTab(key: React.SetStateAction<string>) {
    console.log('changeProjectTab_key', key);
    let model_ids: number[] = projectData[key as string]?.inferConfig?.models || [];
    postModelVersionGetModelVersionListByIds({ ids: model_ids }).then((resp) => {
      let version_model_data = (resp?.data?.list || []).map((item: Record<string, any>) => {
        return {
          subTitle: <Tag color="#5BD8A6">经典算法</Tag>,
          avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
          content: (
            <ProCard bodyStyle={{ margin: 0, padding: 0 }}>
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  padding: 15,
                  justifyContent: 'space-between',
                }}
              >
                <div>
                  <div>{JSON.stringify(item.configId)}</div>
                  <img src="/images/model.png" alt="" style={{ width: '64px' }} />
                </div>
                <Button
                  type="link"
                  size="small"
                  key={item.configId}
                  style={{ padding: 0 }}
                  onClick={() => {
                    setProjectConfigId(item.configId);
                    handleUpdateModal();
                  }}
                >
                  配置
                </Button>
              </div>
              <ProjectCard info={item}></ProjectCard>
            </ProCard>
          ),
        };
      });
      setModelVersionData(version_model_data);
      console.log(modelVersionData);
    });
    setTab(key);
  }
  // 切换展示 项目|告警
  function changeMode(info: tabModeListProps) {
    console.log(info, 'changeMode_info');
    setActiveMode(info.value);
  }
  useEffect(() => {
    postDeviceGroupGetDeviceGroupTree()
      .then((resp) => {
        setNodeTreeData(resp.data.tree);
        setHasInit(true);
      })
      .catch(() => {
        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
      });
  }, []);

  return (
    <PageContainer className="algorithmSetting_project_box gn">
      <TreeAndTableList
        leftCard={
          {
            title: '网点选择',
          } as ProCardTypeProps
        }
        leftDom={
          hasInit && (
            <Tree
              checkable={false}
              defaultExpandAll={true}
              selectedKeys={selectNodes}
              treeData={nodeTreeData}
              onSelect={(selectKeys, info) => {
                // TODO_1 此处接口需要重新联调
                console.log(info.node, 'onSelect_info');
                setSelectNodes(selectKeys);
                fetchProjectInfoByGroupId(info?.node);
                fetchProjectByGroupId(info?.node);
                actionRef.current?.reload();
              }}
              checkStrictly={false}
            />
          )
        }
        rightDom={
          <>
            <ProCard
              title="网点详细信息"
              headStyle={{ borderBottom: '1px solid #E0E0E0', padding: '0px 16px 16px' }}
              style={{ background: 'transparent', paddingTop: 16 }}
              bodyStyle={{ padding: '16px 16px 0px' }}
              colSpan="80%"
            >
              <ProDescriptions
                column={3}
                dataSource={currentRow}
                columns={columns}
              ></ProDescriptions>
            </ProCard>
            {tabs?.length ? (
              <>
                <Tabs
                  activeKey={tab}
                  items={tabs}
                  onChange={(key) => {
                    setActiveMode('1'); // 重置到项目详情
                    changeProjectTab(key);
                  }}
                ></Tabs>
                <ProCard bodyStyle={{ padding: 0, margin: 0 }} style={{ padding: 0, margin: 0 }}>
                  <ul
                    className="algorithmSetting_mode_box"
                    style={{ display: 'flex', padding: '0 16px', margin: 0 }}
                  >
                    {tabModeList.map((item) => {
                      // TODO 统一使用button默认效果 'primary' : 'default'
                      return (
                        <li
                          key={item.value}
                          className={item.value === activeMode ? 'active' : ''}
                          onClick={() => changeMode(item)}
                          style={{
                            padding: '16px 12px 0 0',
                          }}
                        >
                          <Button type="default">{item.label}</Button>
                        </li>
                      );
                    })}
                  </ul>

                  {/* 项目 */}
                  {activeMode === '1' ? (
                    <>
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-between',
                          padding: '16px 16px 3px',
                        }}
                      >
                        <span style={{ fontSize: 16, fontWeight: 700 }}>模型列表</span>
                        {/* // TODO 需要对接接口 */}
                        {false ? (
                          <Button type="primary" danger>
                            <PauseOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
                            结束运行
                          </Button>
                        ) : (
                          <Button type="primary">
                            <CaretRightOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
                            开始运行
                          </Button>
                        )}
                      </div>
                      <ProList<any>
                        style={{
                          padding: '0px 16px 16px',
                        }}
                        className="gn"
                        ghost={true}
                        itemCardProps={{
                          ghost: true,
                          bodyStyle: { padding: 0, margin: 0 },
                        }}
                        pagination={{
                          defaultPageSize: 6,
                          showSizeChanger: false,
                        }}
                        showActions="hover"
                        grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }}
                        metas={{
                          type: {},
                          content: {},
                          actions: {
                            cardActionProps: 'extra',
                          },
                        }}
                        dataSource={modelData}
                      />
                    </>
                  ) : (
                    <div style={{ padding: 16 }}>
                      <AlarmSetForm
                        currentRow={{
                          type: '2',
                          ways: [
                            {
                              label: '短信',
                              value: [],
                              isChecked: [],
                            },
                            {
                              label: '邮件',
                              value: [],
                              isChecked: [],
                            },
                          ],
                        }}
                      ></AlarmSetForm>
                    </div>
                  )}
                </ProCard>
              </>
            ) : (
              <>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </>
            )}
          </>
        }
      ></TreeAndTableList>
      <UpdateForm
        projectData={projectData as Record<string, any>}
        updateModalOpen={updateModalOpen}
        handleModal={handleUpdateModal}
        groupId={currentRow?.id || 0}
        reload={actionRef.current?.reload}
        projectModelConfigId={projectConfigId}
      />
    </PageContainer>
  );
};

export default AlgorithmSetting;
