import questionMark from '@/assets/images/questionMark.png';
import DescriptionItem from '@/components/DescriptionItem';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Popover } from 'antd';
import EChartsReact from 'echarts-for-react';
import { cloneDeep, sortBy } from 'lodash';
import React, { useLayoutEffect, useMemo, useRef } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import option from './option';

/** @name 管廊维护情况 */
const PipeGalleryMaintenanceStatus: React.FC = () => {
  const chartRef = useRef<any>();

  const { data: rcqstjData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-rcqstj',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records[0] || {};
      }
      throw new Error('获取数据失败');
    }),
  );

  const INFO = useMemo(() => {
    console.log(rcqstjData);
    return [
      {
        name: '本体维护保养',
        value: rcqstjData?.btjg?.length ? rcqstjData?.btjg[0]?.num : 0,
        unit: '处',
      },
      {
        name: '附属设施维护保养',
        value: rcqstjData?.fsss?.length ? rcqstjData?.fsss[0]?.num : 0,
        unit: '个',
        vColor: '#FFB05A',
      },
    ];
  }, [rcqstjData]);

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

  const LineOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    const btjgData = rcqstjData?.btjg?.length
      ? sortBy(rcqstjData?.btjg, (v) => v.time)
      : [];
    const fsssData = rcqstjData?.fsss?.length
      ? sortBy(rcqstjData?.fsss, (v) => v.time)
      : [];
    temp.xAxis[0].data = btjgData?.map((v) => v.time);
    temp.grid = {
      // left: '0%',
      // right: '0%',
      // top: '0%',
      bottom: '20%',
    };
    const lineSeries = [
      {
        name: '本体维护保养',
        type: 'line',
        symbol: 'none',
        stack: 'Total',
        lineStyle: {
          color: '#57efe5',
          width: 3,
        },
        smooth: true,
        data: btjgData?.map((v) => v.num),
      },
      {
        name: '附属设施维护保养',
        type: 'line',
        stack: 'Total',
        lineStyle: {
          color: '#FFB05A',
          width: 3,
        },
        smooth: true,
        symbol: 'none',
        data: fsssData?.map((v) => v.num),
      },
    ];
    temp.series = lineSeries;
    return temp;
  }, [rcqstjData]);

  const popoverContent = (
    <div className={styles.popoverContent}>
      <div>统计时间范围：</div>
      <div>上月21日到本月20日</div>
    </div>
  );

  return (
    <BaseCard
      w={917}
      h={342}
      headerRight={
        // <div className={styles.time}>2024年12月</div>
        // // <div className={styles.time}>2024年11月 21日 -2024年12月20日</div>
        <div className={styles.timeWrapper}>
          <span className={styles.time}>2024年12月</span>
          <Popover
            content={popoverContent}
            placement="bottomRight"
            overlayClassName={styles.customPopover}
          >
            <img
              src={questionMark}
              alt="question"
              className={styles.questionIcon}
            />
          </Popover>
        </div>
      }
      title="维护管理"
    >
      <Flex gap={100} style={{ marginTop: 20 }} align="center">
        {INFO.map((item) => {
          return (
            <DescriptionItem
              value={item.value}
              direction="horizontal"
              unit={item.unit}
              valueStyle={{
                margin: '0 12px',
                color: item.vColor,
              }}
              name={item.name}
              key={item.name}
            />
          );
        })}
      </Flex>
      <div>
        <div className={styles.chartTitle}>近6个月维护趋势</div>
        <EChartsReact
          ref={chartRef}
          style={{
            height: 140,
          }}
          option={LineOption}
        ></EChartsReact>
      </div>
    </BaseCard>
  );
};

export default PipeGalleryMaintenanceStatus;
