// FullScreenInter.js - 主文件保持简洁
import React from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { Icon, Row, Col, message } from 'antd';
import styles from './fullinter.less';
import logo from '../assets/layout/headerno-logo-new.png';
import debounce from 'lodash.debounce';
import storage from '../utils/storage';
import { initFilter, extendRule } from '../utils/common';
import HomeContent from './FullOther/HomeContent';
import TrainingContent from './FullOther/TrainingContent';
import RiskControl from './FullOther/RiskControl';
import ClassBuild from './FullOther/ClassBuild';
import DangerJob from './FullOther/DangerJob';
import HiddenSolve from './FullOther/HiddenSolve';

const getScale = () => {
  const width = 1920,
    height = 1080;
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

class FullScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nowDate: '',
      riskTypeRate: [],
      riskTotal: [
        { name: '年度重大隐患数', value: 1 },
        { name: '年度一般隐患数量', value: 89 },
        { name: '未整改隐患数量', value: 18 },
      ],
      jobTodayQty: [],
      hiddenSummary: [],
      taskTop3: [],
      scale: getScale(),
      configBanner: ['首页', '风险管控', '隐患治理', '班组建设', '危险作业', '安全培训'],
      mediaList: [],
      currentMediaIndex: 0,
      announcementList: [],
      activeTab: '首页',
      // 安全培训相关数据
      trainingData: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
        listAnnourcement: [],
        TITLE: '',
        listVideoImg: [],
        playSet: [],
      },
      trainingSubData: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
      },
      trainingSubDataMonth: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
      },
      trainingSubIDCard: [],
      trainingSubBSType: {},
      trainingCompanyData: [], // 安全培训专用公司数据
      selectedTrainingMonth: new Date().getMonth() + 1,
      selectedTrainingCompany: '',

      // 隐患治理相关数据
      hiddenSubData: {}, // 隐患治理数据
      hiddenCompanyData: [], // 隐患治理专用公司数据
      selectedHiddenCompany: '', // 隐患治理选中的公司

      // 其他页面数据
      riskSubData: {},
      classSubData: {},
      dangerSubData: {},
      dangerCompanyData: [],
      selectedDangerCompany: '',

      announcementDetail: null,
      announcementDetailLoading: false,
      announcementModalVisible: false,
      currentAnnouncement: null,
    };
    this.isUnmounted = false;
  }

  setScale = debounce(() => {
    if (this.isUnmounted) return;
    this.setState({ scale: getScale() });
  }, 500);

  toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen?.();
    } else {
      document.exitFullscreen?.();
    }
  };

  componentDidMount() {
    this.isUnmounted = false;
    window.addEventListener('resize', this.setScale);
    this.getHomeDataArray();
    this.getYearPXData();
    this.loadMediaFiles();
    this.getAnnouncementData();

    this.timer = setInterval(() => {
      if (!this.isUnmounted) this.setState({ nowDate: this.getDate() });
    }, 1000);

    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getAnnouncementDetail = (announcement) => {
    return new Promise((resolve, reject) => {
      const orgId = storage('lacal').getItem('webOrgId')?.val;
      const json = initFilter(orgId);
      extendRule(json, 'ID', 1, announcement.ID);
      json.Include = ['Nav_Orgs', 'Nav_Orgs.Nav_OrgSub', 'Nav_Files.Nav_ImgFile'];

      this.setState({ announcementDetailLoading: true, announcementDetail: null });

      this.props.dispatch({
        type: 'app/getDataByPost',
        payload: json,
        url: 'PF/Annourcement/Get',
        onComplete: (ret) => {
          if (ret && !this.isUnmounted) {
            this.setState({
              announcementDetail: ret,
              announcementDetailLoading: false,
            });
            resolve(ret);
          } else {
            message.error('暂无公告详情');
            this.setState({ announcementDetailLoading: false });
            reject(new Error('获取公告详情失败'));
          }
        },
        onError: (error) => {
          this.setState({ announcementDetailLoading: false });
          reject(error);
        },
      });
    });
  };

  handleAnnouncementClick = async (announcement) => {
    try {
      const detail = await this.getAnnouncementDetail(announcement);
      this.setState({
        currentAnnouncement: detail,
        announcementModalVisible: true,
      });
    } catch (error) {
      console.error('获取公告详情失败:', error);
    }
  };

  handleAnnouncementModalClose = () => {
    this.setState({
      announcementModalVisible: false,
      currentAnnouncement: null,
    });
  };

  getAnnouncementData = () => {
    this.setState({
      announcementList: [
        { ID: 1, title: '关于2024年安全生产月活动的通知', publishTime: '2024-06-01', url: '' },
        { ID: 2, title: '公司第三季度安全培训安排', publishTime: '2024-05-28', url: '' },
        { ID: 3, title: '关于开展安全隐患排查整治工作的通知', publishTime: '2024-05-20', url: '' },
        { ID: 4, title: '安全生产标准化建设阶段性总结', publishTime: '2024-05-15', url: '' },
        { ID: 5, title: '关于表彰2024年第一季度安全生产先进单位的决定', publishTime: '2024-05-10', url: '' },
      ],
    });
  };

  loadMediaFiles = () => {
    this.setState({
      mediaList: [
        { type: 'image', url: 'http://10.2.7.18:28028//WZ_Images/static/smyzw@2x.png' },
        { type: 'video', url: 'http://10.2.7.18:28028/WZ_Images/Img_JFSC/welcom/1.mp4' },
      ],
    });
  };

  handleCarouselChange = (current) => {
    this.setState({ currentMediaIndex: current });
  };

  handleDotClick = (index) => {
    this.setState({ currentMediaIndex: index });
  };

  handleTabClick = (name) => {
    this.setState({ activeTab: name });
    if (name === '首页') {
      this.getYearPXData();
      this.loadMediaFiles();
      this.getAnnouncementData();
    }
    // 安全培训 - 参考原有逻辑
    if (name === '安全培训') {
      this.getTrainingCompanyData(); // 先获取公司列表
      this.getHomeSESubYearData();
      this.getHomeSESubYearMonthData();
      this.getHomeSESubIDCardData();
    }
    // 隐患治理 - 参考安全培训的调用顺序
    if (name === '隐患治理') {
      this.getHiddenCompanyData(); // 先获取公司列表（与安全培训独立）
    }
    // 风险管控
    if (name === '风险管控') {
      this.getRiskSubData();
    }
    // 班组建设
    if (name === '班组建设') {
      this.getClassSubData();
    }
    // 危险作业
    if (name === '危险作业') {
      this.getDangerCompanyData();
    }
  };

  handleFullscreenChange = () => {
    this.forceUpdate();
  };

  componentWillUnmount() {
    this.isUnmounted = true;
    window.removeEventListener('resize', this.setScale);
    if (this.timer) clearInterval(this.timer);
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getDate = () => {
    const myDate = new Date();
    const year = myDate.getFullYear();
    const mon = myDate.getMonth() + 1;
    const date = myDate.getDate();
    let hours = myDate.getHours();
    let minutes = myDate.getMinutes();
    let seconds = myDate.getSeconds();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return `${year} 年 ${mon} 月 ${date} 日 \t\t\t${hours} : ${minutes} : ${seconds}`;
  };

  getHomeDataArray = () => {
    console.log('获取首页数据');
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIKanBanController/ReturnAllData',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            riskTypeRate: ret.riskTypeRate || [],
            jobTodayQty: ret.jobTodayQty || [],
            hiddenSummary: ret.hiddenSummary || [],
            taskTop3: ret.taskTop3 || [],
          });
        }
      },
    });
  };

  getYearPXData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SEtrInfo',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingData: {
              listNAME: ret.listNAME || [],
              YearCount: ret.YearCount || [],
              MonthRecordCount: ret.MonthRecordCount || [],
              MonthPersonCount: ret.MonthPersonCount || [],
              listAnnourcement: ret.listAnnourcement || [],
              TITLE: ret.TITLE || '',
              listVideoImg: ret.listVideoImg || [],
              playSet: ret.playSet || [],
            },
          });
        }
      },
    });
  };

  // ==================== 安全培训相关方法 ====================
  getTrainingCompanyData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/Organization/OrderPaged',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          // 默认选中邦泰公司
          const defaultCompany = ret.find((company) => company.ID === '00500000-0000-0000-0000-000000000000');
          this.setState({
            trainingCompanyData: ret,
          });
          if (defaultCompany && !this.state.selectedTrainingCompany) {
            this.setState(
              {
                selectedTrainingCompany: defaultCompany.ID,
              },
              () => {
                this.getBSTypeMonthData(); // 公司设置完成后获取培训类型数据
              }
            );
          } else {
            this.getBSTypeMonthData();
          }
        }
      },
    });
  };

  getHomeSESubYearData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentYear = new Date().getFullYear();
    json.Parameter1 = currentYear.toString();
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/HomeSESubYear',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          const listNAME = ret.map((item) => item.CName);
          const MonthPersonCount = ret.map((item) => item.PCount);
          const MonthRecordCount = ret.map((item) => item.RCount);
          const YearCount = ret.map((item) => item.PCount);

          this.setState({
            trainingSubData: {
              listNAME: listNAME,
              YearCount: YearCount,
              MonthRecordCount: MonthRecordCount,
              MonthPersonCount: MonthPersonCount,
            },
          });
        }
      },
    });
  };

  handleTrainingMonthChange = (month) => {
    this.setState({ selectedTrainingMonth: month }, () => {
      this.getHomeSESubYearMonthData();
    });
  };

  handleTrainingCompanyChange = (company) => {
    this.setState({ selectedTrainingCompany: company }, () => {
      this.getBSTypeMonthData();
    });
  };

  getHomeSESubYearMonthData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentYear = new Date().getFullYear();
    json.Parameter1 = currentYear.toString();
    json.Parameter2 = this.state.selectedTrainingMonth.toString();
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/HomeSESubYear',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          const listNAME = ret.map((item) => item.CName);
          const MonthPersonCount = ret.map((item) => item.PCount);
          const MonthRecordCount = ret.map((item) => item.RCount);
          const YearCount = ret.map((item) => item.PCount);

          this.setState({
            trainingSubDataMonth: {
              listNAME: listNAME,
              YearCount: YearCount,
              MonthRecordCount: MonthRecordCount,
              MonthPersonCount: MonthPersonCount,
            },
          });
        }
      },
    });
  };

  getHomeSESubIDCardData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const currentDateStr = `${year}-${month}-${day}`;

    json.Parameter1 = currentDateStr;
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SubCertificateType',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingSubIDCard: ret,
          });
        }
      },
    });
  };

  getBSTypeMonthData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const currentDateStr = `${year}-${month}-${day}`;

    json.Parameter1 = currentDateStr;
    if (this.state.selectedTrainingCompany) {
      json.Parameter2 = this.state.selectedTrainingCompany;
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SubTypeMonth',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingSubBSType: ret,
          });
        }
      },
    });
  };

  // ==================== 隐患治理相关方法 ====================
  // 获取隐患治理的公司列表（独立于安全培训）
  getHiddenCompanyData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/Organization/OrderPaged',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          // 默认选中邦泰公司
          const defaultCompany = ret.find((company) => company.ID === '00500000-0000-0000-0000-000000000000');
          this.setState({
            hiddenCompanyData: ret,
          });
          if (defaultCompany && !this.state.selectedHiddenCompany) {
            this.setState({
              selectedHiddenCompany: defaultCompany.ID,
            });
          }
          this.getHiddenSubData();
        }
      },
    });
  };

  // 隐患治理公司筛选变化处理
  handleHiddenCompanyChange = (company) => {
    this.setState({ selectedHiddenCompany: company });
    this.getHiddenSubData();
  };

  getHiddenSubData = () => {
    let filteredData = {
      hiddenList: [
        {
          companyName: '邦泰',
          majorCount: 52,
          generalCount: 128,
        },
        {
          companyName: '宏源建设',
          majorCount: 18,
          generalCount: 94,
        },
        {
          companyName: '中城建工',
          majorCount: 31,
          generalCount: 205,
        },
      ],
      hiddenRanking: [
        // 邦泰 5 个
        {
          companyName: '邦泰',
          hiddenName: '安全防护缺失',
          qty: 42,
        },
        {
          companyName: '邦泰',
          hiddenName: '临时用电不规范',
          qty: 38,
        },
        {
          companyName: '邦泰',
          hiddenName: '机械设备故障',
          qty: 27,
        },
        {
          companyName: '邦泰',
          hiddenName: '特种设备未年检',
          qty: 15,
        },
        {
          companyName: '邦泰',
          hiddenName: '消防器材过期',
          qty: 12,
        },
        // 路源 6 个
        {
          companyName: '路源',
          hiddenName: '消防通道堵塞',
          qty: 29,
        },
        {
          companyName: '路源',
          hiddenName: '电气线路老化',
          qty: 18,
        },
        {
          companyName: '路源',
          hiddenName: '应急照明故障',
          qty: 8,
        },
        {
          companyName: '路源',
          hiddenName: '安全标识缺失',
          qty: 7,
        },
        {
          companyName: '路源',
          hiddenName: '脚手架搭设不规范',
          qty: 6,
        },
        {
          companyName: '路源',
          hiddenName: '劳保用品佩戴不规范',
          qty: 5,
        },
        // 天山 7 个
        {
          companyName: '天山',
          hiddenName: '脚手架搭设违规',
          qty: 36,
        },
        {
          companyName: '天山',
          hiddenName: '高空抛物隐患',
          qty: 22,
        },
        {
          companyName: '天山',
          hiddenName: '动火作业监护缺失',
          qty: 14,
        },
        {
          companyName: '天山',
          hiddenName: '受限空间未审批',
          qty: 11,
        },
        {
          companyName: '天山',
          hiddenName: '起重吊装违规操作',
          qty: 9,
        },
        {
          companyName: '天山',
          hiddenName: '临时用电私拉乱接',
          qty: 7,
        },
        {
          companyName: '天山',
          hiddenName: '高处作业安全带未挂',
          qty: 5,
        },
      ],
      hiddenRectifyList: [
        {
          companyName: '邦泰',
          majorCount: 52,
          majorCountNo: 12,
          generalCount: 128,
          generalCountNo: 31,
        },
        {
          companyName: '宏源建设',
          majorCount: 18,
          majorCountNo: 5,
          generalCount: 94,
          generalCountNo: 22,
        },
        {
          companyName: '中城建工',
          majorCount: 31,
          majorCountNo: 9,
          generalCount: 205,
          generalCountNo: 47,
        },
      ],
    };
    if (this.state.selectedHiddenCompany) {
      const selectedCompanyObj = this.state.hiddenCompanyData?.find(
        (company) => company.ID === this.state.selectedHiddenCompany
      );
      const selectedCompanyName = selectedCompanyObj?.NAME;

      if (selectedCompanyName) {
        // 筛选 hiddenRanking
        filteredData.hiddenRanking = filteredData.hiddenRanking.filter(
          (item) => item.companyName === selectedCompanyName
        );
      }
    }

    // 模拟数据
    this.setState({
      hiddenSubData: filteredData,
    });

    // 以下是真实的API调用代码，如需使用请取消注释
    // const orgId = storage('lacal').getItem('webOrgId')?.val;
    // const json = initFilter(orgId);
    // this.props.dispatch({
    //   type: 'app/getDataByPost',
    //   payload: json,
    //   url: 'BI/BIKanBanController/HiddenManage',
    //   onComplete: (ret) => {
    //     if (ret && !this.isUnmounted) {
    //       this.setState({
    //         hiddenSubData: ret.Data,
    //       });
    //     }
    //   },
    // });
  };

  // ==================== 其他页面方法 ====================
  getRiskSubData = () => {
    this.setState({
      riskSubData: {
        riskList: [
          {
            companyName: '邦泰',
            majorCount: 2,
            largerCount: 5,
            generalCount: 12,
            lowCount: 33,
            totalCount: 52,
          },
          {
            companyName: '鸿源建设',
            majorCount: 1,
            largerCount: 3,
            generalCount: 8,
            lowCount: 20,
            totalCount: 32,
          },
          {
            companyName: '华安工程',
            majorCount: 0,
            largerCount: 2,
            generalCount: 6,
            lowCount: 15,
            totalCount: 23,
          },
          {
            companyName: '天达科技',
            majorCount: 3,
            largerCount: 4,
            generalCount: 10,
            lowCount: 18,
            totalCount: 35,
          },
        ],
        riskTypeList: [
          { typeName: '动火作业', qty: 18 },
          { typeName: '高处作业', qty: 24 },
          { typeName: '临时用电', qty: 12 },
          { typeName: '起重吊装', qty: 9 },
          { typeName: '受限空间', qty: 7 },
        ],
      },
    });
  };

  getClassSubData = () => {
    this.setState({
      classSubData: [
        { companyName: '邦泰', rate: '52%' },
        { companyName: '路源', rate: '52%' },
        { companyName: '安达', rate: '78%' },
        { companyName: '迅捷', rate: '63%' },
        { companyName: '恒通', rate: '45%' },
        { companyName: '华威', rate: '91%' },
        { companyName: '鼎盛', rate: '37%' },
      ],
    });
  };

  getDangerCompanyData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/Organization/OrderPaged',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          const defaultCompany = ret.find((company) => company.ID === '00500000-0000-0000-0000-000000000000');
          this.setState({
            dangerCompanyData: ret,
          });
          if (defaultCompany && !this.state.selectedDangerCompany) {
            this.setState(
              {
                selectedDangerCompany: defaultCompany.ID,
              },
              () => {
                this.getDangerSubData();
              }
            );
          } else {
            this.getDangerSubData();
          }
        }
      },
    });
  };

  handleDangerCompanyChange = (company) => {
    this.setState({ selectedDangerCompany: company }, () => {
      this.getDangerSubData();
    });
  };

  getDangerSubData = () => {
    let filteredData = [
      {
        companyName: '邦泰',
        startDate: '2025-01-01 08:30:00',
        endDate: '2025-01-01 17:00:00',
        jobName: '爆破作业',
        areaName: '矿山采场',
        place: '东采区+320平台',
        users: '张三，李四，王五',
        monitor: '赵正三',
        approveUsers: '刘安全，陈技术',
      },
      {
        companyName: '邦泰',
        startDate: '2025-01-03 09:00:00',
        endDate: '2025-01-03 18:00:00',
        jobName: '高处作业',
        areaName: '装置区',
        place: '脱硫塔顶部',
        users: '王高空，李安全带，张监护',
        monitor: '周正三',
        approveUsers: '吴经理，郑安全',
      },
      {
        companyName: '天山',
        startDate: '2025-01-02 08:00:00',
        endDate: '2025-01-02 17:30:00',
        jobName: '高处作业',
        areaName: '水泥生产线',
        place: '预热器塔架',
        users: '检修班组',
        monitor: '天山-赵正',
        approveUsers: '天山-刘经理，天山-王安全',
      },
      {
        companyName: '天山',
        startDate: '2025-01-04 09:30:00',
        endDate: '2025-01-04 18:00:00',
        jobName: '有限空间作业',
        areaName: '均化库',
        place: '库内底部',
        users: '清库作业组',
        monitor: '天山-钱正',
        approveUsers: '天山-孙厂长，天山-李安全',
      },
    ];

    if (this.state.selectedDangerCompany) {
      const selectedCompanyObj = this.state.dangerCompanyData?.find(
        (company) => company.ID === this.state.selectedDangerCompany
      );
      const selectedCompanyName = selectedCompanyObj?.NAME;
      if (selectedCompanyName) {
        filteredData = filteredData.filter((item) => item.companyName === selectedCompanyName);
      }
    }

    this.setState({
      dangerSubData: filteredData,
    });
  };

  renderOtherTabContent = () => {
    const {
      activeTab,
      trainingSubData,
      trainingSubBSType,
      trainingCompanyData,
      trainingSubDataMonth,
      selectedTrainingMonth,
      selectedTrainingCompany,
      trainingSubIDCard,
      riskSubData,
      classSubData,
      hiddenSubData,
      hiddenCompanyData,
      selectedHiddenCompany,
    } = this.state;

    if (activeTab === '安全培训') {
      return (
        <TrainingContent
          trainingSubData={trainingSubData}
          trainingSubBSType={trainingSubBSType}
          companyData={trainingCompanyData}
          trainingSubDataMonth={trainingSubDataMonth}
          selectedMonth={selectedTrainingMonth}
          selectedCompany={selectedTrainingCompany}
          onMonthChange={this.handleTrainingMonthChange}
          onCompanyChange={this.handleTrainingCompanyChange}
          trainingSubIDCard={trainingSubIDCard}
        />
      );
    }
    if (activeTab === '风险管控') {
      return <RiskControl riskSubData={riskSubData} />;
    }
    if (activeTab === '隐患治理') {
      return (
        <HiddenSolve
          hiddenSubData={hiddenSubData}
          companyData={hiddenCompanyData}
          selectedCompany={selectedHiddenCompany}
          onCompanyChange={this.handleHiddenCompanyChange}
        />
      );
    }
    if (activeTab === '班组建设') {
      return <ClassBuild classSubData={classSubData} />;
    }
    if (activeTab === '危险作业') {
      return (
        <DangerJob
          dangerSubData={this.state.dangerSubData}
          companyData={this.state.dangerCompanyData}
          selectedCompany={this.state.selectedDangerCompany}
          onCompanyChange={this.handleDangerCompanyChange}
        />
      );
    }
    return (
      <div className={styles.otherTabContent}>
        <div style={{ textAlign: 'center', color: '#fff' }}>
          <div style={{ fontSize: '32px', fontWeight: 'bold', marginBottom: '20px' }}>{activeTab} 页面</div>
          <div style={{ fontSize: '18px', opacity: 0.8 }}>这里是 {activeTab} 的内容展示区域</div>
          <div style={{ marginTop: '30px', fontSize: '16px', opacity: 0.6 }}>请根据实际需求替换此内容</div>
        </div>
      </div>
    );
  };

  render() {
    const width = 1920,
      height = 1080;
    const {
      scale,
      activeTab,
      riskTypeRate,
      riskTotal,
      hiddenSummary,
      jobTodayQty,
      taskTop3,
      mediaList,
      announcementList,
      currentMediaIndex,
      trainingData,
      announcementModalVisible,
      currentAnnouncement,
      announcementDetailLoading,
    } = this.state;

    return (
      <div className={styles.box} style={{ transform: `scale(${scale}) translate(-50%, -50%)`, width, height }}>
        <div className={styles.blackBack}>
          <div className={styles.backImage}>
            {/* 头部 */}
            <div className={styles.header}>
              <Row style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center' }}>
                <Col span={9} style={{ display: 'flex', alignItems: 'center' }}>
                  <img src={logo} alt="logo" style={{ height: '50px', marginLeft: '50px' }} />
                  <div style={{ display: 'flex', marginLeft: 'auto' }}>
                    {this.state.configBanner.slice(0, 3).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                </Col>
                <Col span={6} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div className={styles.headerText}>金源公司安全生产管控平台</div>
                </Col>
                <Col span={9} style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                  <div style={{ display: 'flex' }}>
                    {this.state.configBanner.slice(3, 6).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                  <Icon
                    type={document.fullscreenElement ? 'fullscreen-exit' : 'fullscreen'}
                    style={{ fontSize: '26px', color: '#000', cursor: 'pointer', margin: '0 20px' }}
                    onClick={this.toggleFullscreen}
                  />
                  <div style={{ color: '#000', fontSize: '14px', marginRight: '20px', fontWeight: 'bold' }}>
                    {this.state.nowDate}
                  </div>
                </Col>
              </Row>
            </div>

            {/* 内容区域 */}
            {activeTab === '首页' ? (
              <HomeContent
                riskTypeRate={riskTypeRate}
                riskTotal={riskTotal}
                hiddenSummary={hiddenSummary}
                jobTodayQty={jobTodayQty}
                taskTop3={taskTop3}
                mediaList={mediaList}
                announcementList={announcementList}
                currentMediaIndex={currentMediaIndex}
                onCarouselChange={this.handleCarouselChange}
                onDotClick={this.handleDotClick}
                trainingData={trainingData}
                onAnnouncementClick={this.handleAnnouncementClick}
                announcementModalVisible={announcementModalVisible}
                currentAnnouncement={currentAnnouncement}
                announcementDetailLoading={announcementDetailLoading}
                onAnnouncementModalClose={this.handleAnnouncementModalClose}
              />
            ) : (
              this.renderOtherTabContent()
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(FullScreen));