import { useState, useEffect } 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 * as commonFunc from "@/components/Common/commonFunc";
// 菜单图标
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, userinfo = {} } = app;
  const { iTeamType } = userinfo;
  console.log('managementData', managementData);
  if ([3, 4, 5, 6].includes(iTeamType)) {
    const scheduledTasks = managementData.find(
      item => item.sMenuName === "计划任务"
    );
    if (scheduledTasks && scheduledTasks.children) {
      const iIndex = scheduledTasks.children.findIndex(
        child => child.sMenuName === "生产返工"
      );
      if (iIndex !== -1) {
        scheduledTasks.children.splice(iIndex, 1);
      }
    }

    const restArr = [];
    if (iTeamType === 3) {
      restArr.push("研发工艺参数");
    } else if ([4, 5].includes(iTeamType)) {
      restArr.push("研发工艺参数(烫金)");
      restArr.push("研发工艺参数(模切)");
    } else if (iTeamType === 6) {
      restArr.push("研发工艺参数(丝印)");
    }
    const productionExecMain = managementData.find(
      item => item.sMenuName === "生产执行"
    );
    if (productionExecMain && productionExecMain.children) {
      const forLength = productionExecMain.children.length;
      for (let i = 0; i < forLength; i++) {
        const iIndex = productionExecMain.children.findIndex(
          child =>
            !["生产执行", "质量巡检", ...restArr].includes(child.sMenuName)
        );
        if (iIndex !== -1) {
          productionExecMain.children.splice(iIndex, 1);
        }
      }
    }
  } else {
    console.log('managementData', managementData);
    const productionExecMain = managementData.find(
      item => item.sMenuName === "生产执行"
    );
    if (productionExecMain && productionExecMain.children) {
      for (let i = 0; i < 4; i++) {
        const iIndex = productionExecMain.children.findIndex(child =>
          child.sMenuName.includes("研发工艺参数")
        );
        if (iIndex !== -1) {
          productionExecMain.children.splice(iIndex, 1);
        }
      }
    }
  }

  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);
      }

      // 是否为维修保养模块
      setProcessReport(
        props.currentContent === "serviceUpkeep" ||
          (props.currentContent === "productionExec" &&
            [3, 4, 5, 6].includes(iTeamType))
      );
    },
    [JSON.stringify(managementData)]
  );

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

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

  const menuOrderList3 = [
    ["设备保养", 21],
    ["设备点检", 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, table3 = 0 } = counterInfo;
  // 每个item
  const renderItem = (e, index) => {
    // （取消）延迟加班按钮
    const userinfo = props.app.userinfo;
    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;
    } else if (e.name === "其它机台日报") {
      count = table3;
    }
    const workFirst = commonFunc.showLocalMessage(props, 'workFirst！', '请先上班后再操作');

    return (
      <div
        key={e.id}
        onClick={() => {
          if (bStartWorkLimit) {
            Modal.warning({
              title: "温馨提示:",
              content: <div>{workFirst}</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;