import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Flex } from 'antd';
import React from 'react';
import styles from './index.less';

const commonValueStyle = {
  background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  fontFamily: 'D-DIN',
  fontSize: '36px',
  fontWeight: 700,
  lineHeight: 1.1,
};

const commonLabelStyle = {
  color: '#BCCEE9',

  fontWeight: 400,
  lineHeight: 1.1,
};

const commonUnitStyle = {
  color: '#BCCEE9',
  // fontFamily: '微软雅黑',

  fontWeight: 400,
  lineHeight: 1.1,
};
const MunicipalFacilities: React.FC = () => {
  const { dispatch } = useGlobalModalServices();

  const handleBridgeClick = () => {
    dispatch.push('BridgeManage', {
      props: {
        defaultViewType: 'bridge'
      }
    });
  };

  const handleRoadClick = () => {
    dispatch.push('BridgeManage', {
      props: {
        defaultViewType: 'road'
      }
    });
  };

  return (
    <div className={styles.container}>
      <Flex vertical gap={15}>
        {/* <Space size={15}>
          <span className={styles.label} style={commonLabelStyle}>
            近七日发现道桥病害
          </span>
          <CountUp
            className={styles.value}
            end={Number(17365)}
            style={commonValueStyle}
            preserveValue
            decimals={0}
          />
          <span className={styles.unit} style={commonUnitStyle}>
            处
          </span>
        </Space> */}
        {/* <div>
          <LineCharts data={[]} />
        </div> */}
        <Flex justify="space-between" gap={35}>
          <DescriptionItem
            value={523}
            name="本月发现道桥病害"
            unit="个"
            onClick={() => {
              dispatch.push('BridgeMaintenanceList');
            }}
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />

          <DescriptionItem
            value={1225}
            name="全市道路"
            onClick={handleRoadClick}
            // onClick={() => {
            //   dispatch.push('PipelinePassage');
            // }}
            unit="条"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />
        </Flex>
        <Flex gap={82}>
          <DescriptionItem
            value={56}
            name="全市桥梁"
            unit="座"
            onClick={handleBridgeClick}
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />
        </Flex>
        <div>
          <DescriptionItem
            value={34}
            name="综合管廊"
            onClick={() => {
              dispatch.push('PipelinePassage');
            }}
            unit="条"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />
        </div>
      </Flex>
    </div>
  );
};

export default MunicipalFacilities;
