import { useEffect, useCallback, useContext, useState } from 'react';
import { useNavigate, useParams, useRevalidator } from 'react-router';
import { Button } from 'antd';
import _, { debounce } from 'lodash-es';
import { set } from 'lodash/fp';
import { useIsFetching, useIsMutating } from '@tanstack/react-query';
import { useHotkeys } from 'react-hotkeys-hook';
import { useSearchParams } from 'react-router-dom';
import { FlexLayout } from '@labelu/components-react';

import commonController from '@/utils/common';
import { imageAnnotationRef, videoAnnotationRef, audioAnnotationRef } from '@/pages/tasks.[id].samples.[id]';
import type { SampleListResponse, SampleResponse } from '@/api/types';
import { MediaType, SampleState } from '@/api/types';
import { updateSampleState, updateSampleAnnotationResult } from '@/api/services/samples';
import { message } from '@/StaticAnt';

import AnnotationContext from '../../annotation.context';

interface AnnotationRightCornerProps {
  // 用于标注预览
  noSave?: boolean;

  fetchNext?: () => void;

  totalSize: number;
}

export const SAMPLE_CHANGED = 'sampleChanged';

function getAnnotationCount(_result: string | object) {
  const resultParsed = typeof _result !== 'object' ? JSON.parse(_result as string) : _result;
  let result = 0;

  for (const key in resultParsed) {
    if (key.indexOf('Tool') > -1 && key !== 'textTool' && key !== 'tagTool') {
      const tool = resultParsed[key];

      if (!tool.result) {
        let temp = 0;

        if (tool.length) {
          temp = tool.length;
        }

        result = result + temp;
      } else {
        result = result + tool.result.length;
      }
    }
  }

  return result;
}

export interface AnnotationLoaderData {
  sample: SampleResponse;
  samples: SampleListResponse;
}

