import { Flex, Space } from 'antd';
import styles from './index.less';

import Modal from '@/components/HncyModal';
import Tabs from '@/components/Tabs';
import BaseCard from '@/pages/Common/components/BaseCard';
import ProcessCard from '@/pages/Common/components/ProcessCard';
import BaseInfo from '@/pages/SecurityServiceOverview/components/BaseInfo';
import EventPicList from '@/pages/SecurityServiceOverview/components/EventPicList';
import { colorConfig } from '@/pages/SecurityServiceOverview/SecurityState/RightLayout/RiskNotice';
import services from '@/services';
import { history } from '@umijs/max';
import { useRequest } from 'ahooks';
import { useMemo, useRef, useState } from 'react';
import LineCharts from './LineCharts';
interface RiskEventsProps {
  statisticsData: any;
  defaultCategory: string;
}

const RiskEvents = (props: RiskEventsProps) => {
  const { statisticsData, defaultCategory } = props;
  const ref = useRef();
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });
  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  const [fetchParams, setFetchParams] = useState<any>({
    page: 1,
    count: 10,
    riskLevelCode: defaultCategory,
    dateType: 'month',
  });
  const categoryTab = useMemo(() => {
    return [
      {
        key: 'all',
        label: `全部风险 ${statisticsData?.total} 个`,
      },
      {
        key: '红色风险',
        label: `红色风险 ${statisticsData?.majorRiskTotal} 个`,
      },
      {
        key: '橙色风险',
        label: `橙色风险 ${statisticsData?.significantRiskTotal} 个`,
      },
      {
        key: '黄色风险',
        label: `黄色风险 ${statisticsData?.generalRiskTotal} 个`,
      },
      {
        key: '一般风险',
        label: `一般风险 ${statisticsData?.ybfxRiskTotal} 个`,
      },
    ];
  }, [statisticsData]);
  //事件列表
  const { data: eventData } = useRequest(
    () => services.CityRiskApi.getEventPage(fetchParams),
    {
      refreshDeps: [fetchParams],
      onSuccess: (res) => {
        setListData({
          ...res?.data,
          items: [
            ...listData.items,
            ...res?.data?.items?.map((item: any) => ({
              ...item,
              standardEventTitle: item?.eventType,
              caseStatusText: item?.currentStatus,
              reportTime: item?.warningTime,
              collectionModeName: item?.sourceType,
            })),
          ],
        });
      },
    },
  );
  //三十天态势
  const { data: monthLine } = useRequest(
    services.CityRiskApi.getStatisticalMonth,
  );

  //类别
  const { data: typeData } = useRequest(
    services.CityRiskApi.getStatisticalType,
    
  );
  //区域
  const { data: areaData } = useRequest(
    services.CityRiskApi.getStatisticalAreae,
  );


  const onChangeCategory = (e) => {
    setListData({
      items: [],
      loading: true,
      total: 0,
      page: 1,
      hasNext: false,
    });
    ref?.current?.resPage();
    setFetchParams({
      ...fetchParams,
      page: 1,
      riskLevelCode: e !== 'all' ? e : undefined,
    });
  };

  const areas = [
    {
      name: '高新区',
      progress: 50,
      value: 300,
      rate: 30.6,
    },
    {
      name: '新都区',
      progress: 50,
      value: 300,
      rate: 30.6,
    },
    {
      name: '龙泉驿区',
      progress: 50,
      value: 300,
      rate: 30.6,
    },
  ];

  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.eventType}</div>
        <span
          className={styles.tag}
          style={{
            backgroundImage: `url(${
              colorConfig[detailModalOpt?.riskLevelName]?.bg
            })`,
            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
          }}
        >
          {detailModalOpt?.riskLevelName}
        </span>
        <span className={styles.type}>{detailModalOpt?.position}</span>
      </Flex>
    );
  };
  return (
    <Flex gap={30} className={styles.wrap}>
      <div
        className={styles.more}
        onClick={() => {
          history.push('/securityServiceOverview');
        }}
      >
        进入“安全一张图”查看更多
      </div>

      <Space direction="vertical" size={25} className={styles.left}>
        <BaseCard
          title="风险预警趋势(近30天)"
          style={{
            height: 304,
            paddingTop: 20,
          }}
        >
          <div style={{ padding: '15px' }}>
            <LineCharts
              data={
                monthLine?.data?.ybLevelList?.map((item) => ({
                  name: item?.event_date,
                  value: item?.event_count,
                })) || []
              }
            />
          </div>
        </BaseCard>

        <ProcessCard
          title="高发类别"
          // extra={
          //   <Tabs
          //     style={{
          //       background: 'transparent',
          //       height: '30px',
          //     }}
          //     itemStyle={{
          //       borderRadius: '25px',
          //       background: 'rgba(7, 50, 93, 0.8)',
          //       fontSize: '16px',
          //       marginLeft: 8,
          //     }}
          //     onChange={(e) => {
          //       getTypeData({ type: e });
          //     }}
          //     itemkey={'key'}
          //     items={[
          //       {
          //         key: '0',
          //         label: '大类',
          //       },
          //       {
          //         key: '1',
          //         label: '小类',
          //       },
          //       {
          //         key: '2',
          //         label: '细类',
          //       },
          //     ]}
          //   />
          // }
          data={
            typeData?.data?.map((item) => {
              return {
                ...item,
                percent: (Number(item?.total) / Number(statisticsData?.total))?.toFixed(2),
                value: item?.total
              };
            }) || []
          }
          strokeColor={{
            '0%': '#38F2E3',
            '100%': '#3DC3FF',
          }}
        />

        <ProcessCard
          title="高发区域"
          data={
            areaData?.data?.map((item) => ({
              ...item,
              name: item?.areaName,
              percent: (Number(item?.total) / Number(statisticsData?.total))?.toFixed(2),
              value: item?.total
            })) || []
          }
          strokeColor={{
            '0%': '#FFCCCC',
            '100%': '#EEFFEB',
          }}
        />
      </Space>
      <div className={styles.right}>
        <div style={{ marginBottom: 20 }}>
          <Tabs
            style={{
              background: 'transparent',
              height: '50px',
            }}
            itemStyle={{
              borderRadius: '25px',
              background: 'rgba(7, 50, 93, 0.8)',
              fontSize: '20px',
              marginLeft: 8,
            }}
            onChange={onChangeCategory}
            itemkey={'key'}
            defaultValue={defaultCategory}
            items={categoryTab}
          />
        </div>
        <EventPicList
          ref={ref}
          listData={listData}
          listHeight={630}
          setParams={(data) => {
            console.log(data);

            setFetchParams({ ...fetchParams, page: data.current.page });
          }}
          handleDetail={(details) => {
            setDetailModalOpt({
              open: true,
              eventId: details?.asriskId,
              ...details,
            });
          }}
        />
        {/* 事件详情 */}
        <Modal
          open={detailModalOpt?.open}
          titleRender={titleRender}
          onCancel={() => {
            setDetailModalOpt({
              open: false,
              title: '事件详情',
              eventId: '',
            });
          }}
          width={2600}
          height={740}
        >
          {detailModalOpt?.open && (
            <BaseInfo
              eventId={detailModalOpt?.eventId}
              detail={detailModalOpt}
              onChangeOpt={(val) => {
                console.log(val);

                setDetailModalOpt({
                  ...detailModalOpt,
                  position: val?.position,
                  eventType: val?.event_type,
                  riskLevelName: val?.risklevel,
                });
              }}
            />
          )}
        </Modal>
      </div>
    </Flex>
  );
};

export default RiskEvents;
