import services from '@/services';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import LineCharts from './LineCharts';
import { CaretUpFilled } from '@ant-design/icons';
import { Flex } from 'antd';

const ComplaintTrend: React.FC = () => {
  const [statisticTotal, setStatisticTotal] = useState<any>([]);
  const [monthOnMonth, setMonthOnMonth] = useState<any>(null);

  const getDate = () => {
    const oneMonthAgo = dayjs().subtract(1, 'month');
    return {
      startTime: oneMonthAgo.format('YYYY-MM-DD'),
      endTime: dayjs().format('YYYY-MM-DD'),
    };
  };

  const getData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      // typeCode: "quhs-tsqs",
      typeCode: 'quhs-jqqs',
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      setStatisticTotal(resp.data?.data?.records);
    }
  };

  const getMonthOnMonthData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: "quhs-tshb",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      setMonthOnMonth(resp.data?.data?.records[0]);
    }
  };

  useEffect(() => {
    getData();
    getMonthOnMonthData();
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>投诉趋势</span>
      </div>
      <Flex justify="space-between" className={styles.subHeader}>
        <span className={styles.unit}>单位：件</span>
        <div className={styles.monthOnMonth}>
          <span className={styles.label}>月环比</span>
          <span className={styles.value}>
            <CaretUpFilled style={{ color: '#1DBB8A', marginRight: 4 }} />
            <span style={{ color: '#1DBB8A' }}>{monthOnMonth?.huanbi || 0}</span>
          </span>
        </div>
      </Flex>
      <div className={styles.content}>
        {/* <LineCharts dataSource={statisticRecent} /> */}
        <LineCharts dataSource={statisticTotal} />
      </div>
    </div>
  );
};

export default ComplaintTrend;