const AnnotationRightCorner = ({ noSave, fetchNext, totalSize }: AnnotationRightCornerProps) => {
  const isFetching = useIsFetching();
  const isMutating = useIsMutating();
  const isGlobalLoading = isFetching > 0 || isMutating > 0;
  const navigate = useNavigate();
  const routeParams = useParams();
  const revalidator = useRevalidator();
  const taskId = routeParams.taskId;
  const sampleId = routeParams.sampleId;
  const { samples, setSamples, task } = useContext(AnnotationContext);
  const sampleIndex = _.findIndex(samples, (sample: SampleResponse) => sample.id === +sampleId!);
  const isLastSample = _.findIndex(samples, { id: +sampleId! }) === samples.length - 1;
  const isFirstSample = _.findIndex(samples, { id: +sampleId! }) === 0;
  const currentSample = samples[sampleIndex];
  const isSampleSkipped = currentSample?.state === SampleState.SKIPPED;
  const [isScoring, setIsScoring] = useState(false) as any;
  const [searchParams] = useSearchParams();

  let defaultScore = 100 as any;  // 默认分数
  let pathObject = [] as any; // 默认分数

  const gestureJSON = [{ "id": 123, "result": "{\"width\": 643, \"height\": 482, \"rotate\": 0, \"annotations\": [{\"toolName\": \"pointTool\", \"result\": [{\"order\": 1, \"id\": \"gu8z6qzl299\", \"label\": \"label-1\", \"x\": 559.6266766020865, \"y\": 266.5007451564829}, {\"order\": 2, \"id\": \"7ftk2qdax1l\", \"label\": \"label-1\", \"x\": 533.7667660208645, \"y\": 303.1356184798808}, {\"order\": 3, \"id\": \"yvmopgwtzsr\", \"label\": \"label-1\", \"x\": 489.2302533532042, \"y\": 357.01043219076007}, {\"order\": 4, \"id\": \"0xuytro4mlea\", \"label\": \"label-1\", \"x\": 507.90685543964236, \"y\": 80.45305514157974}, {\"order\": 5, \"id\": \"9er0b01ndtv\", \"label\": \"label-1\", \"x\": 484.9202682563339, \"y\": 151.5678092399404}, {\"order\": 6, \"id\": \"nkwn1w6dfir\", \"label\": \"label-1\", \"x\": 454.0320417287631, \"y\": 219.0909090909091}, {\"order\": 7, \"id\": \"9dud5s0aiet\", \"label\": \"label-1\", \"x\": 404.46721311475414, \"y\": 28.014903129657228}, {\"order\": 8, \"id\": \"13u5j7fwey9\", \"label\": \"label-1\", \"x\": 400.8755588673622, \"y\": 112.05961251862891}, {\"order\": 9, \"id\": \"77ka112fxf6\", \"label\": \"label-1\", \"x\": 392.2555886736215, \"y\": 187.48435171385992}, {\"order\": 10, \"id\": \"1py9549aon8\", \"label\": \"label-1\", \"x\": 329.7608047690015, \"y\": 68.2414307004471}, {\"order\": 11, \"id\": \"61iz6rn7ksl\", \"label\": \"label-1\", \"x\": 327.60581222056635, \"y\": 139.35618479880776}, {\"order\": 12, \"id\": \"298h2fvgzrg\", \"label\": \"label-1\", \"x\": 339.09910581222056, \"y\": 199.69597615499256}, {\"order\": 13, \"id\": \"4wung32308l\", \"label\": \"label-1\", \"x\": 248.58941877794337, \"y\": 131.45454545454547}, {\"order\": 14, \"id\": \"oyt1ghuofn\", \"label\": \"label-1\", \"x\": 265.82935916542476, \"y\": 187.48435171385992}, {\"order\": 15, \"id\": \"442lcs6qaxc\", \"label\": \"label-1\", \"x\": 284.5059612518629, \"y\": 226.274217585693}]}]}", "url": "/api/v1/tasks/attachment/upload/12/74e41d7c-0.png", "fileName": "0.png" }]
  const faceJSON = [{ "id": 131, "result": "{\"width\": 643, \"height\": 482, \"rotate\": 0, \"annotations\": [{\"toolName\": \"pointTool\", \"result\": [{\"order\": 1, \"id\": \"awo6s7hqc0v\", \"label\": \"label-1\", \"x\": 414.515006002401, \"y\": 93.17947178871549}, {\"order\": 2, \"id\": \"ywci0npvgio\", \"label\": \"label-1\", \"x\": 436.90036014405763, \"y\": 103.21428571428572}, {\"order\": 3, \"id\": \"ev4l8td51ct\", \"label\": \"label-1\", \"x\": 444.6194477791117, \"y\": 124.05582232893158}, {\"order\": 4, \"id\": \"ltx8vautp2d\", \"label\": \"label-1\", \"x\": 451.5666266506603, \"y\": 143.35354141656663}, {\"order\": 5, \"id\": \"fibzwh262g7\", \"label\": \"label-1\", \"x\": 447.70708283313326, \"y\": 167.2827130852341}, {\"order\": 6, \"id\": \"uaqtjznj1ur\", \"label\": \"label-1\", \"x\": 447.70708283313326, \"y\": 189.66806722689077}, {\"order\": 7, \"id\": \"akctgb4py46\", \"label\": \"label-1\", \"x\": 439.21608643457387, \"y\": 211.28151260504202}, {\"order\": 8, \"id\": \"xd8ru343zwn\", \"label\": \"label-1\", \"x\": 422.234093637455, \"y\": 227.49159663865547}, {\"order\": 9, \"id\": \"d8xiexq7r2\", \"label\": \"label-1\", \"x\": 402.16446578631457, \"y\": 234.4387755102041}, {\"order\": 10, \"id\": \"k7t0t6cucth\", \"label\": \"label-1\", \"x\": 379.00720288115247, \"y\": 232.12304921968789}, {\"order\": 11, \"id\": \"cln5amhgpb\", \"label\": \"label-1\", \"x\": 365.88475390156066, \"y\": 215.14105642256905}, {\"order\": 12, \"id\": \"0fbbczjf3v8v\", \"label\": \"label-1\", \"x\": 351.218487394958, \"y\": 197.3871548619448}, {\"order\": 13, \"id\": \"qx7o6v3jbt8\", \"label\": \"label-1\", \"x\": 346.5870348139256, \"y\": 170.37034813925573}, {\"order\": 14, \"id\": \"obbyco6u71d\", \"label\": \"label-1\", \"x\": 344.2713085234094, \"y\": 145.66926770708284}, {\"order\": 15, \"id\": \"x3yb3q0ih18\", \"label\": \"label-1\", \"x\": 354.3061224489796, \"y\": 115.56482593037215}]}]}", "url": "/api/v1/tasks/attachment/upload/18/6f839037-0.png", "fileName": "0.png" }]

  useEffect(() => {
    if (searchParams.get('type') === 'scoring') {
      setIsScoring(true)
    }
    return () => { };
  }, []);

  // 第一次进入就是40的倍数时，获取下一页数据
  useEffect(() => {
    if (isLastSample && samples.length < totalSize) {
      // TODO: fetchNext 调用两次
      fetchNext?.();
    }
  }, [fetchNext, isLastSample, samples.length, totalSize]);

  const navigateWithSearch = useCallback(
    (to: string) => {
      const searchStr = searchParams.toString();

      if (searchStr) {
        navigate(`${to}?${searchStr}`);
      } else {
        navigate(to);
      }
    },
    [navigate, searchParams],
  );



  const saveCurrentSample = useCallback(async () => {
    if (currentSample?.state === SampleState.SKIPPED || noSave || !task?.media_type) {
      return;
    }

    const result = {};
    let innerSample;

    if (task.media_type === MediaType.IMAGE) {
      // @ts-ignore
      const exportedResult = (await imageAnnotationRef.current?.getAnnotations()) ?? {};
      const engine = await imageAnnotationRef.current?.getEngine();

      result.width = engine?.backgroundRenderer?.image?.width ?? 0;
      result.height = engine?.backgroundRenderer?.image?.height ?? 0;
      result.rotate = engine?.backgroundRenderer?.rotate ?? 0;

      innerSample = await imageAnnotationRef?.current?.getSample();

      Object.keys(exportedResult).forEach((item) => {
        if (exportedResult?.[item]?.length) {
          result[item + 'Tool'] = {
            toolName: item + 'Tool',
            result: exportedResult[item],
          };
        }
      });
    } else if (task.media_type === MediaType.VIDEO) {
      const videoAnnotations = await videoAnnotationRef.current?.getAnnotations();

      Object.keys(videoAnnotations ?? {}).forEach((toolName) => {
        if (toolName === 'tag') {
          if (!result.tagTool) {
            result.tagTool = {
              toolName: 'tagTool',
              result: [],
            };
          }

          result.tagTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'text') {
          if (!result.textTool) {
            result.textTool = {
              toolName: 'textTool',
              result: [],
            };
          }

          result.textTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'frame') {
          if (!result.videoFrameTool) {
            result.videoFrameTool = {
              toolName: 'videoFrameTool',
              result: [],
            };
          }

          result.videoFrameTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'segment') {
          if (!result.videoSegmentTool) {
            result.videoSegmentTool = {
              toolName: 'videoSegmentTool',
              result: [],
            };
          }

          result.videoSegmentTool.result.push(...videoAnnotations[toolName]);
        }
      });

      innerSample = await videoAnnotationRef?.current?.getSample();
    } else if (task.media_type === MediaType.AUDIO) {
      const audioAnnotations = await audioAnnotationRef.current?.getAnnotations();

      Object.keys(audioAnnotations ?? {}).forEach((toolName) => {
        if (toolName === 'tag') {
          if (!result.tagTool) {
            result.tagTool = {
              toolName: 'tagTool',
              result: [],
            };
          }

          result.tagTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'text') {
          if (!result.textTool) {
            result.textTool = {
              toolName: 'textTool',
              result: [],
            };
          }

          result.textTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'frame') {
          if (!result.audioFrameTool) {
            result.audioFrameTool = {
              toolName: 'audioFrameTool',
              result: [],
            };
          }

          result.audioFrameTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'segment') {
          if (!result.audioSegmentTool) {
            result.audioSegmentTool = {
              toolName: 'audioSegmentTool',
              result: [],
            };
          }

          result.audioSegmentTool.result.push(...audioAnnotations[toolName]);
        }
      });

      innerSample = await audioAnnotationRef?.current?.getSample();
    }

    // 防止sampleid保存错乱，使用标注时传入的sampleid
    const body = set('data.result')(JSON.stringify(result))(currentSample);

    await updateSampleAnnotationResult(+taskId!, +innerSample.id!, {
      ...body,
      annotated_count: getAnnotationCount(body.data!.result),
      state: SampleState.DONE,
    });
  }, [currentSample, noSave, task?.media_type, taskId]);


  const saveCurrentSample2 = useCallback(async () => {
    if (currentSample?.state === SampleState.SKIPPED || noSave || !task?.media_type) {
      return;
    }

    const result = {};
    let innerSample;

    if (task.media_type === MediaType.IMAGE) {
      // @ts-ignore
      const exportedResult = (await imageAnnotationRef.current?.getAnnotations()) ?? {};
      const engine = await imageAnnotationRef.current?.getEngine();

      result.width = engine?.backgroundRenderer?.image?.width ?? 0;
      result.height = engine?.backgroundRenderer?.image?.height ?? 0;
      result.rotate = engine?.backgroundRenderer?.rotate ?? 0;

      innerSample = await imageAnnotationRef?.current?.getSample();

      Object.keys(exportedResult).forEach((item) => {
        if (exportedResult?.[item]?.length) {
          result[item + 'Tool'] = {
            toolName: item + 'Tool',
            result: exportedResult[item],
          };
        }
      });
    } else if (task.media_type === MediaType.VIDEO) {
      const videoAnnotations = await videoAnnotationRef.current?.getAnnotations();

      Object.keys(videoAnnotations ?? {}).forEach((toolName) => {
        if (toolName === 'tag') {
          if (!result.tagTool) {
            result.tagTool = {
              toolName: 'tagTool',
              result: [],
            };
          }

          result.tagTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'text') {
          if (!result.textTool) {
            result.textTool = {
              toolName: 'textTool',
              result: [],
            };
          }

          result.textTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'frame') {
          if (!result.videoFrameTool) {
            result.videoFrameTool = {
              toolName: 'videoFrameTool',
              result: [],
            };
          }

          result.videoFrameTool.result.push(...videoAnnotations[toolName]);
        }

        if (toolName === 'segment') {
          if (!result.videoSegmentTool) {
            result.videoSegmentTool = {
              toolName: 'videoSegmentTool',
              result: [],
            };
          }

          result.videoSegmentTool.result.push(...videoAnnotations[toolName]);
        }
      });

      innerSample = await videoAnnotationRef?.current?.getSample();
    } else if (task.media_type === MediaType.AUDIO) {
      const audioAnnotations = await audioAnnotationRef.current?.getAnnotations();

      Object.keys(audioAnnotations ?? {}).forEach((toolName) => {
        if (toolName === 'tag') {
          if (!result.tagTool) {
            result.tagTool = {
              toolName: 'tagTool',
              result: [],
            };
          }

          result.tagTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'text') {
          if (!result.textTool) {
            result.textTool = {
              toolName: 'textTool',
              result: [],
            };
          }

          result.textTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'frame') {
          if (!result.audioFrameTool) {
            result.audioFrameTool = {
              toolName: 'audioFrameTool',
              result: [],
            };
          }

          result.audioFrameTool.result.push(...audioAnnotations[toolName]);
        }

        if (toolName === 'segment') {
          if (!result.audioSegmentTool) {
            result.audioSegmentTool = {
              toolName: 'audioSegmentTool',
              result: [],
            };
          }

          result.audioSegmentTool.result.push(...audioAnnotations[toolName]);
        }
      });

      innerSample = await audioAnnotationRef?.current?.getSample();
    }

    // 防止sampleid保存错乱，使用标注时传入的sampleid
    const body = set('data.result')(JSON.stringify(result))(currentSample);

    let model = searchParams.get('model')
    let ExampleData = []
    if (model) {
      switch (model) {
        case 'gesture':
          ExampleData = JSON.parse(gestureJSON[0]?.result)
          break;
        case 'face':
          ExampleData = JSON.parse(faceJSON[0]?.result)
          break;

        default:
          break;
      }
    }
    let Example = ExampleData?.annotations[0]?.result

    let Data = JSON.parse(body?.data?.result)?.pointTool?.result

    // 正负小于5扣1分，正负大于5小于等于10扣2分，正负大于10小于等于20扣3分，正负大于20的扣5分


    const finalScore = calculateScore(Example, Data); // 扣分

    console.log(Example);
    console.log(Data);
    console.log('Final Score:', finalScore);

    defaultScore = defaultScore - finalScore
  }, [currentSample, noSave, task?.media_type, taskId]);



  const calculateScore = (arrayA: any, arrayB: any) => {
    // 假设数组A和B的长度相同  
    // if (arrayA.length !== arrayB.length) {  
    //   throw new Error('Arrays A and B must have the same length');  
    // }  

    let totalScore = 0;

    for (let i = 0; i < arrayA.length; i++) {
      const pointA = arrayA[i];
      const pointB = arrayB[i];

      // 计算x和y坐标的差距  
      const diffX = pointA.x - pointB.x;
      const diffY = pointA.y - pointB.y;

      // 计算xy点位差距之和的绝对值  
      const absSum = Math.abs(diffX) + Math.abs(diffY);

      // 根据差值之和的绝对值来确定扣分  
      if (absSum <= 5) {
        totalScore += 0; // 扣0分  
        pointA.totalScore = -0

      } else if (absSum > 5 && absSum <= 10) {
        totalScore += 1; // 扣1分  
        pointA.totalScore = -1

      } else if (absSum > 10 && absSum <= 20) {
        totalScore += 2; // 扣2分  
        pointA.totalScore = -2

      } else if (absSum > 20) {
        totalScore += 3; // 扣3分
        pointA.totalScore = -3

      }
    }
    pathObject = arrayA

    return totalScore;
  }



  const handleComplete = useCallback(async () => {
    await saveCurrentSample();
    navigateWithSearch(`/tasks/${taskId}/samples/finished`);
    setTimeout(revalidator.revalidate);
  }, [saveCurrentSample, navigateWithSearch, taskId, revalidator.revalidate]);


  const handleExamination = useCallback(async () => {
    await saveCurrentSample2();
    navigate('/scoring?model=' + searchParams.get('model'), { state: { object: pathObject, score: defaultScore } });
  }, [saveCurrentSample2]);


  const handleCancelSkipSample = async () => {
    if (noSave) {
      return;
    }

    await updateSampleState(
      {
        task_id: +taskId!,
        sample_id: +sampleId!,
      },
      {
        ...currentSample,
        state: SampleState.NEW,
      },
    );

    setSamples(
      samples.map((sample: SampleResponse) =>
        sample.id === +sampleId! ? { ...sample, state: SampleState.NEW } : sample,
      ),
    );
  };

  const handleSkipSample = async () => {
    if (noSave) {
      return;
    }

    await updateSampleState(
      {
        task_id: +taskId!,
        sample_id: +sampleId!,
      },
      {
        ...currentSample,
        state: SampleState.SKIPPED,
      },
    );

    setSamples(
      samples.map((sample: SampleResponse) =>
        sample.id === +sampleId! ? { ...sample, state: SampleState.SKIPPED } : sample,
      ),
    );

    await saveCurrentSample();
    // 切换到下一个文件
    if (!isLastSample) {
      navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);
    } else {
      navigateWithSearch(`/tasks/${taskId}/samples/finished`);
    }
  };

  const handleNextSample = useCallback(() => {
    // 到达分页边界，触发加载下一页
    if (sampleIndex === samples.length - 2 && samples.length < totalSize) {
      fetchNext?.();
    }

    if (noSave) {
      navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);

      return;
    }

    if (isLastSample) {
      handleComplete();
    } else {
      saveCurrentSample().then(() => {
        navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);
      });
    }
  }, [
    sampleIndex,
    samples,
    totalSize,
    noSave,
    isLastSample,
    fetchNext,
    navigateWithSearch,
    taskId,
    handleComplete,
    saveCurrentSample,
  ]);

  const handlePrevSample = useCallback(async () => {
    if (sampleIndex === 0) {
      return;
    }

    if (!noSave) {
      await saveCurrentSample();
    }

    navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex - 1}].id`)}`);
  }, [sampleIndex, noSave, navigateWithSearch, taskId, samples, saveCurrentSample]);

  const onKeyDown = debounce(
    useCallback(
      (e: KeyboardEvent) => {
        const key = e.key;
        if (key === 'a' && sampleIndex > 0) {
          handlePrevSample();
        } else if (key === 'd') {
          handleNextSample();
        }
      },
      [handleNextSample, handlePrevSample, sampleIndex],
    ),
    500,
  );

  useHotkeys(
    'ctrl+space, meta+space',
    () => {
      if (noSave) {
        return;
      }

      if (currentSample.state === SampleState.SKIPPED) {
        handleCancelSkipSample();
      } else {
        handleSkipSample();
      }
    },
    {
      keyup: true,
      keydown: false,
    },
    [handleSkipSample, handleCancelSkipSample, currentSample],
  );

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown);

    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [onKeyDown]);

  useHotkeys(
    'ctrl+s,meta+s',
    () => {
      if (noSave) {
        return;
      }

      saveCurrentSample().then(() => {
        message.success('已保存');
      });
    },
    {
      preventDefault: true,
    },
    [saveCurrentSample, noSave],
  );

  // 从外部触发上下翻页，比如快捷键，不知道上下sample的id
  useEffect(() => {
    const handleSampleChanged = (e: CustomEvent) => {
      const changeType = _.get(e, 'detail');

      if (changeType === 'next') {
        handleNextSample();
      } else if (changeType === 'prev') {
        handlePrevSample();
      }
    };

    document.addEventListener(SAMPLE_CHANGED, handleSampleChanged as EventListener);

    return () => {
      document.removeEventListener(SAMPLE_CHANGED, handleSampleChanged as EventListener);
    };
  }, [handleNextSample, handlePrevSample]);

  // 监听标注主页的左侧文件切换
  useEffect(() => {
    const saveCurrentSampleFromOutside = (e: CustomEvent) => {
      const _sampleId = _.get(e, 'detail.sampleId');

      if (noSave) {
        navigateWithSearch(`/tasks/${taskId}/samples/${_sampleId}`);

        return;
      }

      saveCurrentSample().then(() => {
        if (_.isNil(_sampleId)) {
          return;
        }

        navigateWithSearch(`/tasks/${taskId}/samples/${_sampleId}`);
      });
    };

    document.addEventListener(SAMPLE_CHANGED, saveCurrentSampleFromOutside as EventListener);

    return () => {
      document.removeEventListener(SAMPLE_CHANGED, saveCurrentSampleFromOutside as EventListener);
    };
  }, [navigateWithSearch, noSave, saveCurrentSample, taskId]);

  if (noSave) {
    return null;
  }

  return (
    <FlexLayout items="center" gap=".5rem">
      {isScoring ? (
        <Button type="primary" onClick={commonController.debounce(handleExamination, 100)} disabled={isGlobalLoading}>
          考试完成
        </Button>
      ) : (
        <>
          {isSampleSkipped ? (
            <Button type="text" onClick={commonController.debounce(handleCancelSkipSample, 100)} disabled={isGlobalLoading}>
              取消跳过
            </Button>
          ) : (
            <Button type="text" onClick={commonController.debounce(handleSkipSample, 100)} disabled={isGlobalLoading}>
              跳过
            </Button>
          )}
          {!isFirstSample && (
            <Button onClick={commonController.debounce(handlePrevSample, 100)} disabled={isGlobalLoading}>
              上一页
            </Button>
          )}
          {isLastSample ? (
            <Button type="primary" onClick={commonController.debounce(handleComplete, 100)} disabled={isGlobalLoading}>
              完成
            </Button>
          ) : (
            <Button type="primary" onClick={commonController.debounce(handleNextSample, 100)} disabled={isGlobalLoading}>
              下一页
            </Button>
          )}
        </>
      )}
    </FlexLayout>
  );
};
export default AnnotationRightCorner;
