import React from 'react';
import styled from 'styled-components';
import { PanelContainer } from '../styled/DashboardStyles';
import DeviceMaintenanceChart from './DeviceMaintenanceChart';
import DeviceInspectionChart from './DeviceInspectionChart';

// 组件容器样式
const Container = styled(PanelContainer)`
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  border-radius: 0.2vw;
  display: flex;
  flex-direction: column;
`;

// 组件标题
const PanelHeader = styled.div`
  position: relative;
  width: 65%;
  height: 1.6vw;
  padding-left: 4%;
  text-align: left;
  line-height: 1.6vw;
  font-size: 0.8vw;
  color: #CCE6FF;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background: url('/component_header_bg.png') no-repeat;
  background-size: 100% 100%;
`;

// 内容容器
const ContentBox = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0.5vw;
  padding-top: 1.2vw;
  height: calc(100% - 1.6vw);
  gap: 0.8vw;
  flex: 1;
  overflow: visible;
`;

// 下半部分容器，用于放置两个图表
const ChartsContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1vh;
  flex: 1;
  overflow: visible;
  min-height: 0; /* 允许内容溢出父容器 */
`;

// 图片容器
const ImageContainer = styled.div`
  width: 100%;
  height: 45%;
  margin: 3% 0;
  min-height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
`;

// 图片样式
const DeviceImage = styled.div`
  width: 100%;
  height: 100%;
  background-image: url('/shebeiyilanbanner.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
`;

interface DeviceOverviewChartProps {
  selectedEquipCode: string;
  selectedEquipName: string;
  selectedEquipValue: string;
}

const DeviceOverviewChart: React.FC<DeviceOverviewChartProps> = ({ selectedEquipCode, selectedEquipName, selectedEquipValue }) => {
  return (
    <Container>
      <PanelHeader>设备一览</PanelHeader>
      <ContentBox>
        <ImageContainer>
          <DeviceImage />
          <div style={{ position: 'absolute', top: '90%', left: '27%', color: '#143666', fontSize: '0.7vw'}}>{selectedEquipValue}</div>
        </ImageContainer>
        <ChartsContainer>
          <div style={{ flex: '0 0 40%' }}>
            <DeviceMaintenanceChart selectedEquipCode={selectedEquipCode} />
          </div>
          <div style={{ flex: '0 0 60%' }}>
            <DeviceInspectionChart selectedEquipCode={selectedEquipCode} />
          </div>
        </ChartsContainer>
      </ContentBox>
    </Container>
  );
};

export default DeviceOverviewChart; 