import Modal from '@/components/HncyModal';
import Tabs from '@/components/Tabs';
import ToggleView from '@/components/ToggleView';
import { eventList } from '@/mock/event';
import BaseCard from '@/pages/Common/components/BaseCard';
import EventPicList from '@/pages/Common/components/EventPicList';
import ListView from '@/pages/Common/components/ListView';
import ProcessCard from '@/pages/Common/components/ProcessCard';
import EventDetail from '@/pages/Common/Event/EventDetail';
import services from '@/services';
import { CaretDownOutlined } from '@ant-design/icons';
import { Flex, Select, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
import LineCharts from './LineCharts';

const GeneralSituation = () => {
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });

  const [caseSourceOptions, setCaseSourceOptions] = useState<any>([])
  const [eventStatistics, setEventStatistics] = useState<any>({})
  const [categoryStatistics, setCategoryStatistics] = useState([])
  const [areaStatistics, setAreaStatistics] = useState([])
  const [statusOptions, setStatusOptions] = useState([])
  const [eventTypeOptions, setEventTypeOptions] = useState([])
  const [sourceSystemCode, setSourceSystemCode] = useState("")
  const [eventStatus, setEventStatus] = useState("")
  const [eventType, setEventType] = useState("")

  // 视图
  const [viewType, setViewType] = useState<'list' | 'pic'>('pic'); //展示

  const params = {
    page: 1,
    count: 10,
    caseStatus: '',
    eventType: '',
    isDispose: '1',
  };

  //事件列表
  const [listData, setListData] = useState<any>({
    items: eventList,
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });

  const [fetchParams, setFetchParams] = useState<any>(params);

  const changeListTab = () => {};

  



  // 获取数据来源 筛选项
  const getSourceOptions = () => {
    services.CityProblemApi.getCaseSourceTypeList().then((res) => {
      if (res.code === 200) {
        console.log(res.data)
        setCaseSourceOptions([{ sourceName: '全部来源', sourceCode: '' }, ...res.data])
      }
    });
  };

  // 筛选项 状态
  const getCaseStatusList = () => {
    services.CityProblemApi.getCaseStatusListApi().then((res) => {
      if (res.code === 200) {
        setStatusOptions(res.data);
      }
    });
  };

  // 筛选项 事件类型
  const getEventTypeList = () => {
    services.CityProblemApi.getEventTypeListApi().then((res) => {
      if (res.code === 200) {
        setEventTypeOptions(res.data);
      }
    });
  };

  // 获取左侧顶部事件相关统计
  const getCityStatistics = () => {
    const params = {
      eventType: '',
      type: '',
      time: '',
      sourceSystemCode: sourceSystemCode
    }
    services.CityProblemApi.getContentStatisticsApi(params).then(res => {
      if (res.code === 200) {
        setEventStatistics(res.data);
      }
    });
  };

  // 高发类别统计
  const getCategoryAnalysis = (category = 'mainClass') => {
    const params = {
      category: category,
      type: '',
      time: '',
      sourceSystemCode: sourceSystemCode
    }
    services.CityProblemApi.getCategoryAnalysisApi(params).then(res => {
      if (res.code === 200) {
        setCategoryStatistics(res.data);
      }
    });
  };

  const onChangeCategory = (value: string) => {
    getCategoryAnalysis(value)
  }

  // 高发类别统计
  const getAreaAnalysis = () => {
    const params = {
      region: 'district',
      type: '',
      time: '',
      sourceSystemCode: sourceSystemCode
    }
    services.CityProblemApi.getAreaAnalysisApi(params).then(res => {
      if (res.code === 200) {
        setAreaStatistics(res.data);
      }
    });
  };

  // 获取事件列表
  const getEventsList = () => {
    const params = {
      page: 1,
      count: 10,
      sourceSystemCode: sourceSystemCode,
      caseStatus: eventStatus,
      eventType: eventType
    }
    services.CityProblemApi.getZzEventListApi(params).then((res) => {
      if (res.code === 200) {
        setListData({ ...res.data, items: res.data.items })
      }
    });
  };

  useEffect(() => {
    getEventsList()
  }, [sourceSystemCode,eventStatus, eventType])


  useEffect(() => {
    getSourceOptions()
    getCityStatistics()
    getCategoryAnalysis()
    getAreaAnalysis()
    getCaseStatusList()
    getEventTypeList()
    getEventsList()
  }, [sourceSystemCode])

  return (
    <Flex gap={30} className={styles.wrap}>
      <div className={styles.searchBox}>
        <Select
          options={caseSourceOptions}
          style={{ width: '150px' }}
          placeholder="全部来源"
          suffixIcon={
            <CaretDownOutlined style={{ fontSize: 20, color: '#fff' }} />
          }
          fieldNames={{
            label: 'sourceName',
            value: 'sourceCode',
          }}
          onChange={(value) => setSourceSystemCode(value)}
        />
      </div>

      <Space direction="vertical" size={15} className={styles.left}>
        <BaseCard
          style={{
            paddingTop: 15,
          }}
        >
          <Flex justify="space-between" className={styles.top}>
            <span>
              <span>总计</span>
              <span className={styles.num}>{eventStatistics.total}</span>
              <span>件</span>
            </span>
            <span>
              <span>自闭环</span>
              <span className={styles.num}>{eventStatistics.bTotal}</span>
              <span>件</span>
            </span>
            <span>
              <span>提级事件</span>
              <span className={styles.num}>{eventStatistics.promotionNum}</span>
              <span>件</span>
            </span>
          </Flex>

          <Flex
            justify="space-between"
            className={styles.top}
            style={{
              background: 'rgba(57, 122, 183, 0.2)',
              borderRadius: '20px',
              padding: '10px 15px',
            }}
          >
            <span>
              <span>处置中</span>
              <span className={styles.num} style={{ fontSize: '24px' }}>
                {eventStatistics.disposalNum}
              </span>
              <span>件</span>
            </span>
            <span>
              <span>已办结</span>
              <span className={styles.num} style={{ fontSize: '24px' }}>
                {eventStatistics.caseClosedNum}
              </span>
              <span>件</span>
            </span>
            <span>
              <span>办结率</span>
              <span className={styles.num} style={{ fontSize: '24px' }}>
                {eventStatistics.ratio}
              </span>
              <span>%</span>
            </span>
          </Flex>
        </BaseCard>

        <BaseCard
          title="趋势（近30天）"
          style={{
            paddingTop: 20,
          }}
        >
          <div style={{ padding: '15px', width: '100%', height: '100%' }}>
            <LineCharts data={eventStatistics.lately} />
          </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={onChangeCategory}
              itemkey={'key'}
              items={[
                {
                  key: 'mainClass',
                  label: '大类'
                },
                {
                  key: 'subClass',
                  label: '小类'
                },
                {
                  key: 'subdivisionClass',
                  label: '细类'
                }
              ]}
            />
          }
          data={categoryStatistics}
          strokeColor={{
            '0%': '#38F2E3',
            '100%': '#3DC3FF',
          }}
        />

        <ProcessCard
          title="高发区域"
          data={areaStatistics}
          strokeColor={{
            '0%': '#FFCCCC',
            '100%': '#EEFFEB',
          }}
        />
      </Space>
      <div className={styles.right}>
        <Flex justify="flex-end" style={{ marginBottom: 20 }}>
          <Space size={20}>
            <Space size={10}>
              <Select
                options={statusOptions}
                style={{ width: '150px', height: 40 }}
                placeholder="全部状态"
                fieldNames={{ label: 'name', value: 'value' }}
                onChange={(value) => setEventStatus(value)}
                allowClear
              />
              <Select
                options={eventTypeOptions}
                style={{ width: '200px', height: 40 }}
                placeholder="全部事件类型"
                fieldNames={{ label: 'name', value: 'value' }}
                onChange={(value) => setEventType(value)}
                allowClear
              />
            </Space>
            <ToggleView type={viewType} setType={(type) => setViewType(type)} />
          </Space>
        </Flex>
        {viewType === 'list' ? (
          <ListView
            listData={listData}
            listHeight={540}
            setParams={(data) => {
              setFetchParams({
                ...fetchParams,
                page: data.pageNum,
                count: data.pageSize,
              });
            }}
            handleDetail={(details) => {
              setDetailModalOpt({ open: true, title: '事件详情', eventId: details.eventId })
            }}
          />
        ) : (
          <EventPicList
            listData={listData}
            listHeight={640}
            setParams={(data) => {
              setFetchParams({ ...fetchParams, page: data.page });
            }}
            handleDetail={(details) => {
              setDetailModalOpt({
                open: true,
                title: '事件详情',
                eventId: details.eventId,
              });
            }}
          />
        )}
      </div>

      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() => setDetailModalOpt({ open: false, title: '', eventId: '' })}
        width={1160}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </Flex>
  );
};

export default GeneralSituation;
