import ProductAbnormal from './productAbnormal';
import QualityAbnormal from './qualityAbnormal';
import DeviceAbnormal from './deviceAbnormal';
import DeviceCountTable from './deviceCount';
import styles from '../../index.less';
import { Modal } from 'antd';
import { useState } from 'react';
import { useIntl } from 'umi';
type EquipmentDetailCriteria = KANBAN.ProductionComprehens.EquipmentDetailCriteria;
type ErrorDetailSetting = KANBAN.ProductionComprehens.ErrorDetailSetting;

const Abnormal: React.FC<{
  abnormalProdData: any;
  abnormalQualityData: any;
  abnormalDeviceData: any;
  setting: ErrorDetailSetting;
}> = ({ abnormalProdData, abnormalQualityData, abnormalDeviceData, setting }) => {
  const intl = useIntl();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [criteria, setCriteria] = useState<EquipmentDetailCriteria>();
  const closeModal = () => setIsModalOpen(false);
  const openModal = (type: number) => {
    setIsModalOpen(true);
    setCriteria({
      workshopName: setting.workshopName || '',
      current: 1,
      pageSize: 10,
      status: type,
    });
  };
  return (
    <>
      <div className={styles.itemContainer}>
        <ProductAbnormal data={abnormalProdData} setting={setting} />
      </div>
      <div className={styles.itemContainer}>
        <DeviceAbnormal data={abnormalDeviceData} setting={setting} />
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.bottomItem}>
          <p>{intl.formatMessage({id: '设备正常数'})}：</p>
          <h2 onClick={() => openModal(1)}>{abnormalDeviceData.equipCt}</h2>
        </div>
        <div className={styles.bottomItemRight} style={{ marginLeft: '10px' }}>
          <p>{intl.formatMessage({id: '设备异常数'})}：</p>
          <h2 onClick={() => openModal(2)}>{abnormalDeviceData.equipErrorCt}</h2>
        </div>
      </div>
      <div className={styles.itemContainer}>
        <QualityAbnormal data={abnormalQualityData} setting={setting} />
      </div>
    </>
  );
};

export default Abnormal;
