import React, {
  useRef,
  useEffect,
  useState,
  useMemo,
  useCallback,
} from "react";

import DemoLine from "./DemoLine";
import dedupe from "dedupe";

import _, { indexOf, isObject, max } from "lodash";
import Head from "next/head";
// import "antd/dist/antd.css";

import DemoDualAxes from "./DemoDualAxes";
import { SearchOutlined } from "@ant-design/icons";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
const symbol = function symbol(x, y, r) {
  return [
    ["M", x - r, y],
    ["L", x + r, y],
  ];
};

import {
  Select,
  Button,
  InputNumber,
  Input,
  DatePicker,
  Checkbox,
  message,
  Spin,
  Popover,
  Tooltip,
  Slider,
} from "antd";
import {
  getFactory,
  getOperation,
  getEquip,
  getProduct,
  getEquipRequire,
  getEquipmentLocation,
  getProductionLine,
  getProductType,
  getEquipmentLocationEchart,
  getXmr,
} from "../../../reportUtils/getQueryData";
const { RangePicker } = DatePicker;
const { Option } = Select;
function Xmr() {
  const [productValue, setProductValue] = useState("");
  const [productGid, setProductGid] = useState("");
  const [deleteListValue, setDeleteListValue] = useState([]);
  const [workLineValue, setWorkLineValue] = useState("");
  const [productTypeValue, setProductTypeValue] = useState("");
  const [featureValue, setFeatureValue] = useState("");
  const [featureName, setFeatureName] = useState("");
  const [featureTypeValue, setFeatureTypeValue] = useState("");
  const [operationValue, setOperationValue] = useState("");
  const [discriminatory, setDiscriminatory] = useState("");
  const [equipValue, setEquipValue] = useState("");
  const [factoryValue, setFactoryValue] = useState("");
  const [sampleValue, setSampleValue] = useState(25);
  const [factoryName, setFactoryName] = useState("");
  const [operationName, setOperationName] = useState("");
  const [equipName, setEquipName] = useState("");
  const [productName, setProductName] = useState("");
  const [workLineName, setWorkLineName] = useState("");

  //车间值
  const [tableData, setTableData] = useState([]);
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const [time, setTime] = useState("");
  const [listCellData, setListCellData] = useState([]);
  const [processInfData, setProcessInfData] = useState([]);
  //控制上限
  const [usl, setUsl] = useState();
  //控制下限
  const [lsl, setLsl] = useState();
  const [cl, setcl] = useState();
  //UCLx
  const [UCLx, setUCLx] = useState();
  //UCLr
  const [UCLr, setUCLr] = useState();
  //AVERx
  const [AVERx, setAVERx] = useState();
  //AVERr
  const [AVERr, setAVERr] = useState();
  //LCLx
  const [LCLx, setLCLx] = useState();
  const [xmin, setxmin] = useState(0);
  const [xmax, setxmax] = useState(100000000);
  const [mrmin, setmrmin] = useState(0);
  const [mrmax, setmrmax] = useState(0);

  const [curxmin, setcurxmin] = useState(0);
  const [curxmax, setcurxmax] = useState(0);
  const [curmrmin, setcurmrmin] = useState(0);
  const [curmrmax, setcurmrmax] = useState(0);
  const [finish, setFinish] = useState(false);

  const [displayValueX, setDisplayValueX] = useState(null);
  const [displayValueMR, setDisplayValueMR] = useState(null);

  //normalCurves
  const [normalCurves, setNormalCurves] = useState([]);
  const [spcBasicDatas, setSpcBasicDatas] = useState([]);
  //processAnalysis
  const [processAnalysis, setProcessAnalysis] = useState();
  //controlPerf
  const [controlPerf, setControlPerf] = useState();
  //LCLr
  const [LCLr, setLCLr] = useState();
  //requestBody
  const [requestBody, setRequestBody] = useState({});
  useEffect(() => {
    execQuery();
  }, [requestBody]);
  useEffect(() => {
    console.log("render deleteListValue", deleteListValue);
  }, [deleteListValue]);
  useEffect(() => {
    setRequestBody({
      productTypeValue: productTypeValue,
      featureTypeValue: featureTypeValue,
      featureValue: featureValue,
      discriminatory: discriminatory,
      featureName: featureName,
      equipValue: equipValue,
      factoryValue: factoryValue,
      productValue: productValue,
      operationValue: operationValue,
      workLineValue: workLineValue,
      startDate: startTime,
      endDate: endTime,
      sampleValue: sampleValue,
      deleteValue: deleteListValue.length,
      deleteListValue: deleteListValue,
      usl: usl,
      lsl: lsl,
    });
  }, [
    productTypeValue,
    featureTypeValue,
    featureValue,
    equipValue,
    factoryValue,
    discriminatory,
    productValue,
    operationValue,
    workLineValue,
    startTime,
    endTime,
    sampleValue,
    deleteListValue,
  ]);
  // 查询设备类型,查询车间，
  const cellclass = `font-medium  text-xs  border border-black  p-0 text-black text-center	 text-xs  min-w-[60px] max-h-[42px]`;
  const cellclassp0 = `font-medium  text-xs  border border-black  p-0 text-black text-center	`;
  const cellclasslabel = `pl-1 font-medium  text-xs   text-black text-left	`;
  const cellclasslabelVal = `pl-1 font-medium  text-xs   text-red-500 text-left	`;
  const cellclassTopLine = `  border-black border-t-2	`;
  const cellclasstiny = `font-medium text-xs  border p-0   border-black text-black text-center	`;
  const cellclasstinyp0 = `font-medium text-xs  border   text-black text-center	`;
  const tableclass = `border-collapse w-full border border-slate-400  bg-white  text-sm shadow-sm	`;
  const cellclassVal = `font-bold  border border-black  p-0.5 text-black bg-[#DCD9C6] text-center text-xs  min-w-[60px] max-h-[42px]	`;
  const cellclassValw = `font-bold  border border-black  p-0.5 text-black text-center text-xs  min-w-[60px] max-h-[42px]	`;
  const cellclassTitle = `font-bold  border border-black p-0.5 text-white bg-black text-center	`;
  const tableHeight = React.useRef(null);
  const fullHeight = React.useRef(null);
  const lslwidth = React.useRef(null);
  useEffect(() => {}, [tableData]);
  const getQueryVariable = (name) => {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var decodeurlsearch = decodeURIComponent(window.location.search);
    var r = decodeurlsearch.substr(1).match(reg);
    if (r != null) return r[2];
    return null;
  };

  function Popo(props) {
    const { value, code, seq, index } = props;

    const [open, setOpen] = useState(false);
    const hide = () => {
      setOpen(false);
    };

    const removeCell = (ev, value, index) => {
      hide();
      setDeleteListValue((prev) => {
        return dedupe([...prev, index.toString()]);
      });
      console.log("delete deleteListValue", deleteListValue);
    };
    const viewMes = (ev, value, code, index) => {
      hide();
      window.parent.postMessage(
        {
          type: "viewMes",
          proMaterialId: productGid,
          proMaterialCode: productValue,
          proMaterialName: productName,
          proBatch: code,
          startTime: startTime,
          endTime: endTime,
        },
        "*"
      );
    };
    const detailContent = (val, code, index) => {
      return (
        <div>
          <p>批次生产单号：{code}</p>
          <div className=" space-x-2">
            <Button
              type="primary"
              className=""
              onClick={(ev) => {
                viewMes(ev, val, code, index);
              }}
            >
              查看
            </Button>
            <Button
              type="primary"
              danger
              onClick={(ev) => {
                removeCell(ev, val, index);
              }}
            >
              删除
            </Button>
          </div>
        </div>
      );
    };
    const handleOpenChange = (newOpen) => {
      setOpen(newOpen);
    };

    return (
      <Popover
        // mouseEnterDelay={0.8}
        placement="topLeft"
        content={() => {
          return detailContent(value, code, seq);
        }}
        trigger="click"
        open={open}
        onOpenChange={handleOpenChange}
        title={"查看信息"}
        key={index}
      >
        <div
          onClick={() => {
            setOpen(true);
          }}
          className={
            "group hover:cursor-pointer hover:bg-red-500 hover:ring-red-500  border-black border-b-0 border-t-0  border flex flex-col  "
          }
        >
          <span className="group-hover:text-white group-hover:bg-red-500 text-center font-medium ">
            {index}
          </span>
          <span
            className={
              "group-hover:text-white group-hover:bg-red-500 text-center bg-[#DCD9C6] border px-1 border-t border-r-0 border-l-0 border-b-0 border-black"
            }
          >
            {value}
          </span>
        </div>
      </Popover>
    );
  }

  const spcBasicDatasX = useMemo(() => {
    let data = spcBasicDatas
      ? spcBasicDatas?.map((x, index) => {
          index++;
          return {
            code: x.code,
            name: "数据点",
            x: index.toLocaleString(),
            seq: x.seq,
            value: x.value,
            controlRefList: x?.controlRefList,
          };
        })
      : [] ?? [];
    if (data.length === 0) return [];
    let arr = data?.filter((x) => !isNaN(x.value)).map((c) => c.value);
    let newarr = arr.concat([
      isNaN(LCLx) ? 0 : LCLx,
      isNaN(UCLx) ? 0 : UCLx,
      isNaN(usl) ? 0 : usl,
      isNaN(lsl) ? 0 : lsl,
    ]);
    let ac1 = Math.max.apply(null, newarr);
    setxmax(ac1);
    let ac2 = Math.min.apply(null, newarr);
    setxmin(ac2);

    let ac3 = Math.max.apply(null, newarr);
    setcurxmax(ac3);
    let ac4 = Math.min.apply(null, newarr);
    setcurxmin(ac4);
    console.log(ac1, ac2, ac3, ac4);
    return data;
  }, [spcBasicDatas]);
  const spcBasicDatasMR = useMemo(() => {
    let data = spcBasicDatas
      ? spcBasicDatas?.map((x, index) => {
          index++;
          return {
            code: x.code,
            x: index.toLocaleString(),
            seq: x.seq,
            name: "极差值",
            value: x?.mrValue,
            controlRefList: x?.controlRefList,
          };
        })
      : [] ?? [];
    if (data.length === 0) return [];
    let arr = data?.filter((x) => !isNaN(x.value)).map((c) => c.value);
    let newarr = arr.concat([
      isNaN(UCLr) ? 0 : UCLr,
      isNaN(LCLr) ? 0 : LCLr,
      isNaN(AVERr) ? 0 : AVERr,
    ]);
    let ac1 = Math.max.apply(null, newarr);
    setmrmax(ac1);
    let ac2 = Math.min.apply(null, newarr);
    setmrmin(ac2);
    let ac3 = Math.max.apply(null, newarr);
    setcurmrmax(ac3);
    let ac4 = Math.min.apply(null, newarr);
    setcurmrmin(ac4);
    console.log(ac1, ac2, ac3, ac4);
    return data;
  }, [spcBasicDatas]);

  const spcBasicDatasMRSlider = useMemo(() => {
    return spcBasicDatasMR.filter(
      (x) => x.value >= curmrmin && x.value <= curmrmax
    );
  }, [spcBasicDatasMR, curmrmax, curmrmin]);
  const spcBasicDatasXSlider = useMemo(() => {
    console.log(curxmax);
    return spcBasicDatasX.filter(
      (x) => x.value >= curxmin && x.value <= curxmax
    );
  }, [spcBasicDatasX, curxmax, curxmin]);

  useEffect(() => {
    if (spcBasicDatasMRSlider !== null);
    setDisplayValueMR(spcBasicDatasMRSlider);
  }, [spcBasicDatasMRSlider]);
  useEffect(() => {
    if (spcBasicDatasXSlider !== null);
    setDisplayValueX(spcBasicDatasXSlider);
  }, [spcBasicDatasXSlider]);
  useEffect(() => {
    let productTypeValue = getQueryVariable("productTypeValue");
    let productValue = getQueryVariable("productValue");
    let productGid = getQueryVariable("productGid");
    let factoryValue = getQueryVariable("factoryValue");
    let operationValue = getQueryVariable("operationValue");
    let workLineValue = getQueryVariable("workLineValue");
    let sampleValue = getQueryVariable("sampleValue");
    let discriminatory = getQueryVariable("discriminatory");
    let time = getQueryVariable("time");
    let deleteListValue = getQueryVariable("deleteListValue");
    let featureTypeValue = getQueryVariable("featureTypeValue");
    let equipValue = getQueryVariable("equipValue");
    let featureValue = getQueryVariable("featureValue");
    let startDate = getQueryVariable("startDate");
    let endDate = getQueryVariable("endDate");
    let usl = getQueryVariable("usl");
    let lsl = getQueryVariable("lsl");
    let factoryName = getQueryVariable("factoryName");
    let operationName = getQueryVariable("operationName");
    let equipName = getQueryVariable("equipName");
    let featureName = getQueryVariable("featureName");
    let productName = getQueryVariable("productName");
    let workLineName = getQueryVariable("workLineName");
    setProductTypeValue(productTypeValue);
    setDiscriminatory(discriminatory);
    setProductValue(productValue);
    setProductGid(productGid);
    setFeatureName(featureName);
    setFactoryValue(factoryValue);
    setOperationValue(operationValue);
    setWorkLineValue(workLineValue);
    setSampleValue(sampleValue);
    // sampleChange(sampleValue);
    setEquipValue(equipValue);
    setFeatureTypeValue(featureTypeValue);
    setFeatureValue(featureValue);
    setStartTime(startDate);
    setEndTime(endDate);
    setLsl(lsl !== "undefined" ? lsl : "");
    setUsl(usl !== "undefined" ? usl : "");
    setOperationName(operationName);
    setEquipName(equipName !== "undefined" ? equipName : "");
    setFactoryName(factoryName !== "undefined" ? equipName : "");

    setProductName(productName !== "undefined" ? productName : "");
    setWorkLineName(workLineName !== "undefined" ? workLineName : "");
    setTime(time);
    setFinish(true);
    // setTimeout(() => {
    //  setFinish(true)
    // }, 2000);
  }, []);
  const sliderstyle = {
    display: "inline-block",
    float: "left",
    height: 130,
  };
  useEffect(() => {}, [normalCurves]);
  const execQuery = () => {
    console.log("----test----");
    if (!requestBody.endDate) {
      return;
    }
    getXmr(requestBody).then((res) => {
      window.parent.postMessage(
        {
          type: "reqBody",
          message: requestBody,
        },
        "*"
      );
      if (!res) {
        window.parent.postMessage(
          {
            type: "message",
            message: "未查询到数据",
          },
          "*"
        );
        return;
      }
      if (!isObject(res)) {
        window.parent.postMessage(
          {
            type: "message",
            message: res,
          },
          "*"
        );
        return;
      }
      setNormalCurves(res.normalCurves);
      setSpcBasicDatas([]);
      setSpcBasicDatas(res.spcBasicDatas);
      if (res.topData) {
        let topdata = res.topData;
        setLCLr(topdata.lclr);
        setLCLx(topdata.lclx);
        setAVERr(topdata.averr);
        setAVERx(topdata.averx);
        setUCLr(topdata.uclr);
        setUCLx(topdata.uclx);

        setProductName(topdata.productName);
        setUsl(topdata.usl);
        setLsl(topdata.lsl);
        setWorkLineName(topdata.productionLine);
        setOperationName(topdata.operationName);
        setOperationName(topdata.operationName);
        setFactoryName(topdata.workCenterName);
      }
      setProcessAnalysis(res.processAnalysis);
      if (res.controlPerf) {
        let _controlPerf = "";
        Object.keys(res.controlPerf).map((ind) => {
          if (ind !== "") {
            _controlPerf += ind + ". " + res.controlPerf[ind] + "; ";
          } else {
            _controlPerf += res.controlPerf[ind] + "; ";
          }
        });
        // _controlPerf = _controlPerf.concat(Object.values(res.controlPerf));
        setControlPerf(_controlPerf);
      }
      let _listCellData = [];
      let calfd = res.calFeatureData;
      if (calfd) {
        _listCellData.push(sampleValue);
        _listCellData.push(calfd.usl);
        _listCellData.push(calfd.cl);
        setcl(calfd.cl);
        _listCellData.push(calfd.lsl);
        _listCellData.push(calfd.sum);
        _listCellData.push(calfd.avg);
        _listCellData.push(calfd.max);
        _listCellData.push(calfd.min);
        _listCellData.push(calfd.outBelowLx);
        _listCellData.push(calfd.outAbovex);
        _listCellData.push(calfd.r);
        _listCellData.push(calfd.d2);
        _listCellData.push(calfd.cpu);
        _listCellData.push(calfd.cpl);
        _listCellData.push(calfd.cp);
        _listCellData.push(calfd.cpk);
        _listCellData.push(calfd.cr);
        _listCellData.push(calfd.stdev);
        _listCellData.push(calfd.stdevp);
        _listCellData.push(calfd.var);
        _listCellData.push(calfd.varp);
        _listCellData.push(calfd.pp);
        _listCellData.push(calfd.pr);
        _listCellData.push(calfd.ppk);
        setListCellData(_listCellData);
      }
      let _processdata = res.processData;
      if (_processdata) {
        let _processInfData = [];
        _processInfData.push(_processdata.incrMaxlenx);
        _processInfData.push(_processdata.incrMaxlenr);
        _processInfData.push(_processdata.incrChainx);
        _processInfData.push(_processdata.incrChainr);
        _processInfData.push(_processdata.decrMaxlenx);
        _processInfData.push(_processdata.decrMaxlenr);
        _processInfData.push(_processdata.decrChainx);
        _processInfData.push(_processdata.decrChainr);
        _processInfData.push(_processdata.outControlx);
        _processInfData.push(_processdata.outControlr);
        setProcessInfData(_processInfData);
      }
    });
  };
  const factoryChange = (value) => {
    setFactoryValue(value);
    getOperation(value)
      .then((data) => {
        setOperation(data);
      })
      .catch((err) => console.log(err));

    getProductionLine(value)
      .then((data) => {
        setWorkLine(data);
      })
      .catch((err) => console.log(err));

    getEquipRequire(value, operationValue)
      .then((data) => {
        setEquip(data);
      })
      .catch((err) => console.log(err));
  };

  const operationChange = (value) => {
    setOperationValue(value);
    getEquipRequire(factoryValue, value)
      .then((data) => {
        setEquip(data);
      })
      .catch((err) => console.log(err));
  };

  const lslChange = (value) => {
    setLsl(value);
  };

  const uslChange = (value) => {
    setUsl(value);
  };
  const workLineChange = (value) => {
    setWorkLineValue(value);
  };
  const equipChange = (value) => {
    setEquipValue(value);
  };
  const productChange = (value) => {
    setProductValue(value);
  };
  const productTypeChange = (value) => {
    setProductTypeValue(value);
  };
  const dateChange = (values) => {
    setStartTime(moment(values[0]["time"]).format("YYYY-MM-DD HH-mm-ss"));
    setEndTime(moment(values[1]["time"]).format("YYYY-MM-DD HH-mm-ss"));
  };

  const handleClick = (valude) => {};
  const xonChange = (val) => {
    let min = 0,
      max = 0;
    min = val[0];
    max = val[1];
    setcurxmin(min);
    setcurxmax(max);
  };
  const mronChange = (val) => {
    let min = 0,
      max = 0;
    min = val[0];
    max = val[1];
    setcurmrmin(min);
    setcurmrmax(max);
  };
  const xlegend = {
    position: "bottom-left",
    layout: "horizontal",
    items: [
      {
        value: "value",
        name: "数据点",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#678DF2",
            // lineDash: [4, 2],
            r: 8,
            fill: "#678DF2",
          },
        },
      },

      {
        value: "value",
        name: "USLi",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },

      {
        value: "value",
        name: "UCLi",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            // lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },
      {
        value: "value",
        name: "CLi",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#80FC5E",
            lineDash: [4, 2],
            r: 8,
            fill: "#80FC5E",
          },
        },
      },
      {
        value: "lcl",
        name: "LCLi",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            // lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },
      {
        value: "lsl",
        name: "LSLi",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },
    ],
  };
  const mrlegend = {
    position: "bottom-left",
    layout: "horizontal",
    items: [
      {
        value: "value",
        name: "极差值",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#678DF2",
            // lineDash: [4, 2],
            r: 8,
            fill: "#678DF2",
          },
        },
      },
      {
        value: "value",
        name: "UCLmr",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            // lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },
      {
        value: "value",
        name: "CLmr",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#80FC5E",
            lineDash: [4, 2],
            r: 8,
            fill: "#80FC5E",
          },
        },
      },
      {
        value: "value",
        name: "LCLmr",
        marker: {
          symbol: symbol,
          style: {
            lineWidth: 2,
            stroke: "#FF0000",
            // lineDash: [4, 2],
            r: 8,
            fill: "#FF0000",
          },
        },
      },
    ],
  };
  Array.prototype.removeAt = function (iIndex) {
    var vItem = this[iIndex];
    if (vItem) {
      this.splice(iIndex, 1);
    }
    return vItem;
  };

  return (
    <div className="w-full h-full flex flex-col space-y-4 space-x-4 ">
      <Head>
        <title>融通高科设备大屏 1.0</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div key="body" className="relative">
        <table className={tableclass}>
          <tbody>
            <tr>
              <td className={cellclass}>产品名称</td>
              <td className={cellclassVal}>{productName}</td>
              <td className={cellclass}>车间名称</td>
              <td className={cellclassVal}>{factoryName}</td>
              <td className={cellclass}>产线名称</td>
              <td className={cellclassVal}>{workLineName}</td>

              <td className={cellclass}>工序</td>
              <td className={cellclassVal}>{operationName}</td>
              <td className={cellclassTitle + "text-xs w-[300px] pb-[20px]"}>
                过程信息栏
              </td>
              <td className={cellclassTitle + "text-xs w-[200px] pb-[20px]"}>
                统计特性描述
              </td>
              <td className={cellclassTitle + "text-xs w-[100px] pb-[20px]"}>
                数据值
              </td>
            </tr>
            <tr>
              <td className={cellclass}>产品类型</td>
              <td className={cellclassVal}>{productTypeValue}</td>{" "}
              <td className={cellclass}>设备</td>
              <td className={cellclassVal}>{equipName}</td>{" "}
              <td className={cellclass}>特性项</td>
              <td className={cellclassVal}>{featureName}</td>{" "}
              <td className={cellclass}>时间</td>
              <td className={cellclassVal + " text-[9px]"}>
                <p className="m-0">{startTime}</p>
                <p className="m-0">{endTime}</p>
              </td>
              <td className={cellclass + "p-0"} rowSpan={3}>
                <table className={tableclass + " z-20	mt-[-18px] "}>
                  <tr>
                    <td className={cellclassp0}>数据重要趋势</td>
                    <td className={cellclassp0 + "w-[120px]"}></td>
                    <td className={cellclassp0 + "w-[40px]"}>I 图</td>
                    <td className={cellclassp0}>MR 图</td>
                  </tr>
                  <tr>
                    <td className={cellclassp0}>递增趋势</td>
                    <td colSpan={3} className={"p-0"}>
                      <table className={tableclass}>
                        <tr className="h-4 ">
                          <td className={cellclasstiny + "w-[120px]"}>
                            点数最大长度{" "}
                          </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData0 " + processInfData[0]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[0]}
                              </div>
                            </Tooltip>
                          </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData1 " + processInfData[1]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[1]}
                              </div>
                            </Tooltip>
                          </td>{" "}
                        </tr>
                        <tr className="h-4">
                          <td className={cellclasstiny}>递 增 链 数 </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData2 " + processInfData[2]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[2]}
                              </div>
                            </Tooltip>
                          </td>

                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData3 " + processInfData[3]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[3]}
                              </div>
                            </Tooltip>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td className={cellclassp0}>递减趋势</td>
                    <td colSpan={3} className={"p-0"}>
                      <table className={tableclass + " p-0"}>
                        <tr className="h-4">
                          <td className={cellclasstiny + "w-[120px]"}>
                            点数最大长度{" "}
                          </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData4 " + processInfData[4]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[4]}
                              </div>
                            </Tooltip>
                          </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData5 " + processInfData[5]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[5]}
                              </div>
                            </Tooltip>
                          </td>{" "}
                        </tr>
                        <tr className="h-4">
                          <td className={cellclasstiny}>递 减 链 数 </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData6 " + processInfData[6]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[6]}
                              </div>
                            </Tooltip>
                          </td>

                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData7 " + processInfData[7]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[7]}
                              </div>
                            </Tooltip>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr className="h-8">
                    <td className={cellclassp0}>超出控制线点数</td>

                    <td colSpan={3} className={"p-0"}>
                      <table className={tableclass + " p-0"}>
                        <tr className="h-8">
                          <td className={cellclasstiny + "w-[120px]"}></td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData8 " + processInfData[8]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[8]}
                              </div>
                            </Tooltip>
                          </td>
                          <td className={" " + cellclasstiny + " text-red-600"}>
                            <Tooltip
                              mouseEnterDelay={0.8}
                              placement="topLeft"
                              title={"processInfData9 " + processInfData[9]}
                            >
                              <div className="w-6 h-4">
                                {" "}
                                {processInfData[9]}
                              </div>
                            </Tooltip>
                          </td>{" "}
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td
                className={cellclass + "p-0 relative statisticsdesc  "}
                rowSpan={5}
              >
                <div
                  className={
                    "flex flex-col  absolute top-[-18px] bg-white left-0 w-full  border-t border-black h-full  "
                  }
                >
                  <div className={cellclasslabel}>样本容量</div>
                  <div className={cellclasslabel + cellclassTopLine}>
                    工程规范上限 (USL)
                  </div>
                  <div className={cellclasslabel}>规格中线</div>

                  <div className={cellclasslabel}>工程规范下限 (LSL)</div>

                  <div className={cellclasslabel + cellclassTopLine}>总和</div>
                  <div className={cellclasslabel}>读数均值 (X)</div>
                  <div className={cellclasslabel}>最大值</div>
                  <div className={cellclasslabel}>最小值</div>
                  <div className={cellclasslabel}>低于下控制线点数(I)</div>
                  <div className={cellclasslabel}>高于上控制线点数(I)</div>
                  <div className={cellclasslabel + cellclassTopLine}>
                    极差均值R
                  </div>
                  <div className={cellclasslabel}>D2 值 (n=2)</div>
                  <div className={cellclasslabel}>能力指数上限(CPU)</div>
                  <div className={cellclasslabel}>能力指数下限 (CPL)</div>
                  <div className={cellclasslabel}>稳定过程能力指数 (Cp)</div>
                  <div className={cellclasslabel}>稳定过程能力指数 (Cpk)</div>
                  <div className={cellclasslabel}>能力比率 (CR)</div>
                  <div className={cellclasslabel + cellclassTopLine + "mt-1.5"}>
                    标准偏差（n-1)
                  </div>
                  <div className={cellclasslabel}>标准偏差 (n)</div>
                  <div className={cellclasslabel}>变异 (n-1)</div>
                  <div className={cellclasslabel}>变异 (n)</div>
                  <div className={cellclasslabel}>性能指数 (PP)</div>
                  <div className={cellclasslabel}>性能比率 (PR)</div>
                  <div className={cellclasslabel}>性能指数 (Ppk)</div>
                  <div
                    ref={fullHeight}
                    className={
                      cellclasslabel +
                      cellclassTopLine +
                      "w-[358px]  h-full bg-white flex flex-col z-[20]  mb-[-18px]"
                    }
                  >
                    <p className=" text-center mt-3">正态分布 </p>
                    <DemoDualAxes
                      dataSource={normalCurves}
                      UCL={usl}
                      LCL={lsl}
                      CL={cl}
                    ></DemoDualAxes>
                  </div>
                  <div
                    className={
                      cellclasslabel +
                      cellclassTopLine +
                      " w-[358px] -mb-[1px] "
                    }
                  ></div>
                </div>
              </td>
              <td
                className={
                  cellclass +
                  "p-0 relative statisticsdesc border-b-0  top-[-18px] bg-white  w-[10rem]"
                }
                rowSpan={5}
              >
                <div
                  className={
                    "flex flex-col  absolute top-0 left-0   border-t border-black w-[10rem]  h-full"
                  }
                >
                  <div className={cellclasslabelVal}>
                    {listCellData[0]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal + cellclassTopLine}>
                    {listCellData[1]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[2]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[3]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal + cellclassTopLine}>
                    {listCellData[4]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[5]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[6]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[7]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[8]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[9]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal + cellclassTopLine}>
                    {listCellData[10]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[11]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[12]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[13]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[14]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[15]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[16]}&nbsp;
                  </div>
                  <div
                    className={cellclasslabelVal + cellclassTopLine + "mt-1.5"}
                  >
                    {listCellData[17]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[18]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[19]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[20]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[21]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[22]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal}>
                    {listCellData[23]}&nbsp;
                  </div>
                  <div className={cellclasslabelVal + cellclassTopLine}></div>
                </div>
              </td>
            </tr>
            <tr className="h-6">
              <td className={cellclass} colSpan={8}></td>
            </tr>
            <tr>
              <td className={cellclass}>控制规格</td>

              <td className={cellclass} colSpan={2}>
                <div className="flex flex-row p-0 m-0 h-[32px]  m-y-[-12px]">
                  <div className="flex-1 py-2 px-0.5  text-center align-middle border border-white    border-r-black	">
                    USL
                  </div>
                  <div
                    className={` flex-0 py-2 px-0.5  text-center align-middle `}
                    style={{ width: lslwidth.current?.clientWidth }}
                  >
                    {usl}
                  </div>
                  <div className="flex-1 border border-white   border-l-black py-2 px-0.5  text-center align-middle	">
                    LSL
                  </div>
                </div>
              </td>
              <td
                className={` flex-0 py-2 px-0.5  text-center align-middle `}
                ref={lslwidth}
              >
                {lsl}
              </td>
              <td className={cellclass}>控制限</td>
              <td colSpan="3" className="p-0  h-8 border border-b border-black">
                <table className={tableclass + ""}>
                  <tr className="h-4">
                    <td className={cellclasstiny}>UCLi</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {UCLx}
                    </td>
                    <td className={cellclasstiny}>CLi</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {AVERx}
                    </td>{" "}
                    <td className={cellclasstiny}>LCLi</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {LCLx}
                    </td>
                  </tr>
                  <tr className="h-4">
                    <td className={cellclasstiny}>UCLmr</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {UCLr}
                    </td>

                    <td className={cellclasstiny}>CLmr</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {AVERr}
                    </td>
                    <td className={cellclasstiny}>LCLmr</td>
                    <td className={cellclasstiny + " text-red-600 px-2 w-10"}>
                      {LCLr}
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td className="h-48 border border-black border-b-2" colSpan={9}>
                <div className="p-2 static ">
                  <p>单值(I-图)</p>

                  <div className="h-[230px] ml-6 ">
                    <DemoLine
                      dataSource={displayValueX ?? []}
                      legend={xlegend}
                      LCL={LCLx}
                      UCL={UCLx}
                      USL={usl}
                      LSL={lsl}
                      maxz={curxmax}
                      minz={curxmin}
                      AVER={AVERx}
                    />
                  </div>

                  <p className="text-center">数据点</p>
                </div>
              </td>
            </tr>
            <tr>
              <td className="h-48 border border-black border-b-2" colSpan={9}>
                <div className="p-2 static">
                  <p>移动极差(MR-图)</p>

                  <div className="h-[230px] ml-6  ">
                    <DemoLine
                      dataSource={displayValueMR ?? []}
                      legend={mrlegend}
                      UCL={UCLr}
                      LCL={LCLr}
                      AVER={AVERr}
                      maxz={curmrmax}
                      minz={curmrmin}
                    />
                  </div>
                  <p className="text-center">极差值</p>
                </div>
              </td>
            </tr>
            <tr>
              <td
                ref={tableHeight}
                className="h-80 border border-black border-b-2 p-3"
                colSpan={11}
              >
                <div className="border border-black border-t-1 ">
                  控制图表现：
                  {controlPerf}
                </div>
                <div className="border border-black border-t-0 flex flex-row ">
                  <span className="flex-0">过程能力分析：</span>
                  <span className="flex-auto font-bold font-['行楷'] text-center text-red-700">
                    {processAnalysis}
                  </span>
                </div>

                <div className="border border-black border-t-0 flex flex-row ">
                  <span className=" flex-none  text-center w-[70px] h-[21px] border-black   border-t-0   border-x-0  border align-middle">
                    序号
                  </span>
                  <div className=" grid grid-cols-25 w-full">
                    {spcBasicDatasX?.map((item) => {
                      const { code, x, value, seq } = item;
                      let index = x;
                      return (
                        <Popo
                          value={value}
                          code={code}
                          seq={seq}
                          index={index}
                        ></Popo>
                      );
                    })}
                  </div>
                </div>
                <div className="border border-black border-t-0 flex flex-row ">
                  <span className=" flex-none  text-center w-[70px] align-middle">
                    移动极差(MR)
                  </span>
                  <div className="grid grid-cols-25 w-full ">
                    {spcBasicDatasMR?.map((item) => {
                      const { code, x, value } = item;
                      let index = x;
                      return (
                        <div
                          className={
                            " border-black border   border-b border-t-0  flex flex-col "
                          }
                        >
                          <span className={"text-center   px-1   "}>
                            {index === 0 ? "" : value}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </div>
                {/* <div className="mt-6 font-medium text-left text-l text-slate-900 tracking-tight border border-black tracking-wide  ">
                  异常判断：1.有一点或多点超出控制线；2.连续9点在均值的同一侧；3.有7点连续上升或下降；4.连续14点相邻点上下交替；5.连续15点在中心线两侧的C区内；6.连续5点有4点在中心线同一侧的C区外；7.连续8点落在中心线两侧且无一在C区内；8.连续3点有2点落在中心线同一侧的B区外。
                </div> */}
              </td>
            </tr>
          </tbody>
        </table>
        {/* <Header ></Header> */}
        <div className=" absolute top-[180px] space-y-20">
          {finish ? (
            <Slider
              vertical
              range
              step={0.01}
              min={xmin}
              max={xmax}
              defaultValue={[xmin, xmax]}
              onChange={xonChange}
              className="  h-[150px]  left-0 z-50 "
              style={sliderstyle}
            />
          ) : (
            <div></div>
          )}
        </div>

        <div className="  absolute top-[498px] space-y-20">
          {finish ? (
            <Slider
              vertical
              range
              step={0.01}
              defaultValue={[mrmin, mrmax]}
              min={mrmin}
              max={mrmax}
              onChange={mronChange}
              className=" h-[150px -0 left-0 z-50"
              style={sliderstyle}
            />
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Xmr;
