import EmptyWithConditions from '@/components/EmptyWithConditions';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import Loading from '@/pages/GlobalModalServices/components/Loading';
import services from '@/services';
import { useRequest } from 'ahooks';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import React, { useLayoutEffect, useMemo, useRef } from 'react';
import styles from './index.less';
import option from './option';
/** @name 趋势 */
const Trend: React.FC<{
  searchTime: any;
}> = (props) => {
  const { searchTime } = props;
  //处罚趋势年
  const { data: cfqsYear, loading: yearLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-aysllb',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res.data.data.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
      ready: searchTime.key === 'year',
    },
  );
  //处罚趋势子定义--月
  const { data: cfqsMonth, loading: customerLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-arsllb',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res.data.data.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
      ready: searchTime.key !== 'year',
    },
  );

  const qsList = useMemo(() => {
    if (searchTime.key === 'year') {
      return cfqsYear?.map((item: any) => ({
        name: item?.month,
        value: item?.num,
      }));
    }
    return cfqsMonth?.map((item: any) => ({
      name: item?.day,
      value: item?.num,
    }));
  }, [cfqsYear, cfqsMonth, searchTime]);

  const chartRef = useRef<any>();

  useLayoutEffect(() => {
    chartRef.current?.resize();
  }, []);

  const LineOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    const xAxis = qsList?.map((v: any) => v.name) ?? [];

    temp.xAxis[0].data = xAxis;

    const lineSeries = [
      {
        name: '数量',
        type: 'line',
        symbol: 'none',
        stack: 'Total',
        lineStyle: {
          color: 'rgb(89, 238, 255)',
          width: 3,
        },
        smooth: true,

        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(89, 238, 255,0.26)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(89, 238, 255, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data:
          qsList?.map((item: any) => {
            return item.value;
          }) ?? [],
      },
    ];
    temp.series = lineSeries;
    return temp;
  }, [qsList]);

  return (
    <BaseCard w={937} h={271} title="行政处罚趋势">
      <Loading loading={customerLoading || yearLoading}>
        <EmptyWithConditions conditions={qsList?.length === 0}>
          <div className={styles.unit}>单位：件</div>
          <EChartsReact
            ref={chartRef}
            style={{
              height: 160,
            }}
            option={LineOption}
          ></EChartsReact>
        </EmptyWithConditions>
      </Loading>
    </BaseCard>
  );
};

export default Trend;
