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 DataItem from './DataItem'

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

// 处理数值和单位的函数
const formatValue = (value: number) => {
  if (value === 0) return { value: 0, unit: '条' };
  if (value >= 100000000) {
    return { value: (value / 100000000).toFixed(2), unit: '亿条' };
  }
  if (value >= 10000) {
    return { value: (value / 10000).toFixed(2), unit: '万条' };
  }
  return { value: value.toFixed(0), unit: '条' };
};

const DataBase = () => {
  const cards = [
    {
      icon: d1,
      name: '基础库',
      items: [
        {
          name: '部件信息',
          value: 27228885
        },
        {
          name: '作业车辆信息',
          value: 574535
        },
        {
          name: '单元网格信息',
          value: 219266
        },
        {
          name: '设备设施信息',
          value: 139733
        },
        {
          name: '人员组织信息',
          value: 10560
        }
      ]
    },
    {
      icon: d2,
      name: '业务域明细库',
      items: [
        {
          name: '管理域',
          value: 218918792
        },
        {
          name: '综合评价域',
          value: 13196692
        },
        {
          name: '基础域',
          value: 8299288
        },
        {
          name: '服务域',
          value: 1170516
        },
        {
          name: '运行域',
          value: 167587
        },
      ]
    },
    {
      icon: d3,
      name: '主题库',
      items: [
        {
          name: '市政监管主题',
          value: 885455092
        },
        {
          name: '城管事件主题',
          value: 40494525
        },
        {
          // name: '市容秩序主题',
          name: '市民服务主题',
          value: 1251387
        },
        {
          name: '行政执法主题',
          value: 33534
        },
        {
          name: '行政审批主题',
          value: 142
        },
      ]
    },
    {
      icon: d4,
      name: '专题库',
      items: [
        {
          name: '众智成城专题',
          value: 12200033
        },
        {
          // name: '综合指挥调度应用专题',
          name: '综合指挥调度专题',
          value: 9176022
        },
        {
          name: '城市管理体征指数专题',
          value: 792
        },
        {
          name: '诚管24应用专题',
          value: 0
        },
      ]
    }
  ]

  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) => {
                  const formattedValue = formatValue(v.value);
                  return (
                    <DataItem 
                      key={v.name} 
                      data={{
                        name: v.name,
                        ...formattedValue
                      }} 
                    />
                  );
                })
              }
            </Flex>
          </div>
        ))
      }
    </Flex>
  )
}

export default DataBase