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

const ProblemInfo: React.FC<{ objectId: string }> = (props) => {

  const { objectId } = props;

  const [date, setDate] = useState<'today' | 'week' | 'month'>('today');

  const [statistics, setStatistics] = useState<{
    problemCount: number;
    disposeCount: number;
    disposeRate: number;
  }>()

  const [eventTrend, setEventTrend] = useState<any>()

  const dateTabs = [
    {
      key: 'today',
      name: '今日',
    },
    {
      key: 'weekly',
      name: '本周',
    },
    {
      key: 'monthly',
      name: '本月',
    },
  ];
  const info = useMemo(() => {
    return [
      {
        name: '立案',
        value: statistics?.problemCount,
        unit: '件',
      },
      {
        name: '应结案',
        value: statistics?.problemCount,
        unit: '件',
      },
      {
        name: '已结案',
        value: statistics?.disposeCount,
        unit: '件',
      },
      {
        name: '结案率',
        value: statistics?.disposeRate,
        unit: '%',
      },
    ];
  }, [statistics])

  const chartOptions = useMemo(() => {
    return {
      ...option,
      xAxis: {
        ...option.xAxis,
        data: eventTrend?.trendList?.map(item => item.name) || [],
      },
      series: [
        {
          ...option.series[0],
          data: eventTrend?.trendList?.map(item => item.value) || [],
        },
      ],
    }
  }, [eventTrend]);


  const getStatistics = async (type: string = 'today') => {
    const params = {
      keyAreaId: objectId,
      dateType: type
    }
    const res = await services.Physicalsign.getNormalEventCountForKeyAreas(params)
    if (res.code === 200) {
      console.log('getStatistics', res.data)
      setStatistics(res.data)
    }
  }

  // 立案趋势
  const getEventTrend = async () => {
    const params = {
      keyAreaId: objectId,
    }
    const res = await services.Physicalsign.getNormalEventTrendForKeyAreas(params)
    if (res.code === 200) {
      console.log('getEventTrend', res.data)
      setEventTrend(res.data)
    }
  }


  useEffect(() => {
    getStatistics();
    getEventTrend()
  }, [objectId]);


  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);
                  getStatistics(item.key)
                }}
                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>
            {
              Number(eventTrend?.samePeriodRate) < 0 && (
                <CaretDownOutlined style={{ color: '#57ef58' }} />
              ) ||
              Number(eventTrend?.samePeriodRate) > 0 && (
                <CaretUpOutlined style={{ color: '#FF5858' }} />
              )
            }
            <span
              className={styles.compareNum}
              style={{ color: Number(eventTrend?.samePeriodRate) > 0 ? '#FF5858' : '#57ef58' }}
            >
              {eventTrend?.samePeriodRate}
            </span>
            <span>件</span>
          </Space>
        </Flex>
      </Flex>
      <div>
        <EChartsReact
          style={{ width: 562, height: 100 }}
          option={chartOptions}
        ></EChartsReact>
      </div>
      <Flex gap={100} style={{ margin: '24px 0' }}>
        <div style={{ width: 220 }}>
          <DescriptionItem
            direction="horizontal"
            name="委内疑难问题"
            value={0}
            unit="件"
          ></DescriptionItem>
        </div>
        <div style={{ width: 220 }}>
          <DescriptionItem
            direction="horizontal"
            name="委外疑难问题"
            value={0}
            unit="件"
          ></DescriptionItem>
        </div>
      </Flex>
      <BottomTab objectId={objectId} dateType={date}></BottomTab>
    </div>
  );
};

export default ProblemInfo;
