import DescriptionItem from '@/components/DescriptionItem';
import { CaretUpFilled } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import classNames from 'classnames';
import EChartsReact from 'echarts-for-react';
import React, { useState } from 'react';
import BottomTab from './BottomTab';
import styles from './index.less';
import option from './option';

const ProblemInfo: React.FC = () => {
  const [date, setDate] = useState<'today' | 'week' | 'month'>('today');

  const dateTabs = [
    {
      key: 'today',
      name: '今日',
    },
    {
      key: 'week',
      name: '本周',
    },
    {
      key: 'month',
      name: '本月',
    },
  ];
  const info = [
    {
      name: '立案',
      value: '1208',
      unit: '件',
    },
    {
      name: '应结案',
      value: '1208',
      unit: '件',
    },
    {
      name: '已结案',
      value: '1208',
      unit: '件',
    },
    {
      name: '结案率',
      value: '1208',
      unit: '%',
    },
  ];
  return (
    <div className={styles.container}>
      <Flex className={styles.header} justify="space-between" align="center">
        <div className={styles.title}>城市问题</div>

        <div className={styles.btnGroup}>
          {dateTabs.map((item, index) => {
            return (
              <div
                key={item.key}
                onClick={() => {
                  setDate(item.key as any);
                }}
                className={classNames(
                  styles.btn,
                  date === item.key ? styles.btnSelected : undefined,
                )}
              >
                {item.name}
              </div>
            );
          })}
        </div>
      </Flex>
      <Flex justify="space-around" className={styles.infoWrap}>
        {info.map((item, index) => {
          return (
            <DescriptionItem
              key={index}
              value={item.value}
              unit={item.unit}
              name={item.name}
              labelStyle={{ textAlign: 'center' }}
            ></DescriptionItem>
          );
        })}
      </Flex>
      <Flex
        justify="space-between"
        align="center"
        className={styles.chartHeader}
      >
        <div className={styles.title}>近七日立案趋势</div>
        <Flex justify="flex-end" className={styles.compare}>
          <Space size={10}>
            <span className={styles.tips}>近七日环比上月</span>
            <CaretUpFilled style={{ color: '#57ef58' }} />
            <span className={styles.compareNum}>1.3</span>
            <span>件</span>
          </Space>
        </Flex>
      </Flex>
      <div>
        <EChartsReact
          style={{ width: 562, height: 100 }}
          option={option}
        ></EChartsReact>
      </div>
      <Flex gap={100} style={{ margin: '24px 0' }}>
        <div style={{ width: 220 }}>
          <DescriptionItem
            direction="horizontal"
            name="委内疑难问题"
            value={1208}
            unit="件"
          ></DescriptionItem>
        </div>
        <div style={{ width: 220 }}>
          <DescriptionItem
            direction="horizontal"
            name="委外疑难问题"
            value={1208}
            unit="件"
          ></DescriptionItem>
        </div>
      </Flex>
      <BottomTab></BottomTab>
    </div>
  );
};

export default ProblemInfo;
