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;

  const [expand, setExpand] = useState(true);
  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")
          )
          .map(item => {
            const { sId, sMenuName, sName } = item;
            return {
              name: sMenuName,
              id: sId,
              sName,
              badeg: 0,
              icon: getNavIcon(false),
              activeIcon: getNavIcon(true),
              disabled: false
            };
          });

        setDataList(newList);
      }
    },
    [JSON.stringify(managementData)]
  );

  const iconJson = {
    "机台任务": 1,
    "标签补打": 2,
    "工单信息": 2,
    "产品质量档案": 3,
    "工艺作业指导书": 4,
    "相关文档": 5,
    "历史任务": 6,
    "生产返工": 2,
    "产前提醒信息": 7,
    "工单在制品清单": 8,
    "生产执行": 10,
    "首签样通知": 11,
    "异常/协助提报": 12,
    "完工清场/确认单据": 13,
    "拆合版": 14,
    "质量巡检": 15,
    "班组报工": 16,
    "签样/完成": 17,
    "班组交接": 18,
    "工单变更信息": 19,
    "其它机台日报": 16,
    "印刷出版任务": 2,
    "工艺巡检": 20,
    "设备保养": 21,
    "设备点检": 22,
    "设备维修": 23,
    "设备资料": 24
  }

  const menuList = dataList.map(item => {
    const iconName = iconJson[item.name];
    item.icon = getNavIcon(false, iconName);
    item.activeIcon = getNavIcon(true, iconName);
    return 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
        } ${dataList.length && dataList.length <= 8 ? styles.specialBtns : dataList.length > 16 ? styles.specialBtns1 : ""}`}
    >
      <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;