import { CaretUpOutlined } from '@ant-design/icons';
import { Col, Flex, Row } from 'antd';
import ReactECharts from 'echarts-for-react';
import React from 'react';
import DescriptionItem from '../../../../components/DescriptionItem';
import { lineOption } from '../../option';
import styles from './index.less';

const DigitalUrbanManagement: React.FC = () => {
  return (
    <div className={styles.container}>
      <Row>
        <Col span={10}>
          <DescriptionItem
            value={1208}
            name={'今日立案'}
            unit={'件'}
            direction={'horizontal'}
          ></DescriptionItem>
        </Col>
        <Col span={10} offset={4}>
          <DescriptionItem
            value={86.2}
            name={'结案率'}
            unit={'%'}
            direction={'horizontal'}
          ></DescriptionItem>
        </Col>
      </Row>
      <Flex justify="space-between" className={styles.centerWrap}>
        <div className={styles.chartTitle}>近半年立案趋势</div>
        <div>
          <Flex className={styles.chartStatus}>
            本月较上月环比
            <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
            <span>1.3%</span>
          </Flex>
        </div>
      </Flex>

      <ReactECharts
        style={{ height: 100, minWidth: 450, margin: '0 auto' }}
        option={lineOption()}
      />
    </div>
  );
};

export default DigitalUrbanManagement;
