import EmptySpace from '@/components/EmptySpace';
import Tabs from '@/components/Tabs';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Progress, Space } from 'antd';
import dayjs from 'dayjs';
import { memo, useEffect, useMemo, useState } from 'react';
import LineCharts from '../../components/IndLineCharts';
import TopSarch from '../../components/TopSarch';
import { useGlobalModalServices } from '../../provider';

import Loading from '../../components/Loading';
import { csxq, jqxc, zxcq } from '../AdministPunish/NumTop5';
import styles from './index.less';


/**行政处罚modal */
const AreaSynergy = (props: any) => {
  const { dispatch } = useGlobalModalServices();
  const [areaKey, setAreaKey] = useState('all');
  const [searchTime, setSearchTime] = useState({
   key: 'lastMonth',
       startTime: dayjs()
         .subtract(1, 'month')
         .startOf('month')
         .format('YYYY-MM-DD'),
       endTime: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
  });

  //处罚趋势
  const { data: cfqsMonth, loading: trendLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-sqxt-sjtj',
        params: {
          ...searchTime,
          dateformat: 'yyyy-MM-dd',
        },
      }),
    {
      refreshDeps: [searchTime],
      // ready: searchTime.key === 'month',
    },
  );

  // const qsList = useMemo(() => {
  //   console.log(cfqsYear);
  //   if (searchTime.key === 'year') {
  //     return cfqsYear?.data?.data?.records?.map((item) => ({
  //       name: item?.month,
  //       value: item?.num,
  //     }));
  //   } else {
  //     return cfqsMonth?.data?.data?.records?.map((item) => ({
  //       name: item?.month,
  //       value: item?.num,
  //     }));
  //   }
  // }, [cfqsYear, cfqsMonth, searchTime]);

  const { data: asjsltj } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-sqxt-asjsltj',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        console.log(res);
        
        if (res.code === 200) {
          return res.data.data.records;
        }
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const items = useMemo(() => {
    console.log(asjsltj);
    
    return [
      {
        key: '2',
        name: '处置中',
        count: '0',
        unit: '件',
      },
      {
        key: '1',
        name: '超时',
        count: asjsltj?.find((item: any) => item.title === '超时')?.num,
        unit: '件',
        isOverdue: '超时',
      },
      {
        key: '3',
        name: '已办结',
        count: asjsltj?.find((item: any) => item.title === '总数')?.num,
        unit: '件',
      },
      {
        key: '3',
        name: '超期率',
        isOverdue: '超时',
        count: asjsltj
          ? (
              (asjsltj?.find((item: any) => item.title === '超时')?.num /
                asjsltj?.find((item: any) => item.title === '总数')?.num) *
              100
            ).toFixed(2)
          : 0,
        unit: '%',
      },
    ];
  }, [asjsltj]);

  const total = useMemo(() => {
    return asjsltj?.find(
      (item: any) => item.title === '总数',
    )?.num;
  }, [asjsltj]);
  //高发类别top5
  const { data: aflb, loading: higtLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-sqxt-awtmsfl',
        params: {
          ...searchTime,
        },
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  const gflbList = useMemo(() => {
    const list = aflb?.data?.data?.records?.slice(0, 5);

    return list?.map((item) => ({
      ...item,
      percent: total ? ((item?.num / total) * 100).toFixed(2) : 0,
    }));
  }, [aflb, total]);
  //处置区域top5
  const { data: qysl, loading: areaLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-sqxt-aqyfl',
        params: {
          ...searchTime,
        },
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const baList = useMemo(() => {
    let list;
    if (areaKey === 'all') {
      list = qysl?.data?.data?.records?.slice(0, 5);
    }
    if (areaKey === 'zx') {
      list = qysl?.data?.data?.records
        ?.filter((item) => zxcq.includes(item?.title))
        ?.slice(0, 5);
    }
    if (areaKey === 'xc') {
      list = qysl?.data?.data?.records
        ?.filter((item) => csxq.includes(item?.title))
        ?.slice(0, 5);
    }
    if (areaKey === 'jq') {
      list = qysl?.data?.data?.records
        ?.filter((item) => jqxc.includes(item?.title))
        ?.slice(0, 5);
    }

    return list?.map((item) => ({
      ...item,
      percent: total ? ((item?.num / total) * 100).toFixed(2) : 0,
    }));
  }, [qysl, areaKey, total]);

  useEffect(() => {
    props.modalDispatch.setOptions({
      headerLeft: () => {
        return (
          <TopSarch
            defaultKey={searchTime.key}
            items={[
              {
                key: 'lastMonth',
                label: '上月',
              },
              {
                key: 'year',
                label: '本年',
              },
            ]}
            onChange={(e) => {
              console.log(e);
              setSearchTime(e);
            }}
          />
        );
      },
    });
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.leftWarp}>
        <div className={styles.dispose} onClick={() => {}}>
          <div className={styles.title}>
            <div
              className={styles.tLeft}
              style={{ cursor: 'pointer' }}
              onClick={() => {
                dispatch.push('AreaSynergyList', {
                  title: `市区协调处置事件列表`,
                  props: {
                    searchTime,
                  },
                });
              }}
            >
              <span>协同处置事件总数</span>
              <span className={styles.count}>{total}</span>
              <span>件</span>
            </div>
            <div className={styles.tRignt}></div>
          </div>
          <Loading loading={trendLoading}>
            <>
              {cfqsMonth?.data?.data?.records?.length ? (
                <LineCharts
                  data={cfqsMonth?.data?.data?.records?.map((item) => ({
                    name: item?.title,
                    value: item?.num,
                  }))}
                  style={{ width: 525, height: 80, marginTop: 16 }}
                />
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>

        <div className={styles.scoreType}>
          <div className={styles.title}>
            <span>高发类型TOP5</span>
          </div>
          <Loading loading={higtLoading}>
            <>
              {gflbList?.length ? (
                <div className={styles.content}>
                  {gflbList?.map((item: any, index: number) => {
                    return (
                      <div
                        className={styles.litsItem}
                        key={index}
                        style={{ cursor: 'pointer' }}
                        onClick={() => {
                          dispatch.push('AreaSynergyList', {
                            title: `${item.title}市区协调处置事件列表`,
                            props: {
                              searchTime,
                              eventType: item?.title,
                            },
                          });
                        }}
                      >
                        <Flex justify="space-between">
                          <div className={styles.name}>{item?.title}</div>
                          <Space size={10} className={styles.numBox}>
                            <div className={styles.num}>
                              <span>{item?.num}</span>
                              <span>件</span>
                            </div>
                            <div className={styles.num}>
                              <span>{Number(item?.percent ?? 0)}</span>
                              <span>%</span>
                            </div>
                          </Space>
                        </Flex>

                        <Progress
                          size={{ height: 15 }}
                          percent={item?.percent}
                          showInfo={false}
                          strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
                          status="active"
                        />
                      </div>
                    );
                  })}
                </div>
              ) : (
                <EmptySpace />
              )}
            </>
          </Loading>
        </div>
      </div>
      <div className={styles.rightWarp}>
        <div className={styles.infoWarp}>
          {items?.map((item) => {
            return (
              <div
                style={{ cursor: 'pointer' }}
                key={item.key}
                className={styles.items}
                onClick={() => {
                  dispatch.push('AreaSynergyList', {
                    title: `${item.name}市区协调处置事件列表`,
                    props: {
                      searchTime,
                      isOverdue: item?.isOverdue,
                    },
                  });
                }}
              >
                <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.dispAreaTop5}>
          <div className={styles.title}>
            <span>处置区域数量TOP5</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: 'xc',
                  label: '城市新区',
                },
                {
                  key: 'zx',
                  label: '中心城区',
                },
                {
                  key: 'jq',
                  label: '县市新区',
                },
              ]}
            />
          </div>
          <Loading loading={areaLoading}>
            <>
              {baList?.length ? (
                <div className={styles.content}>
                  {baList?.map((item, index) => {
                    return (
                      <div
                        style={{ cursor: 'pointer' }}
                        className={styles.litsItem}
                        key={index}
                        onClick={() => {
                          dispatch.push('AreaSynergyList', {
                            title: `${item.title}市区协调处置事件列表`,
                            props: {
                              searchTime,
                              areaName: item.title,
                            },
                          });
                        }}
                      >
                        <Flex justify="space-between">
                          <div className={styles.name}>{item?.title}</div>
                          <Space size={10} className={styles.numBox}>
                            <div className={styles.num}>
                              <span>{item?.num}</span>
                              <span>件</span>
                            </div>
                            <div className={styles.num}>
                              <span>{Number(item?.percent ?? 0)}</span>
                              <span>%</span>
                            </div>
                          </Space>
                        </Flex>

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