import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { apiGet } from '../../utils/request';
import { useDefaultDate, getSelectedMonthRange } from '../../App';
import useGlobalRefresh from '../../hooks/useGlobalRefresh';

// 组件容器样式
const ChartWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid #2980B9;
`;

// 内容容器
const ContentContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  background: url('/lvseshuangbiaopan.png') no-repeat center center;
  background-size: 90% auto;
  display: flex;
  align-items: center;
  justify-content: center;
`;

// 双仪表盘容器
const DualGaugeContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1vw 0vw;
`;

// 单个仪表盘容器
const GaugeContainer = styled.div`
  position: relative;
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1vw;
`;

// 主要数值显示
const MainValue = styled.div`
  font-size: 1.5vw;
  color: #FFFFFF;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', sans-serif;
  text-align: center;
  margin-bottom: 0.5vw;
  text-shadow: 0 0 0.5vw rgba(255, 255, 255, 0.3);
`;

// 描述文字
const Description = styled.div`
  font-size: 0.8vw;
  color: #CCE6FF;
  text-align: center;
  font-family: 'Source Han Sans SC', 'PingFang SC', sans-serif;
`;

// 数据接口类型 - 根据接口字段定义
interface MonthlyTurnoverStatusData {
  monthlyTurnoverCount: number;    // 月周转次数
  monthlyTurnoverDays: number;     // 月周转天数
}

const GreenDualGaugeChart: React.FC = () => {
  const [data, setData] = useState<MonthlyTurnoverStatusData>({ 
    monthlyTurnoverCount: 0, 
    monthlyTurnoverDays: 0 
  });
  const [loading, setLoading] = useState(true);
  const { defaultDateTime, selectedMonth } = useDefaultDate();

  // 获取数据
  const fetchData = async () => {
    try {
      setLoading(true);
      
      // 使用选中月份获取时间范围
      const { startTime, endTime } = getSelectedMonthRange(defaultDateTime, selectedMonth);
      
      console.log(`月度转换状态 - 请求参数: startTime=${startTime}, endTime=${endTime}`);
      
      const response = await apiGet('/stageStats/monthlyTurnoverStatus', {
        params: {
          startTime,
          endTime
        }
      });
      
      if (response.data && response.data.data) {
        setData(response.data.data);
        console.log('月度转换状态数据:', response.data.data);
      } else {
        console.warn('月度转换状态 - 接口返回格式不符合预期:', response.data);
        // 设置为默认值
        setData({ monthlyTurnoverCount: 0, monthlyTurnoverDays: 0 });
      }
    } catch (error) {
      console.error('获取月度转换状态数据失败:', error);
      // 设置为默认值
      setData({ monthlyTurnoverCount: 0, monthlyTurnoverDays: 0 });
    } finally {
      setLoading(false);
    }
  };

  // 组件挂载时和依赖变化时获取数据
  useEffect(() => {
    fetchData();
  }, [defaultDateTime, selectedMonth]);

  // 使用刷新Hook，配置对应的模块代码
  useGlobalRefresh(fetchData, '44'); // 绿色双仪表盘模块代码

  return (
    <ChartWrapper>
      <ContentContainer>
        <DualGaugeContainer>
          {/* 左侧仪表盘 - 月周转次数 */}
          <GaugeContainer>
            <MainValue>
              {loading ? '--' : `${data.monthlyTurnoverCount}次`}
            </MainValue>
            <Description>月周转次数</Description>
          </GaugeContainer>
          
          {/* 右侧仪表盘 - 月周转天数 */}
          <GaugeContainer>
            <MainValue>
              {loading ? '--' : `${data.monthlyTurnoverDays}天`}
            </MainValue>
            <Description>月周转天数</Description>
          </GaugeContainer>
        </DualGaugeContainer>
      </ContentContainer>
    </ChartWrapper>
  );
};

export default GreenDualGaugeChart; 