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;

`;

// 内容容器
const ContentContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  background: url('/ziseshuangbiaopan.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 EquipInputProportionData {
  autoDosingRatio: number;     // 自动加药比例
  codeUploadRatio: number;     // 追溯码上传率
}

const PurpleDualGaugeChart: React.FC = () => {
  const [data, setData] = useState<EquipInputProportionData>({ autoDosingRatio: 0, codeUploadRatio: 0 });
  const [loading, setLoading] = useState(true);
  const { defaultDateTime, selectedMonth } = useDefaultDate();

  // 获取数据
  const fetchData = async () => {
    try {
      setLoading(true);
      
      // 使用选中月份获取时间范围，支持月份选择功能
      const { startTime, endTime } = getSelectedMonthRange(defaultDateTime, selectedMonth);
      
      const response = await apiGet('/stageStats/equipInputProportion', {
        params: {
          startTime,
          endTime
        }
      });
      
      if (response.data && response.data.data) {
        setData(response.data.data);
      } else {
        console.warn('设备投入比例 - 接口返回格式不符合预期:', response.data);
        // 设置为默认值，不使用模拟数据
        setData({ autoDosingRatio: 0, codeUploadRatio: 0 });
      }
    } catch (error) {
      console.error('获取设备投入比例数据失败:', error);
      // 设置为默认值，不使用模拟数据
      setData({ autoDosingRatio: 0, codeUploadRatio: 0 });
    } finally {
      setLoading(false);
    }
  };

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

  // 使用全局刷新钩子，指定模块代码'43'（紫色双仪表盘）
  useGlobalRefresh(fetchData, '43');

  return (
    <ChartWrapper>
      <ContentContainer>
        <DualGaugeContainer>
          {/* 左侧仪表盘 - 自动加药比例 */}
          <GaugeContainer>
            <MainValue>
              {loading ? '--' : `${(data.autoDosingRatio * 100).toFixed(1)}%`}
            </MainValue>
            <Description>自动加药比例</Description>
          </GaugeContainer>
          
          {/* 右侧仪表盘 - 追溯码上传率 */}
          <GaugeContainer>
            <MainValue>
              {loading ? '--' : `${(data.codeUploadRatio * 100).toFixed(2)}%`}
            </MainValue>
            <Description>追溯码上传率</Description>
          </GaugeContainer>
        </DualGaugeContainer>
      </ContentContainer>
    </ChartWrapper>
  );
};

export default PurpleDualGaugeChart; 