import { Flex, Space } from 'antd'
import styles from './index.less'
import d1 from '@/assets/images/UrbanElements/d1.png'
import d2 from '@/assets/images/UrbanElements/d2.png'
import d3 from '@/assets/images/UrbanElements/d3.png'
import d4 from '@/assets/images/UrbanElements/d4.png'
import d5 from '@/assets/images/UrbanElements/d5.png'
import DataItem from './DataItem'

/**
 * 
 * @description 数据仓库
 */

const DataBase = () => {

  const cards = [
    {
      icon: d1,
      name: '基础数据库',
      items: [
        {
          name: '部件信息库',
          value: 8563.5
        },
        {
          name: '单元网络信息库',
          value: 8563.5
        },
        {
          name: '人员组织信息库',
          value: 8563.5
        },
        {
          name: '作业车辆信息库',
          value: 8563.5
        },
        {
          name: '设备设施信息库',
          value: 8563.5
        }
      ]
    },
    {
      icon: d2,
      name: '业务域明细库',
      items: [
        {
          name: '基础域',
          value: 8563.5
        },
        {
          name: '运行域',
          value: 8563.5
        },
        {
          name: '管理域',
          value: 8563.5
        },
        {
          name: '服务域',
          value: 8563.5
        },
        {
          name: '综合评价域',
          value: 8563.5
        }
      ]
    },
    {
      icon: d3,
      name: '主题库',
      items: [
        {
          name: '城管事件主题库',
          value: 8563.5
        },
        {
          name: '市政监管主题库',
          value: 8563.5
        },
        {
          name: '市容秩序主题库',
          value: 8563.5
        },
        {
          name: '环境卫生主题库',
          value: 8563.5
        },
        {
          name: '行政执法主题库',
          value: 8563.5
        }
      ]
    },
    {
      icon: d4,
      name: '专题库',
      items: [
        {
          name: '体征指数专题库',
          value: 8563.5
        },
        {
          name: '指挥调度专题库',
          value: 8563.5
        },
        {
          name: '诚管24专题库',
          value: 8563.5
        },
        {
          name: '众智成城专题库',
          value: 8563.5
        },
        {
          name: '道桥监管专题库',
          value: 8563.5
        }
      ]
    },
    {
      icon: d5,
      name: '共享库',
      items: [
        {
          name: '数据共享资源目录',
          value: 8563.5
        },
        {
          name: '对外无条件共享库',
          value: 8563.5
        },
        {
          name: '诚管24专题库',
          value: 8563.5
        },
        {
          name: '不予共享库',
          value: 8563.5
        }
      ]
    }
  ]

  return (
    <Flex className={styles.wrap} justify='space-between'>
      {
        cards.map((item) => (
          <div className={styles.card} key={item.name}>
            <Space direction='vertical' size={16}>
              <img className={styles.icon} src={item.icon} alt="" />
              <span className={styles.name}>{item.name}</span>
            </Space>
            <Flex vertical gap={10} style={{ marginTop: 20 }}>
              {
                item.items.map((v) => (
                  <DataItem key={item.name} data={v} />
                ))
              }
            </Flex>
          </div>
        ))
      }
    </Flex>
  )
}

export default DataBase