import { Flex } from 'antd';
import dayjs from 'dayjs';
import { memo, useEffect, useMemo, useState } from 'react';

import TopSarch from '../../components/TopSarch';

import PieChart from '@/components/PieChart';
import services from '@/services';
import { useRequest } from 'ahooks';
import BaseCard from '../../components/BaseCard';
import styles from './index.less';
import Info from './Info';
import Trend from './Trend';

import Loading from '../../components/Loading';
import NumTop5 from './NumTop5';
import Top5 from './Top5';
/**中心城区 */
export const zxcq = [
  '新都区',
  '锦江区',
  '龙泉驿区',
  '金牛区',
  '武侯区',
  '温江区',
  '青白江区',
  '新津区',
  '成华区',
  '双流区',
  '青羊区',
  '郫都区',
];
/**城市新区 */
export const csxq = ['高新区', '天府新区', '东部新区'];
/**郊区新城 */
export const jqxc = [
  '简阳市',
  '都江堰市',
  '彭州市',
  '邛崃市',
  '崇州市',
  '金堂县',
  '大邑县',
  '蒲江县',
];

/**行政处罚modal */
const AdministPunish = (props: any) => {
  const { modalDispatch } = props;

  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: fkjezs } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-fkjezs',
        params: {
          ...searchTime,
        },
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  //总体统计
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-fkjezs',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res.data.data.records[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  //程序类型
  const { data: cxType, loading: compLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-bllxsl',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res.data.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  const pieData = useMemo(() => {
    return cxType?.map((item) => {
      return {
        name: item.cflb,
        value: item.num,
        percent: (
          (item.num / fkjezs?.data?.data?.records?.[0].cfsl) *
          100
        ).toFixed(2),
      };
    });
  }, [fkjezs, cxType]);

  useEffect(() => {
    modalDispatch.setOptions({
      headerLeft: () => {
        return (
          <TopSarch
            defaultKey={searchTime.key}
            items={[
              {
                key: 'lastMonth',
                label: '上月',
              },
              {
                key: 'year',
                label: '本年',
              },
            ]}
            onChange={(e) => {
              setSearchTime(e);
            }}
          />
        );
      },
    });
  }, []);
  return (
    <div className={styles.container}>
      <Flex gap={25}>
        <Info modalDispatch={modalDispatch} searchTime={searchTime}></Info>
        <Trend searchTime={searchTime}></Trend>
      </Flex>
      <Flex gap={25} style={{ marginTop: 20 }}>
        <Top5
          modalDispatch={modalDispatch}
          searchTime={searchTime}
          total={data?.cfsl ?? 0}
        ></Top5>
        <NumTop5
          modalDispatch={modalDispatch}
          searchTime={searchTime}
          total={data?.cfsl ?? 0}
        ></NumTop5>
        <BaseCard w={457} h={430} title="程序类型">
          <Loading loading={compLoading}>
            <Flex
              style={{ width: '100%', height: '100%' }}
              align="center"
              justify="center"
            >
              <PieChart
                style={{ width: '100%', flexDirection: 'column' }}
                chartStyle={{ width: 180, height: 180 }}
                labelClassName={styles.labelClassName}
                // labelStyle={{ height: 175, overflow: 'auto', width: 293 }}
                data={pieData || []}
                labelStyle={{ maxWidth: 100 }}
                color={['#ff9b5d', '#ffe335']}
              />
            </Flex>
          </Loading>
        </BaseCard>
      </Flex>
    </div>
  );
};
export default memo(AdministPunish);
