import { Flex, Statistic, Space, Row, Col } from 'antd'
import type { StatisticProps } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less'
import LineBarCharts from './LineBarCharts';
import { CaretUpFilled } from '@ant-design/icons';


/**
 * 
 * @description 整体态势部分
 */
const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="" />
);

const OverallSituation = () => {
  return (
    <Flex className={styles.wrap} vertical>
      <div className={styles.top}>
        <span className={styles.title}>整体态势</span>
      </div>

      <Flex vertical justify='space-between' style={{ flex: 1 }}>
        <Flex className={styles.cardSection} gap={20}>
          <Space direction='vertical' className={styles.left}>
            <Space>
              <Statistic value={1500} formatter={formatter} />
              <span className={styles.unit}>件</span>
            </Space>
            <span className={styles.name}>今日投诉总量</span>
          </Space>

          <Row gutter={[16, 12]} className={styles.right}>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>未处置</span>
                <Space>
                  <Statistic value={15} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>委外疑难问题</span>
                <Space>
                  <Statistic value={15} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>已办结</span>
                <Space>
                  <Statistic value={15} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>委内疑难问题</span>
                <Space>
                  <Statistic value={15} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
          </Row>
        </Flex>

        <div className={styles.chartsSection}>
          <div className={styles.title}>近七日投诉趋势</div>
          <LineBarCharts dataSource={[]} />
        </div>

        <Flex className={styles.bottom} gap={80} align='center'>
          <span className={styles.left}>
            <span>趋势</span>
            <span>总结</span>
          </span>
          <Space direction='vertical' size={10} className={styles.middle}>
            <span className={styles.title}>近七日累计投诉</span>
            <Space>
              <Space>
                <Statistic value={1500} formatter={formatter} />
                <span className={styles.unit}>件</span>
              </Space>
              <span>
                <span className={styles.rateName}>月环比</span>
                <span className={styles.num}>
                  <CaretUpFilled style={{ color: '#57ef58', marginRight: 10 }} />
                  <span style={{ color: '#57ef58' }}>1.3%</span>
                </span>
              </span>
            </Space>
          </Space>
          <Space direction='vertical'>
            <span className={styles.title}>占全市总投诉比重</span>
            <Space>
              <Statistic value={89.5} />
              <span className={styles.unit}>%</span>
            </Space>
          </Space>
        </Flex>
      </Flex>
    </Flex>
  )
}

export default OverallSituation