import React, { useEffect, useState } from "react";
import styles from "./index.less";
import Pie from "@/components/Charts/Pie";

const EquipmentRepair = props => {
  return (
    <div className={styles.equipmentRepair}>
      <EquipmentInfo {...props} />
      <EquipmentFaultAnalysis {...props} />
    </div>
  );
};

// 设备信息
const EquipmentInfo = props => {
  const { sTabName = "" } = props;
  if (!["维修申请记录", "设备点检记录", "设备资料"].includes(sTabName))
    return "";

  const tableName =
    sTabName === "维修申请记录"
      ? "table4"
      : sTabName === "设备点检记录"
        ? "elemachine"
        : "deviceinfo";

  const { [`${tableName}Data`]: tableData = [] } = props;
  const viewRow = tableData[0] || {};
  const { sMachineNo, sMachineName } = viewRow;
  return (
    <div className={styles.equipmentInfo}>
      <div className={styles.title}>设备信息</div>
      <div className={styles.image} />
      <div className={styles.info}>
        <div className={styles.content}>
          <div>设备编号：</div>
          <div>{sMachineNo}</div>
          <div>设备名称：</div>
          <div>{sMachineName}</div>
        </div>
      </div>
    </div>
  );
};

// 设备故障分析图表
const EquipmentFaultAnalysis = props => {
  const { sTabName = "" } = props;
  if (!["设备维修记录", "设备点检明细"].includes(sTabName)) return "";

  const tableName = sTabName === "设备维修记录" ? "table3" : "spotcheckanalyze";

  const xName = sTabName === "设备维修记录" ? "sFaultType" : "sIntervaltype";

  const title =
    sTabName === "设备维修记录" ? "设备故障分析图表" : "点检故障分析图表";

  const { [`${tableName}Data`]: tableData = [] } = props;

  const [pieProps, setPieProps] = useState({
    data: [],
    hasLegend: true,
    valueFormat: false,
    lineWidth: 0,
    pageLoading: false,
    hasLend: true,
    height: 280
  });

  useEffect(
    () => {
      if (!tableData.length) return;

      const data = [];
      tableData.forEach(rowData => {
        const { [xName]: x, iCount: y } = rowData;
        data.push({ x, y });
      });

      setPieProps(pre => ({ ...pre, data }));
    },
    [JSON.stringify(tableData)]
  );

  return (
    <div className={styles.equipmentFaultAnalysis}>
      <div className={styles.title}>{title}</div>
      <div className={styles.charts}>
        {pieProps.data.length ? (
          <Pie {...pieProps} />
        ) : (
          <div className={styles.noData}>暂无数据</div>
        )}
      </div>
    </div>
  );
};

export default EquipmentRepair;