import { Flex, Space } from 'antd'
import styles from './index.less'
import CustomCard from '../components/CustomCard'
import CitySafetyIndex from './CitySafetyIndex'
import TodayWarning from './TodayWarning'
import RiskList from './RiskList'


const SecuritySituation = () => {

  const indList = [
    {
      title: "道路桥梁",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 177,
      height: 178
    },
    {
      title: "环卫行业",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 177,
      height: 178
    },
    {
      title: "固废处置",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 177,
      height: 178
    },
    {
      title: "户外广告招牌",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 138,
      height: 178
    },
    {
      title: "城市照明",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 138,
      height: 178
    },
    {
      title: "油烟监管",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 138,
      height: 178
    },
    {
      title: "综合管廊",
      value: 95.6,
      text: '良好',
      risk: 0,
      width: 138,
      height: 178
    }
  ]

  return (
    <div className={styles.container}>
      <div className={styles.title}>安全态势</div>
      <Flex gap={18}>
        <Flex vertical gap={20}>
          <CitySafetyIndex />
          <TodayWarning />
          <Flex className={styles.cardSection} justify='space-between' wrap>
            {
              indList.map(item => (
                <CustomCard
                  key={item.title}
                  title={item.title}
                  width={item.width}
                  height={item.height}
                  style={{ paddingTop: 20, marginBottom: 20 }}
                  titleStyle={{ fontSize: 20 }}
                >
                  <div className={styles.cardItem}>
                    <Space>
                      <span className={styles.num}>95.6</span>
                      <div className={styles.tag}>良好</div>
                    </Space>
                    <div className={styles.risk}>
                      <span>风险预警</span>
                      <span>0</span>
                    </div>
                  </div>
                </CustomCard>
              ))
            }
          </Flex>
        </Flex>
        <RiskList />
      </Flex>
    </div>
  )
}

export default SecuritySituation