import { useMatch } from "@/modules/match";
import { useQueditor } from "@queenjs-modules/queditor";
import { List } from "@queenjs/ui";
import { queenApi } from "queenjs";
import { defineComponent } from "vue";
import PanelCard from "../components/PanelCard";
import PanelGroup from "../components/PanelGroup";
import MatItem from "./MatItem";

export default defineComponent({
  setup() {
    const queditor = useQueditor();
    const match = useMatch();

    queditor.controls.drager.on(
      "drop:selfDrop",
      async (event: DragEvent, { type, data }: any, extraData: any) => {
        const dropData = await data();
        // console.error("dropData: ", dropData);
        if (type == "asset3d.mat") {
          dropMat(dropData, extraData);
        } else if (type == "asset3d.mesh") {
          dropMesh(dropData, extraData);
        }
      }
    );

    function dropMesh(dropData: any, target: any) {
      console.log("dropData: ", dropData, target);
      //
    }

    // 拖拽面料
    function dropMat(mat: IMaterial, extraData: any) {
      const currGroup = findmatsGroup(extraData);
      if (!currGroup.matIds) currGroup.matIds = [];

      // TODO 判断重复拖拽
      if (currGroup.matIds.includes(mat.id)) {
        queenApi.messageError("不能重复添加色卡");
        return;
      }
      // update
      const targetPro = queditor.store.pack.products.find(
        (p) => p.id == extraData.productId
      );
      const targetCom = targetPro?.components.find(
        (c) => c.name == extraData.name
      );
      if (!targetCom) return;
      queditor.actions.updatePackProductCompMat(targetCom, mat, true);
      currGroup.matIds.push(mat.id);
      currGroup.index = currGroup.matIds.length - 1;
    }

    function findmatsGroup(target: MatsMatchComp) {
      const currGroup = match.store.menuOptions.sourceData.mat.find(
        (r: MatsMatchComp) =>
          r.name == target.name && r.productId == target.productId
      );
      return currGroup;
    }

    const handleChange = (key: string, matsGroup: MatsMatchComp) => {
      switch (key) {
        case "rename":
          match.actions.renameMatGroup();
          break;
        case "lock":
          match.actions.lockMatGroup();
          break;
        case "clear":
          match.actions.clearMatGroup(matsGroup);
          break;
      }
    };

    return () => {
      return (
        <PanelCard
          title="部件库"
          onSave={() => {
            console.error(queditor.store.pack);
            match.store.designDetail.scenePack.source =
              queditor.store.pack;
            match.actions.saveDesign();
          }}
        >
          {match.store.menuOptions.sourceData?.mat.map(
            (matsGroup: MatsMatchComp, index: number) => {
              return (
                <PanelGroup
                  key={index}
                  class="cursor-pointer"
                  type="asset3d.mat"
                  active={
                    queditor.store.currActiveProdComp?.name == matsGroup.name
                  }
                  title={matsGroup.name}
                  tools={["rename", "lock", "clear"]}
                  target={matsGroup}
                  onChange={(key) => handleChange(key, matsGroup)}
                  onSelect={match.actions.switchMatsGroup}
                >
                  <List data={matsGroup.matIds || []} columns={5} gap="5px">
                    {{
                      item: (matId: string, index: number) => {
                        const currentMats =
                          match.helper.findMatById(matId);
                        return (
                          <MatItem
                            key={matId}
                            mat={currentMats}
                            active={index == matsGroup.index}
                            onClick={() =>
                              match.actions.switchMatsGroupIndex(
                                matsGroup,
                                index
                              )
                            }
                            onAction={(key: string) => {
                              switch (key) {
                                case "delete":
                                  match.actions.deleteGroupMat(
                                    matsGroup,
                                    index
                                  );
                                  break;
                                case "rename":
                                  match.actions.renameGroupMat(
                                    currentMats
                                  );
                                  break;
                              }
                            }}
                          />
                        );
                      },
                      empty: () => (
                        <div class="my-30px text-12px text-center text-gray-500">
                          暂无数据
                        </div>
                      ),
                    }}
                  </List>
                </PanelGroup>
              );
            }
          )}
          <div class="mt-20px text-12px text-center text-gray-400">
            没有更多了
          </div>
        </PanelCard>
      );
    };
  },
});