import { useState, useEffect, useMemo } from "react";
import { Image, Badge, Modal } from "antd";
import termClass from "classnames/bind";
import { DoubleRightOutlined } from "@ant-design/icons";
import styles from "./index.less";
// 通用方法
import * as commonUtils from "@/utils/utils";
import instructSet from "@/components/Common/CommonInstructSet";
import * as commonConfig from "@/utils/config";
// 菜单图标
const getNavIcon = (bActive, iconName = 2) => {
  const picName = bActive ? `${iconName}_1.png` : `${iconName}.png`;
  return require(`@/assets/btnComponentIcon/${picName}`);
};

const ButtonComponent = props => {
  const { app, sModelsId, currentContent, menuMap } = props;
  const { managementData = [] } = app;

  const [expand, setExpand] = useState(true);
  const [processReport, setProcessReport] = useState(false);

  const [dataList, setDataList] = useState([]);

  useEffect(
    () => {
      if (managementData.length) {
        const sParentId = menuMap[currentContent];
        if (!sParentId) return;
        const parent = managementData.find(item => item.sId === sParentId);
        if (!parent || !commonUtils.isNotEmptyArr(parent.children)) return;
        const btnList = parent.children;

        const newList = btnList
          .filter(
            item =>
              item.sName &&
              !item.sName.includes("Modal") &&
              item.sMenuName !== "工单物料信息"
          )
          .map(item => {
            const { sId, sMenuName, sName } = item;
            return {
              name: sMenuName,
              id: sId,
              sName,
              badeg: 0,
              // badeg: index === 0 ? 1 : index === 4 ? 10 : index === 8 ? 999 : 0,
              icon: getNavIcon(false),
              activeIcon: getNavIcon(true),
              disabled: false
            };
          });

        setDataList(newList);

        // let iIndex = newList.findIndex(item => item.name === '生产执行');
        // iIndex = iIndex === -1 ? 0 : iIndex;

        // props.onChangeRouter({
        //   routerPath: [currentContent],
        //   sModelsId: newList[iIndex].id,
        //   // sModelType: "indexMES/commonModel"
        //   sModelType: newList[iIndex].sName
        // });
      }

      // 是否为维修保养模块
      setProcessReport(
        ["scheduledTasks", "serviceUpkeep"].includes(props.currentContent) || true
      );
    },
    [JSON.stringify(managementData)]
  );

  const menuOrderList1 = [
    ["机台任务", 1],
    ["历史任务", 6],
    null,
    ["产品质量档案", 2],
    ["标签补打", 2],
    // null,
    ["工单信息", 2],
    ["工单在制品清单", 8],
    ["工艺作业指导书", 4],
    // ["相关文档", 5],
    null,
    null,
    null,
    null,
    // ["生产返工", 2],
    null,
    null,
    // ["工单物料信息", 7],
    // ["产前提醒信息", 7],
    // ["产品质量档案", 3],
    null,
    null
  ];

  const menuOrderList2 = [
    ["生产执行", 10],
    // ["来料检验", 5],
    // ["首签样通知", 11],
    ["签样/完成", 17],
    // ["工艺参数记录", 20],
    // ["异常/协助提报", 12],
    ["质量检验", 15],
    ["班组报工", 16],
    ["完工清场/确认", 13],
    // ["完工清场/确认单据", 13],
    // ["拆合版", 14],
    // ["防伪特征确认", 3],
    // ["班组交接", 18],
    // ["工单变更信息", 19],
    // ["其它机台日报", 16],
    // ["工艺巡检", 20]
    null,
    null,
    null,
  ];

  const menuOrderList3 = [
    ["设备保养", 21],
    // ["设备润滑", 2],
    ["设备点检", 22],
    ["设备维修", 23],
    // ["设备资料", 24]
  ];

  const menuList = [];
  new Array(16).fill("").forEach((_, index) => {
    const itemName = [
      menuOrderList1[index]?.[0],
      menuOrderList2[index]?.[0],
      menuOrderList3[index]?.[0]
    ];
    const icon = [
      menuOrderList1[index]?.[1],
      menuOrderList2[index]?.[1],
      menuOrderList3[index]?.[1]
    ];
    const item = dataList.find(item => itemName.includes(item.name));
    let result = "";
    if (item) {
      const iIndex = itemName.findIndex(item1 => item1 === item.name);
      const iconName = icon[iIndex];
      item.icon = getNavIcon(false, iconName);
      item.activeIcon = getNavIcon(true, iconName);
      result = item;
    }
    menuList.push(result);
  });

  dataList.forEach(item => {
    if (!menuList.some(item1 => item1.name === item.name)) {
      const iIndex = menuList.findIndex(item1 => !item1);
      menuList[iIndex] = item;
    }
  });

  // 点击
  const itemClick = e => {
    const { id, disabled, sName } = e;
    if (id == sModelsId || disabled) return;

    if (e.name !== "首签样通知") {
      props.onChangeRouter({
        routerPath: [currentContent],
        sModelsId: id,
        sModelType: sName
      });
    } else {
      props.openFirstNotice(e);
    }
  };

  const counterInfo = props.app.counterInfo || {};
  const { table0 = 0, table1 = 0, table2 = 0 } = counterInfo;
  // 每个item
  const renderItem = (e, index) => {
    // （取消）延迟加班按钮
    const userinfo = props.app.userinfo;
    // if (props.currentContent === "productionExec" && !e && index === 12) {
    //   const handleWorkOverTime = type => {
    //     const { app } = props;
    //     const { sMachineNameSId: sMachineGuid, sTeamNameSId: sTeamGuid } = app;
    //     instructSet({
    //       ...props,
    //       onSaveState: () => {},
    //       temp0Data: [
    //         {
    //           iOperateType: type,
    //           sMachineGuid,
    //           sTeamGuid
    //         }
    //       ],
    //       btnConfig: {
    //         showName: !userinfo.bDelayedOvertime ? "延迟加班" : "取消延迟加班",
    //         sInstruct: JSON.stringify([
    //           {
    //             opr: "exesql",
    //             data: [
    //               {
    //                 sql:
    //                   "call Sp_mes_workOvertime(${iOperateType},${sMachineGuid},${sTeamGuid})",
    //                 srcDataset: "temp0"
    //               }
    //             ]
    //           }
    //         ])
    //       },
    //       inscallback: () => {
    //         userinfo.bDelayedOvertime = !userinfo.bDelayedOvertime;
    //         localStorage.setItem(
    //           `${commonConfig.prefix}userlogin`,
    //           JSON.stringify(userinfo)
    //         );
    //         props.dispatch({
    //           type: "app/saveUserinfo",
    //           payload: userinfo
    //         });
    //       }
    //     });
    //   };

    //   const handleModalConfirm = () => {
    //     Modal.confirm({
    //       title: "温馨提示:",
    //       content: <div>{  userinfo.bDelayedOvertime ? '是否取消延时加班' : '是否延时加班' }</div>,
    //       okText: "确认",
    //       cancelText: "取消",
    //       closable: true,
    //       maskClosable: true,
    //       onOk() {
    //         handleWorkOverTime(userinfo.bDelayedOvertime ? 1 : 0 );
    //       },
    //       onCancel(e) {
    //         if (e.name === "close") {
    //           // handleWorkOverTime(2);
    //           Modal.destroyAll();
    //         }
    //       }
    //     });
    //   };

    //   return (
    //     <div
    //       key={"123"}
    //       onClick={() => {
    //         handleModalConfirm();
    //       }}
    //       className={termClass({
    //         btnsBoxItem: true,
    //         active: false,
    //         disabled: false
    //       })}
    //     >
    //       <Badge className="itemBadge" count={0} offset={[0, -1]}>
    //         <Image
    //           src={getNavIcon(false)}
    //           preview={false}
    //           style={{ width: 30 }}
    //         />
    //         <div
    //           className="itemName"
    //           title="延时加班"
    //           style={{ "-webkit-box-orient": "vertical" }}
    //         >
    //           {userinfo.bDelayedOvertime ? '取消延时加班' : '延时加班' }
    //         </div>
    //       </Badge>
    //     </div>
    //   );
    // }
    if (!e) return <div />;
    const currentWorkOrderInfo =
      commonUtils.convertStrToObj(localStorage.xlybusinessglobalData)
        .currentWorkOrderInfo || {};

    const iInterface = currentWorkOrderInfo.iInterface || userinfo.iInterface;

    let bHideTab = false;
    // 【踢废，拼接，倒卷，读码】完工清场记录不可点击
    if ([5, 6, 7, 8].includes(iInterface) && e.name === "完工清场/确认") {
      bHideTab = true;
    }

    // 生产执行+未上班+不是生产执行或者班组报工 点击给提示
    let bStartWorkLimit = false;
    const bStartWork = commonUtils.getAppData("userinfo", "bStartWork");
    if (
      props.currentContent === "productionExec" &&
      !bStartWork &&
      !["生产执行", "班组报工", "其它机台日报"].includes(e.name)
    ) {
      bStartWorkLimit = true;
    }

    // iInterface除了0-3的都不允许拆合板
    let bChaihebanLimit = false;
    // if (iInterface > 3 && ["拆合板"].includes(e.name)) {
    //   bChaihebanLimit = true;
    // }

    let count = e.disabled ? 0 : e.badeg;
    if (e.name === "机台任务") {
      count = table0;
    } else if (e.name === "历史任务") {
      count = table1;
    } else if (e.name === "工序任务") {
      count = table2;
    }

    return (
      <div
        key={e.id}
        onClick={() => {
          if (bStartWorkLimit) {
            Modal.warning({
              title: "温馨提示:",
              content: <div>请先上班后再操作！</div>,
              okText: "确认"
            });
            return;
          }

          if (bChaihebanLimit) {
            Modal.warning({
              title: "温馨提示:",
              content: <div>当前工序不允许拆合板！</div>,
              okText: "确认"
            });
            return;
          }

          if (bHideTab) return;
          itemClick(e);
        }}
        className={termClass({
          btnsBoxItem: true,
          active: e.id == sModelsId,
          disabled: e.disabled || bHideTab
        })}
      >
        <Badge className="itemBadge" count={count} offset={[0, -1]}>
          <Image
            src={e.id == sModelsId ? e.activeIcon : e.icon}
            preview={false}
            style={{ width: 30 }}
          />
          <div
            className="itemName"
            title={e.name}
            style={{ "-webkit-box-orient": "vertical" }}
          >
            {e.name}
          </div>
        </Badge>
      </div>
    );
  };

  return (
    <div
      className={`${styles.buttonComponent} ${
        expand ? styles.expand : styles.packup
      } ${processReport ? styles.specialBtns : ""}`}
    >
      <div className={`btns`}>
        <div className={styles.btnsBox}>
          {menuList.map((e, index) => renderItem(e, index))}
        </div>
      </div>
      <div className="arrow">
        <div className="expandCut">
          <DoubleRightOutlined
            rotate={expand ? -90 : 90}
            onClick={() => setExpand(!expand)}
          />
        </div>
      </div>
    </div>
  );
};

export default ButtonComponent;