import { Flex, Space } from 'antd'
import styles from './index.less'
import IssueDescription from '@/pages/Common/components/IssueDescription'
import EventPicList from '@/pages/Common/components/EventPicList'
import ProcessCard from '@/pages/Common/components/ProcessCard'
import BaseCard from '@/pages/Common/components/BaseCard'
import LineCharts from './LineCharts'
import Tabs from '@/components/Tabs';
import { eventList } from '@/mock/event'
import { useEffect, useMemo, useState } from 'react'
import services from '@/services'

interface RiskEventsProps {
  statisticsData: any;
  defaultCategory: string
}

const RiskEvents = (props: RiskEventsProps) => {
  const { statisticsData, defaultCategory } = props;

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

  const categoryTab = useMemo(() => {
    return [
      {
        key: '0',
        label: `全部风险 ${statisticsData?.total} 个`
      },
      {
        key: '1',
        label: `红色风险 ${statisticsData?.majorRiskTotal} 个`
      },
      {
        key: '2',
        label: `橙色风险 ${statisticsData?.significantRiskTotal} 个`
      },
      {
        key: '3',
        label: `黄色风险 ${statisticsData?.generalRiskTotal} 个`
      },
      {
        key: '4',
        label: `一般风险 ${statisticsData?.ybfxRiskTotal} 个`
      }
    ]
  }, [statisticsData])

  useEffect(() => {
    services.CityRiskApi.querySafetyRiskEventPage({
      page: 1,
      count: 10
    }).then((res) => {
      if (res.code === 200) {
        setListData({ ...res.data, items: res.data.items })
      }
    })
  }, [])

  const changeListTab = () => {

  }

  const onChangeCategory = () => {

  }

  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 category = [
    {
      name: '类别一',
      progress: 50,
      value: 300,
      rate: 30.6
    },
    {
      name: '类别二',
      progress: 50,
      value: 300,
      rate: 30.6
    },
    {
      name: '类别三',
      progress: 50,
      value: 300,
      rate: 30.6
    }
  ]

  return (
    <Flex gap={30} className={styles.wrap}>

      <div className={styles.more}>
        进入“安全一张图”查看更多
      </div>

      <Space direction='vertical' size={25} className={styles.left}>

        <BaseCard
          title='风险预警趋势(近30天)'
          style={{
            height: 304,
            paddingTop: 20
          }}
        >
          <div style={{ padding: '15px' }}>
            <LineCharts />
          </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: '1',
                  label: '大类'
                },
                {
                  key: '2',
                  label: '小类'
                },
                {
                  key: '3',
                  label: '细类'
                }
              ]}
            />
          }
          data={category}
          strokeColor={{
            '0%': '#38F2E3',
            '100%': '#3DC3FF',
          }}
        />

        <ProcessCard
          title='高发区域'
          data={areas}
          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
          listData={listData}
          listHeight={640}
          setParams={(data) => {
            // setFetchParams({ ...fetchParams, page: data.page })
          }}
        />
      </div>
    </Flex>
  )
}

export default RiskEvents;