import { useEffect, useState } from 'react';
import { Tabs as AntdTabs, Flex, Space, DatePicker } from 'antd'
import Tabs from '@/components/Tabs';
import styles from './index.less'
import LineBarCharts from './LineBarCharts';
import BaseCard from '@/pages/Common/components/BaseCard';
import services from '@/services';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

const AnalysisCompletionRate = () => {

  const [fetchParams, setFetchParams] = useState({})
  const [allCloseCaseStatistics, setAllCloseCaseStatistics] = useState<any>([])

  const tabItems = [
    {
      label: `整体结案趋势`,
      key: '1',
    }
  ]

  const timeTabs = [
    {
      label: `本周`,
      key: '1',
    },
    {
      label: `本月`,
      key: '2',

    },
    {
      label: `全年`,
      key: '3',
    },
  ]

  // 获取左侧顶部事件相关统计
  const getAllCloseCaseStatistics = (params: any) => {
    services.CityProblemApi.getAllCloseCaseStatisticsApi(params).then(res => {
      if (res.code === 200) {
        setAllCloseCaseStatistics(res.data)
      }
    })
  }

  const changeTab = (type: string) => {
    setFetchParams({ ...fetchParams, type })
    getAllCloseCaseStatistics({ ...fetchParams, type })
  }

  const changeDate = (value: any) => {
    if (value) {
      const startTime = dayjs(value[0]).format('YYYY-MM-DD')
      const endTime = dayjs(value[1]).format('YYYY-MM-DD')
      setFetchParams({ startTime, endTime, type: '4' })
      getAllCloseCaseStatistics({ startTime, endTime, type: '4' })
    } else {
      setFetchParams({ startTime: '', endTime: '', type: '1' })
      getAllCloseCaseStatistics({ startTime: '', endTime: '', type: '1' })
    }
  }

  useEffect(() => {
    setFetchParams({
      type: 1,
      starTime: '',
      endTime: '',
    })
    getAllCloseCaseStatistics({
      type: 1,
      starTime: '',
      endTime: '',
    })
  }, [])


  return (
    <Flex vertical className={styles.wrap}>
      <Flex className={styles.top} justify='space-between'>
        <AntdTabs size="large" defaultActiveKey="1" centered items={tabItems} />
        <Space>
          <Tabs
            onChange={changeTab}
            itemkey={'key'}
            items={timeTabs}
          />
          <RangePicker
            style={{ height: 40 }}
            onChange={changeDate}
          />
        </Space>
      </Flex>
      <div style={{ flex: 1 }}>
        <LineBarCharts dataSource={allCloseCaseStatistics?.list || []} />
      </div>
      <BaseCard>
        <Flex justify='space-between' align='flex-end' className={styles.bottom}>
          <Space direction='vertical' >
            <span>
              <span className={styles.num}>{allCloseCaseStatistics?.other?.total}</span>
              <span>件</span>
            </span>
            <span>本周累计立案</span>
          </Space>
          <Space direction='vertical'>
            <span>
              <span className={styles.num} style={{ fontSize: 30, lineHeight: 1 }}>{allCloseCaseStatistics.max}</span>
            </span>
            <span style={{ lineHeight: 1 }}>立案最多一天</span>
          </Space>
          <Space direction='vertical' >
            <span>
              <span className={styles.num}>{allCloseCaseStatistics?.other?.completionRate}</span>
              <span>%</span>
            </span>
            <span>结案率</span>
          </Space>
          <Space direction='vertical' >
            <span>
              <span className={styles.num}>{allCloseCaseStatistics.dy}</span>
              <span>天</span>
            </span>
            <span>结案率超95%的天数</span>
          </Space>
          <Space direction='vertical' >
            <span>
              <span className={styles.num}>{allCloseCaseStatistics.xy}</span>
              <span>天</span>
            </span>
            <span>结案率低于95%的天数</span>
          </Space>
        </Flex>
      </BaseCard>
    </Flex>
  )
}

export default AnalysisCompletionRate