import React, {
  useCallback,
  useRef,
  useReducer,
  useEffect,
  useState,
  useMemo,
} from "react";
import { message } from "antd";
import moment from "moment";
import Decimal from "decimal.js"
import Row from "../../../components/screen/Row";
import { FormItem } from "../FormItem";
import { Button } from "../Button";
import {
  ModelSetting,
  ModelBreak,
  ModelOverproductionBatch,
  ModelFinish,
  ModelOverPrint,
} from "./ModalClient";
import { logo } from "./logo";
import { request } from "../utils";
import {
  useEquipKey,
  useSetting,
  useMetaInfo,
  useWsInfo,
  useUser,
  isDev,
} from "./hooks";

const headerHeight = 56;

/**
 * url获取token
 * 获取用户信息
 * 获取权限信息
 * 
 * url获取ip
 * ip - 设置信息
 * 设置信息 - 产品信息
 * 设置信息 - socket 重量信息
 *
 * 任务状态:
 * 无任务 待包装 包装中 中断 包装完成
 */

function formReducer(state, action) {
  let { type, value } = action;
  // console.log("action", action);
  if (type === "FROM_INIT") return value;
  if (type === "FROM_CHANGE") return Object.assign({}, state, value);
  return state;
}

function PackagingOperation(props) {
  const ModelSettingRef = useRef();
  const ModelBreakRef = useRef();
  const ModelOverproductionBatchRef = useRef();
  const ModelFinishRef = useRef();

  const [isEdit, setIsEdit] = useState(false);

  const { equipKey, getEquipKey } = useEquipKey();
  const { settingData, getSettingData } = useSetting(equipKey);
  const [metaInfo, getMetaInfo] = useMetaInfo(settingData?.equipCode);
  const [wsData] = useWsInfo(settingData?.equipCode, isEdit);
  const [user, getUser] = useUser();

  // 页面表单变化
  const [form, dispatch] = useReducer(formReducer, {});
  const onFormChange = useCallback((type, value) => {
    dispatch({ type: "FROM_CHANGE", value: { [type]: value } });
  }, []);

  // 更新当前登录用户
  useEffect(() => {
    dispatch({ type: "FROM_CHANGE", value: { userName: user?.userName } });
  }, [user]);

  // 初始化表单
  useEffect(() => {
    dispatch({ type: "FROM_INIT", value: metaInfo });
    getUser();
  }, [metaInfo, getUser]);

  // ws更新表单
  useEffect(() => {
    let { czzl, fczl } = wsData || {};
    dispatch({ type: "FROM_CHANGE", value: { czzl, fczl } });
  }, [wsData]);

  // 更新净重
  const netWeight = useMemo(() => {
    let { bagWeight } = settingData;
    let { fczl } = form;
    if (isNaN(parseFloat(fczl))) return "";
    if (isNaN(parseFloat(bagWeight))) return "";
    let res = Decimal(fczl).sub(Decimal(bagWeight)).toNumber();
    if (isNaN(res)) return "";
    return res;
  }, [form, settingData]);

  // 更新持续时长
  const [durationTime, setDurationTime] = useState(0);
  useEffect(() => {
    let getTime = () => {
      let {
        startTime,
        status,
        recoverDate,
        interruptDate,
        intrptDuration = 0,
      } = metaInfo;
      // console.log("metaInfo", metaInfo, {startTime, status, recoverDate, interruptDate, intrptDuration })
      /**
       * 无任务 “”
       * 待包装 “”
       * 包装中 currentDate - startTime - intrptDuration
       * 中断 interruptDate - startTime - intrptDuration
       * 包装完成 endTime - startTime - intrptDuration
       */
      if (["no_job", "TO_BE_PACKAGED"].includes(status)) return "";
      let dif = new Date(startTime).getTime() + intrptDuration * 1000;
      if (status === "IN_PACKAGING") return new Date().getTime() - dif;
      if (status === "INTERRUPT")
        return new Date(interruptDate).getTime() - dif;
      if (status === "PACKAGING_COMPLETED")
        return new Date(endTime).getTime() - dif;
    };
    let timmer;
    let run = () => {
      setDurationTime(getTime());
      timmer = setTimeout(() => {
        run();
      }, 1000);
    };
    run();
    return () => {
      clearTimeout(timmer);
    };
  }, [metaInfo]);
  const durationTimeStr = useMemo(() => {
    let time = moment.duration(durationTime);
    let res = "";
    let sec = time.seconds();
    let min = time.minutes();
    let hor = time.hours();
    let day = time.days();
    let m = time.months();
    let y = time.years();
    let flag = false;
    let arr = [y, m, day, hor, min, sec];
    let unt = ["年", "月", "日", "时", "分", "秒"];
    arr.forEach((val, index) => {
      if (val) {
        flag = true;
        res += val + unt[index];
      } else if (flag) {
        res += 0 + unt[index];
      }
    });
    return res;
  }, [durationTime]);

  // 包装袋数
  const [realBagNo, setRealBagNo] = useState(1);
  useEffect(() => {
    let { bagNo, outBagNo, outBatch } = form;
    let res = 0;
    if (outBatch) {
      res = parseFloat(outBagNo) + 1;
    } else {
      res = parseFloat(bagNo) + 1;
    }
    setRealBagNo(isNaN(res) ? 0 : res);
  }, [form.bagNo, form.outBagNo, form.outBatch]);

  // 设备状态
  const equipStatus = useMemo(() => {
    if (form.status === "no_job") return "无任务";
    if (form.status === "INTERRUPT") return "中断";
    if (form.status === "TO_BE_PACKAGED") return "待包装";
    if (form.status === "IN_PACKAGING") return "包装中";
    if (form.status === "PACKAGING_COMPLETED") return "包装完成";
    return "-";
  }, [form.status]);

  // 按钮启用禁用
  const btnEnable = useMemo(() => {
    /**
     * 超产批号 ？
     * 设置 - 权限
     * 历史记录 - 非无任务
     * 开始 - 待包装
     * 打印 - 包装中
     * 结束 - 包装中 中断
     * 中断 - 包装中
     * 编辑 - 权限 包装中
     * 编辑完成 - 权限 包装中
     */
    return {
      overPro: true,
      setting: true,
      history: ["中断", "待包装", "包装中", "包装完成"].includes(equipStatus),
      start: ["待包装"].includes(equipStatus),
      print: ["包装中"].includes(equipStatus),
      finish: ["包装中", "中断"].includes(equipStatus),
      break: ["包装中"].includes(equipStatus),
      edit: ["包装中"].includes(equipStatus),
    };
  }, [equipStatus]);

  // 退出
  const handleCancel = useCallback(() => {
    window.parent.postMessage({ type: "logOut" }, window.config.mesHost);
  }, []);

  // 设置
  const handleSetting = useCallback(() => {
    if (equipKey) {
      let settingRes = Object.assign({}, settingData || {}, { equipKey });
      ModelSettingRef.current.show(settingRes, getSettingData);
    }
  }, [equipKey, getSettingData, settingData]);

  // 超产批号
  const handleOverproduct = useCallback(() => {
    ModelOverproductionBatchRef.current.show(
      metaInfo.workOrderCode,
      (outBatch) => {
        onFormChange("outBatch", outBatch);
      }
    );
  }, [metaInfo.workOrderCode, onFormChange]);

  // 历史记录
  const handleHistory = useCallback(() => {
    window.parent.postMessage(
      { type: "history", data: metaInfo },
      window.config.mesHost
    );
  }, [metaInfo]);

  // 开始
  const handleStart = useCallback(() => {
    if (metaInfo.gid)
      return new Promise((resolve, reject) => {
        request({
          url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/startPack`,
          bodys: { gid: metaInfo.gid },
        })
          .then((res) => {
            if (res.success) {
              message.success("开始成功！");
              getMetaInfo();
            }
          })
          .finally(() => {
            resolve();
          });
      });
  }, [metaInfo.gid, getMetaInfo]);

  // 打印
  const ModelOverPrintRef = useRef();
  const [isGT, setIsGT] = useState(false)
  const handlePrint = useCallback((GT, callback) => {
    if (GT === undefined) GT = isGT;
    let { gid: recordGid } = metaInfo;
    let { gid: setInfoGid, bagWeight } = settingData;
    let {
      fczl,
      czzl,
      outBatch,
      materialCode,
      productLevel,
      startTime,
      materialName,
      workOrderCode,
    } = form;
    // collectValue 页面可见数据 除自定义字段外的 对象json 字符串
    let collectValue = {
      materialCode,
      productLevel,
      startTime,
      materialName,
      workOrderCode,
      czzl,
      fczl,
      bagWeight,
      yetWeight: netWeight,
      bagNo: realBagNo,
    };
    let data = {
      recordGid,
      mark: GT? "GT": undefined,
      fczl,
      bagNo: realBagNo,
      setInfoGid,
      yetWeight: netWeight,
      outBatch,
      collectValue: JSON.stringify(collectValue),
    };
    if (recordGid)
      return new Promise((resolve, reject) => {
        request({
          url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/print`,
          bodys: data,
        })
          .then((res) => {
            // if (isDev) { 
            //   if (res.message.indexOf('打印命令发送失败') > -1) { 
            //     res = {
            //       success: false,
            //       data: "GT",
            //       message: "message text"
            //     }
            //   }
            // }
            if (res && res.success) {
              message.success("打印成功！");
              setRealBagNo(parseFloat(realBagNo) + 1);
            } else {
              if (res?.data === "GT") {
                ModelOverPrintRef.current.show(res.message, (close) => {
                  setIsGT(true);
                  return handlePrint(true, close);
                })
              }else message.error(res?.message);
            }
          })
          .finally(() => {
            resolve();
            callback && callback();
          });
      });
  }, [metaInfo, settingData, form, netWeight, realBagNo, isGT]);

  // 结束
  const handleFinish = useCallback(() => {
    ModelFinishRef.current.show({ gid: metaInfo.gid }, getMetaInfo);
  }, [metaInfo.gid, getMetaInfo]);

  // 中断
  const handleBreak = useCallback(() => {
    ModelBreakRef.current.show({ gid: metaInfo.gid }, getMetaInfo);
  }, [metaInfo.gid, getMetaInfo]);

  // 编辑
  const handleEdit = useCallback(() => {
    // console.log("handleEdit");
    if (isEdit) {
      setIsEdit(false);
    } else {
      setIsEdit(true);
    }
  }, [isEdit]);

  return (
    <div className="client-content">
      <div className="client-content-header">
        <div className="logo-box">
          <img src={logo} alt="logo" className="logo-img" />
        </div>
        <div className="btn-box">
          <div className="btn link-btn" onClick={handleCancel}>
            退出
          </div>
        </div>
      </div>
      <div className="client-content-body">
        <div className="card">
          <div className="card-header">
            <span className="title">产品信息</span>
            <div className="extra">
              <Button
                title="超产批号"
                ghost
                onClick={handleOverproduct}
                enable={btnEnable.overPro}
              />
              <ModelOverproductionBatch ref={ModelOverproductionBatchRef} />
              <Button
                title="设置"
                ghost
                ruleCode="set_pack_info"
                onClick={handleSetting}
                enable={btnEnable.setting}
              />
              <ModelSetting ref={ModelSettingRef} />
            </div>
          </div>
          <div className="card-body">
            <div className="statu-box">{equipStatus}</div>
            <div className="statu-content">
              <Row gutter={32}>
                <Row.Col span={8}>
                  <FormItem value={form.materialCode} title={"产品编码"} />
                </Row.Col>
                <Row.Col span={8}>
                  <FormItem value={form.productLevel} title={"产品型号"} />
                </Row.Col>
                <Row.Col span={8}>
                  <FormItem value={form.startTime} title={"开始时间"} />
                </Row.Col>
                <Row.Col span={8}>
                  <FormItem value={form.materialName} title={"产品名称"} />
                </Row.Col>
                <Row.Col span={8}>
                  <FormItem value={form.workOrderCode} title={"产品批次号"} />
                </Row.Col>
                <Row.Col span={8}>
                  <FormItem value={durationTimeStr} title={"持续时长"} />
                </Row.Col>
              </Row>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <span className="title">生产信息</span>
            <div className="extra">
              <Button
                title="历史记录"
                ghost={true}
                onClick={handleHistory}
                enable={btnEnable.history}
              />
            </div>
          </div>
          <div className="card-body">
            <Row gutter={32}>
              <Row.Col span={8}>
                <FormItem
                  value={form.czzl}
                  title={"毛重吨包/KG"}
                  horizontal={false}
                  type="number"
                  readonly={!isEdit}
                  onChange={(val) => onFormChange("czzl", val)}
                />
              </Row.Col>
              <Row.Col span={8}>
                <FormItem
                  value={form.fczl}
                  title={"复称重量吨包/KG"}
                  horizontal={false}
                  type="number"
                  readonly={!isEdit}
                  onChange={(val) => onFormChange("fczl", val)}
                />
              </Row.Col>
              <Row.Col span={8}>
                <FormItem
                  value={form.userName}
                  title={"复称人"}
                  horizontal={false}
                />
              </Row.Col>
              <Row.Col span={8}>
                <FormItem
                  value={settingData.bagWeight}
                  title={"包装袋重量/KG"}
                  horizontal={false}
                />
              </Row.Col>
              <Row.Col span={8}>
                <FormItem
                  value={netWeight}
                  title={"净重/KG"}
                  horizontal={false}
                />
              </Row.Col>
              <Row.Col span={8}>
                <FormItem
                  value={realBagNo}
                  title={"包装袋数"}
                  horizontal={false}
                  type="number"
                  readonly={false}
                  min={1}
                  onChange={(val) => setRealBagNo(val)}
                />
              </Row.Col>
            </Row>
          </div>
        </div>
      </div>
      <div className="client-content-footer">
        <Button
          title="开始"
          type="success"
          size="large"
          ruleCode="startPack"
          onClick={handleStart}
          enable={btnEnable.start}
        />
        <Button
          title="确认打印"
          size="large"
          ruleCode="print_pack"
          onClick={handlePrint}
          enable={btnEnable.print}
        />
        <ModelOverPrint ref={ModelOverPrintRef}/>
        <Button
          title="结束"
          type="danger"
          size="large"
          ruleCode="end_pack"
          enable={btnEnable.finish}
          onClick={handleFinish}
        />
        <ModelFinish ref={ModelFinishRef} />
        <Button
          title="中断"
          type="warning"
          size="large"
          ruleCode="interrupt_pack"
          enable={btnEnable.break}
          onClick={handleBreak}
        />
        <ModelBreak ref={ModelBreakRef} />
        <Button
          title={!isEdit ? "编辑" : "编辑完成"}
          type="info"
          size="large"
          ruleCode="eidt_fczl"
          onClick={handleEdit}
          enable={btnEnable.edit}
        />
      </div>
      <style jsx>{`
        .client-content {
          display: flex;
          flex-direction: column;
          height: 100vh;
        }
        .client-content-header {
          height: ${headerHeight}px;
          padding: 0 16px;
          background: #272f3e;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        }
        .logo-box {
          float: left;
          line-height: ${headerHeight}px;
        }
        .logo-img {
          width: 175px;
          height: 28px;
          display: inline-block;
        }
        .btn-box {
          float: right;
        }
        .btn.link-btn {
          display: inline-block;
          line-height: ${headerHeight}px;
          padding: 0 24px;
          color: white;
          font-size: 20px;
          cursor: pointer;
        }
        .client-content-footer {
          background: white;
          height: 96px;
          text-align: center;
          padding: 20px 0;
        }
        .client-content-body {
          background: rgb(243, 243, 243);
          flex: 1;
          overflow: auto;
          padding: 18px 16px 0;
        }
        .card {
          background: #ffffff;
          border-radius: 4px;
          margin-bottom: 16px;
          padding: 24px 32px;
        }
        .card-header {
          overflow: hidden;
        }
        .card-header .title {
          font-size: 28px;
          color: #000000 85%;
        }
        .card-header .extra {
          float: right;
        }
        .card-body {
          padding: 20px 0;
          overflow: hidden;
        }
        .statu-box {
          height: 112px;
          width: 112px;
          background: #fff7e8;
          border: 1px solid #f16704;
          border-radius: 6px;
          line-height: 112px;
          font-size: 24px;
          text-align: center;
          color: #faab0c;
          float: left;
        }
        .statu-content {
          margin-left: ${112 + 32}px;
        }
      `}</style>
    </div>
  );
}

export default PackagingOperation;