const Block = (props) => {
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    // 向拖拽數(shù)據(jù)中添加項(xiàng)目    
    e.dataTransfer.setData('text', e.target.dataset.index);
  };
  return (
    <div onDragStart={handleDragStart}>
      <Button draggable data-index="Rectangle">
        二維碼
      </Button>
    </div>
  );
};

function DragEditor(props) {
  const { dvaStore, dispatch } = props;
  // 阻止瀏覽器默認(rèn)事件，否則 ondrop 不會(huì)觸發(fā)
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
  };
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    // 獲取拖拽元素的組件類(lèi)型
    const type = e.dataTransfer.getData('text');
    // COMPONENT_LIST 定義了組件的數(shù)據(jù)格式，根據(jù) type 匹配
    const component = COMPONENT_LIST.filter(
      (i) => i.component === type,
    )[0];
    // 將組件數(shù)據(jù)添加到 store，畫(huà)布將會(huì)根據(jù)數(shù)據(jù)渲染出組件
    if (component) {
      dispatch?.({
        type: 'store/addComponent',
        payload: component,
      });
    }
  };
  return (...);
}

function DragEditor(props: IEditorProps) {
  const { dvaStore, dispatch } = props;
  const [startAxis, setStartAxis] = React.useState({ x: 0, y: 0 }); // 鼠標(biāo)開(kāi)始拖動(dòng)時(shí)的位置
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    setStartAxis({ x: e.clientX, y: e.clientY });
  };
  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>, data: IComponentSchema) => {
    // 鼠標(biāo)移動(dòng)的距離
    const displacementX = e.clientX - startAxis.x;
    const displacementY = e.clientY - startAxis.y;
    // 計(jì)算組件的終點(diǎn)位置：初始位置 + 鼠標(biāo)移動(dòng)的距離
    const endX = Number(data.style.left) + displacementX;
    const endY = Number(data.style.top) + displacementY;
    // 限制坐標(biāo)的最小值為 0
    const top = Math.max(endY, 0);
    const left = Math.max(endX, 0);
    // 更新當(dāng)前組件樣式
    dispatch?.({
      type: 'store/setShapeStyle',
      payload: { top, left },
    });
  };
  return (
      {dvaStore.componentsData.map((i) => {
        return (
          <RenderComponent
            type={i.component}
            componentData={i}
            key={i.generateId}
            onDragStart={handleDragStart}
            onDragEnd={(e) => handleDragEnd(e, i)}
          />
        );
      })}
  );
}

export const COMPONENT_LIST = [
  {
    component: 'Rectangle', // 組件名稱(chēng)
    label: '矩形', // 左側(cè) Blocks 組件列表中顯示的名字
    propValue: '', // 組件所使用的值
    icon: 'BorderOuterOutlined', // 左側(cè)組件列表中顯示的 icon 圖標(biāo)
    animations: [], // 動(dòng)畫(huà)列表
    events: {}, // 事件列表
    style: {    // 組件樣式
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    },
  },
  {
    component: 'Text',
    label: '文字',
    propValue: '文字',
    icon: '',
    animations: [],
    events: {},
    style: {
      width: 200,
      height: 33,
      fontSize: 14,
      fontWeight: 500,
      lineHeight: '',
      letterSpacing: 0,
      textAlign: '',
      color: '',
    },
  },
];