import Modal from '@/components/HncyModal';
import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
import React, { useState } from 'react';
import Card from './components/Card';
import DataElement from './components/DataElement';
import ManagementElement from './components/ManagementElement';
import PerceptionSource from './components/PerceptionSource';
import styles from './index.less';

const ResourceElements: React.FC = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const cards = [
    {
      title: '数据要素',
      children: <DataElement />,
      // popverSystem: [
      //   {
      //     name: '数据治理平台',
      //     onClick: () => setModalVisible(true),
      //   },
      // ],
    },
    {
      title: '管理要素',
      children: <ManagementElement />,
      popverSystem: [
        {
          name: '网格基座',
          url: 'http://10.1.214.174:1800/comprehensivebig',
        },
      ],
    },
    {
      title: '感知源',
      children: <PerceptionSource />,
      popverSystem: [
        {
          name: '物联感知平台',
          url: 'https://10.1.174.34:13200/iot-platform-screen',
        },
      ],
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <span>城管资源要素</span>
      </div>
      <div className={styles.content}>
        {cards.map((card) => (
          <Card
            key={card.title}
            title={card.title}
            jumpSystem={card.popverSystem}
          >
            {card.children}
          </Card>
        ))}
      </div>

      <Modal
        open={modalVisible}
        title="数据治理情况"
        onCancel={() => setModalVisible(false)}
        width={1470}
        height={846}
      >
        <DataGovernance
          open={modalVisible}
          onCancel={() => setModalVisible(false)}
        />
      </Modal>
    </div>
  );
};

export default ResourceElements;
