import React, { useEffect, useRef } from "react";
import * as commonUtils from "@/utils/utils";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import styles from "./index.less";
import { message } from "antd";

const useQuickSwitchTabEvent = props => {
  const { formData = [] } = props;

  const handleGetFileUrl = async (title, cb) => {
    let url = "";
    if (!formData.length) {
      cb(url);
      return;
    }

    const config = formData.find(item => item.sGrd === "cppbt01");
    if (!config) {
      cb(url);
      return;
    }

    const result = await props.onGetDataSet({
      name: "cppbt01",
      configData: config,
      condition: {
        sSqlCondition: {
          sWorkOrderSlaveId: commonUtils.convertStrToObj(
            localStorage.xlybusinessglobalData
          ).currentWorkOrderInfo.sWorkOrderSlaveId
        }
      },
      isWait: true
    });

    const { cppbt01Data: tableData } = result;
    if (commonUtils.isEmptyArr(tableData)) {
      cb(url);
      return;
    }

    const data = tableData.find(item => item.sType === title);
    url = data?.sPicturePath;
    cb(url);
  };

  return {
    ...props,
    onGetFileUrl: handleGetFileUrl
  };
};

const QuickSwitchTabComponent = baseProps => {
  const props = useQuickSwitchTabEvent(
    useCommonBase({ ...baseProps, sModelsId: "12710101117087374661080" })
  );

  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.onselectstart = () => false;
    }
  }, []);

  const list = ["生产执行", "质量巡检", "拼版图", "产品图", "报工任务"];
  const listId = [
    "12710101117087374661080",
    "12710101117089395856660",
    "",
    "",
    "12710101117087404588200"
  ];

  return (
    <div className={styles.quickSwitchTabComponent} ref={ref}>
      {list.map((title, index) => {
        const currentId = listId[index];
        const currentMesPane = commonUtils.convertStrToObj(
          localStorage.xlybusinesscurrentMesPane
        );
        const { sModelsId } = currentMesPane;

        return (
          <div
            className={currentId === sModelsId ? styles.active : ""}
            onClick={() => {
              if (currentId) {
                props.onChangeRouter({
                  type: "name",
                  path: ["生产执行", title === "报工任务" ? "班组报工" : title]
                });
              } else {
                props.onGetFileUrl(title, url => {
                  if (!url) {
                    message.info(`暂无${title}`);
                    return;
                  }
                  props.onOpenCommonModal({
                    type: "commonFilePreviewModal",
                    url
                  });
                });
              }
            }}
          >
            {title}
          </div>
        );
      })}
    </div>
  );
};

export default QuickSwitchTabComponent;