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

/**
 * 
 * @description 今日预警
 */
const TodayWarning = () => {
  return (
    <div className={styles.wrap}>
      <CustomCard
        title="今日预警"
        width={566}
        height={259}
        style={{ paddingTop: 20 }}
      >
        <div className={styles.content}>
          <Flex>
            <div>
              <div className={styles.total}>23</div>
              <Flex justify='space-between'>
                <div className={styles.exchange}>
                  <span>20</span>
                  <div>交换办理</div>
                </div>
                <div className={styles.reply}>
                  <span>3</span>
                  <div>处置回复</div>
                </div>
              </Flex>
            </div>
            <Flex vertical gap={15} className={styles.category}>
              <Space size={20}>
                <span>智能监测</span>
                <span>13</span>
              </Space>
              <Space size={20}>
                <span>人工巡查</span>
                <span>4</span>
              </Space>
              <Space size={20}>
                <span>公众上报</span>
                <span>5</span>
              </Space>
              <Space size={55}>
                <span>其他</span>
                <span>0</span>
              </Space>
            </Flex>
          </Flex>
        </div>
      </CustomCard>
    </div>
  )
}

export default TodayWarning