import EmptySpace from '@/components/EmptySpace';
import Chart from '@/components/PieChart/Chart';
import Tabs from '@/components/Tabs';
import services from '@/services';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex, Progress, Space } from 'antd';
import { memo, useEffect, useMemo, useState } from 'react';
import LineCharts from '../../components/IndLineCharts';
import Loading from '../../components/Loading';
import { useGlobalModalServices } from '../../provider';
import styles from './index.less';
import TimeLineCharts from './TimeLineCharts';
import TopSarch from './TopSarch';

const SanitationDisp = (props: any) => {
  const { time, industry } = props;
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { dispatch } = useGlobalModalServices();
  const [searchTime, setSearchTime] = useState({
    dateType: 'monthly',
  });
  const [areaKey, setAreaKey] = useState('all');
  const colors: string[] = [
    'rgb(255, 117, 203)',
    '#dfc1ae',
    '#8bd3ff',
    '#40fff2',
    '#73ed95',
    '#ccffb1',
    '#ffe07e',
    '#ff9369',
    '#c89594',
    '#f59cff',
    '#aa7dff',
  ];

  //objectId=5101&industry=02&dateType=custom&startTime=2024-11-01&endTime=2024-11-30
  const { data: staticData, loading: staticLoading } = useRequest(
    () =>
      services.Physicalsign.getDisposeOverallStatistics({
        objectId: areaId,
        industry: industry || '02',
        ...searchTime,
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  //高发类型
  const { data: highData, loading: highDataLodaing } = useRequest(
    () =>
      services.Physicalsign.getHighIncidenceTypes({
        objectId: areaId,
        industry: industry || '02',
        limit: '3',
        ...searchTime,
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  //高发区域
  const { data: highAreaData, loading: highAreaLoading } = useRequest(
    () =>
      services.Physicalsign.getHighIncidenceAreas({
        objectId: areaId,
        industry: industry || '02',
        limit: '3',
        highIncidenceType: 'quantity',
        ...searchTime,
        gridGroup: areaKey === 'all' ? undefined : areaKey,
      }),
    {
      refreshDeps: [searchTime, areaKey],
    },
  );

  //问题来源
  const { data: highSourceData, loading: highSourceLoading } = useRequest(
    () =>
      services.Physicalsign.getHighIncidenceSourceCount({
        objectId: areaId,
        industry: industry || '02',

        ...searchTime,
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  //高发时段
  const { data: highTimeData ,loading:highTimeLoading} = useRequest(
    () =>
      services.Physicalsign.getHighIncidenceTimeCount({
        objectId: areaId,
        industry: industry || '02',

        ...searchTime,
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const items = useMemo(() => {
    return [
      {
        key: '2',
        name: '处置中',
        count: staticData?.data?.toDisposeCount,
        unit: '件',
        status: '处置中',
        dueStatus: '0',
      },
      {
        key: '1',
        name: '超时',
        count: staticData?.data?.overtimeCount,
        unit: '件',
        status: undefined,
      },
      {
        key: '3',
        name: '已办结',
        count: staticData?.data?.disposeCount,
        status: '结案',
        unit: '件',
      },
      {
        key: '4',
        name: '办结率',
        count: staticData?.data?.disposeRate,
        status: undefined,

        unit: '%',
      },
    ];
  }, [staticData]);

  useEffect(() => {
    props.modalDispatch.setOptions({
      headerLeft: () => {
        return (
          <TopSarch
            defaultKey={searchTime.dateType}
            onChange={(e) => {
              console.log(e);
              setSearchTime(e);
            }}
          />
        );
      },
    });
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.leftWarp}>
        <div
          className={styles.dispose}
          onClick={() => {
            dispatch.push('SanitationEvent', {
              props: {
                searchTime,
                industry: industry,
              },
            });
          }}
          style={{ cursor: 'pointer' }}
        >
          <div className={styles.title} style={{ marginBottom: 10 }}>
            <div className={styles.tLeft}>
              <span>立案问题总数</span>
              <span className={styles.count}>
                {staticData?.data?.industryTotalCount ?? '--'}
              </span>
              <span>件</span>
            </div>
            <div className={styles.tRignt}>
              <span>环比</span>
              {staticData?.data?.sequentialChangeRate ? (
                <span>
                  {staticData?.data?.sequentialChangeRate > 0 ? (
                    <CaretUpOutlined style={{ color: 'red' }} />
                  ) : (
                    <CaretDownOutlined style={{ color: 'rgb(29, 187, 138)' }} />
                  )}
                </span>
              ) : null}
              <span
                className={styles.count}
                style={{
                  color:
                    staticData?.data?.sequentialChangeRate > 0
                      ? 'red'
                      : 'rgb(29, 187, 138)',
                }}
              >
                {Math.abs(staticData?.data?.sequentialChangeRate ?? 0)}
              </span>
              <span>%</span>
            </div>
          </div>
          <Loading loading={staticLoading}>
            <>
              {staticData?.data?.trendList?.length ? (
                <LineCharts
                  data={staticData?.data?.trendList || []}
                  style={{ width: 580, height: 80 }}
                />
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>

        <div className={styles.issueSource}>
          <div className={styles.title}>
            <span>主要问题来源</span>
          </div>
          <Loading loading={highSourceLoading}>
            <>
              {highSourceData?.data?.length ? (
                <div className={styles.content}>
                  <div>
                    {highSourceData?.data?.length ? (
                      <Chart
                        style={{ width: 130, height: 130 }}
                        data={highSourceData?.data?.map((item:any) => ({
                          ...item,
                          value: item?.count,
                        }))}
                        color={colors}
                      />
                    ) : null}
                  </div>
                  <div className={styles.cardWarp}>
                    {highSourceData?.data?.map((item:any, index:number) => {
                      return (
                        <div className={styles.card} key={index}>
                          <div
                            className={styles.dot}
                            style={{ background: colors[index] }}
                          ></div>
                          <div className={styles.cont}>
                            <div className={styles.name} title={item?.ly}>
                              {item?.name}
                            </div>
                            <div style={{ marginTop: 8 }}>
                              <span>
                                <span className={styles.count}>
                                  {item?.count}
                                </span>
                                <span>件</span>
                              </span>
                              <span>
                                <span className={styles.count}>
                                  {' '}
                                  {item?.rate}
                                </span>

                                <span>%</span>
                              </span>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>

        <div className={styles.areaTop3}>
          <div className={styles.title}>高发类型TOP3</div>
          <Loading loading={highDataLodaing}>
            <>
              {highData?.data?.length ? (
                <div className={styles.content}>
                  {highData?.data?.map((item:any, index:number) => {
                    return (
                      <div
                        className={styles.litsItem}
                        key={index}
                        style={{ cursor: 'pointer' }}
                        onClick={() => {
                          dispatch.push('SanitationEvent', {
                            title: `${item.name}问题列表`,
                            props: {
                              searchTime,
                              industry: industry,
                              highIncidenceTypeId: item?.id,
                            },
                          });
                        }}
                      >
                        <Flex justify="space-between">
                          <div className={styles.name}>{item.name}</div>
                          <Space size={10} className={styles.numBox}>
                            <div className={styles.num}>
                              <span>{item?.count}</span>
                              <span>件</span>
                            </div>
                            <div className={styles.num}>
                              <span>{item?.rate}</span>
                              <span>%</span>
                            </div>
                          </Space>
                        </Flex>

                        <Progress
                          size={{ height: 15 }}
                          percent={item?.rate}
                          showInfo={false}
                          strokeColor={{ from: '#00B9FF', to: '#79FFD1' }}
                          status="active"
                        />
                      </div>
                    );
                  })}
                </div>
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>
      </div>
      <div className={styles.rightWarp}>
        <div className={styles.infoWarp}>
          {items?.map((item) => {
            return (
              <div
                key={item.key}
                className={styles.items}
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  dispatch.push('SanitationEvent', {
                    props: {
                      searchTime,
                      status: item?.status,
                      dueStatus: item?.dueStatus,
                      industry: industry,
                    },
                  });
                }}
              >
                <span className={styles.name}>{item?.name}</span>
                <div>
                  <span className={styles.count}>{item?.count}</span>
                  <span className={styles.unit}>{item?.unit}</span>
                </div>
              </div>
            );
          })}
        </div>
        <div className={styles.timeLineWarp}>
          <div className={styles.title}>高发时段分析</div>
          <Loading loading={highTimeLoading}>
            <>
              {highTimeData?.data?.length ? (
                <TimeLineCharts
                  data={highTimeData?.data}
                  style={{ width: 560, height: 180 }}
                />
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>
        <div className={styles.dispAreaTop5}>
          <div className={styles.title}>
            <span>高发区域TOP3</span>
            <Tabs
              style={{
                background: 'transparent',
                height: '30px',
              }}
              itemStyle={{
                borderRadius: '25px',
                background: 'rgba(7, 50, 93, 0.8)',
                fontSize: '16px',
                marginLeft: 8,
              }}
              onChange={(e) => {
                setAreaKey(e);
              }}
              itemkey={'key'}
              items={[
                {
                  key: 'all',
                  label: '全部',
                },
                {
                  key: '1',
                  label: '5+2城区',
                },
                {
                  key: '2',
                  label: '其他城区',
                },
              ]}
            />
          </div>
          <Loading loading={highAreaLoading}>
            <>
              {highAreaData?.data?.length ? (
                <div className={styles.content}>
                  {highAreaData?.data?.map((item:any, index:number) => {
                    return (
                      <div
                        className={styles.litsItem}
                        key={index}
                        onClick={() => {
                          console.log(industry);

                          dispatch.push('SanitationEvent', {
                            title: `${item.name}问题列表`,
                            props: {
                              searchTime,
                              industry: industry,
                              objectId: item?.id,
                            },
                          });
                        }}
                        style={{ cursor: 'pointer' }}
                      >
                        <Flex justify="space-between">
                          <div className={styles.name}>{item.name}</div>
                          <Space size={10} className={styles.numBox}>
                            <div className={styles.num}>
                              <span>{item?.count}</span>
                              <span>件</span>
                            </div>
                            <div className={styles.num}>
                              <span>{item?.rate}</span>
                              <span>%</span>
                            </div>
                          </Space>
                        </Flex>

                        <Progress
                          size={{ height: 15 }}
                          percent={item?.rate}
                          showInfo={false}
                          strokeColor={{ from: '#00B9FF', to: '#79FFD1' }}
                          status="active"
                        />
                      </div>
                    );
                  })}
                </div>
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>
      </div>
    </div>
  );
};
export default memo(SanitationDisp);
