import { useCollocation } from "@/modules/collocation";
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 collocation = useCollocation();

    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);
        }
      }
    );

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

    // 拖拽面料
    function dropMat(mat: IMaterial, extraData: any) {
      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);

      const currComp = findCurrentComp(extraData);
      if (!currComp.matIds) currComp.matIds = [];

      // TODO 判断重复拖拽
      if (currComp.matIds.includes(mat.id)) {
        queenApi.messageError("不能重复添加色卡");
        return;
      }

      currComp.matIds.push(mat.id);
      currComp.index = currComp.matIds.length - 1;
    }

    function findCurrentComp(target: MatsMatchComp) {
      const currComp = collocation.store.menuOptions.sourceData.mat.find(
        (r: MatsMatchComp) =>
          r.name == target.name && r.productId == target.productId
      );
      return currComp;
    }

    async function switchMatsGroupIndex(
      matsGroup: MatsMatchComp,
      index: number
    ) {
      const currComp = findCurrentComp(matsGroup);
      currComp.index = index;

      //
      const targetPro = queditor.store.pack.products.find(
        (p) => p.id == matsGroup.productId
      );
      const targetCom = targetPro?.components.find(
        (c) => c.name == matsGroup.name
      );
      if (!targetCom) return;
      const mat = queditor.store.pack.mats.find(
        (m) => m.id == currComp.matIds[index]
      );
      if (!mat) return;
      queditor.actions.updatePackProductCompMat(targetCom, mat, false);
    }

    const switchMatsGroup = () => {
      // switchSceneProdComp.call(this, sceneProductId, compName);
      // queditor.controls.queen3dCtrl.queen3d.
    };

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

    return () => {
      return (
        <PanelCard
          title="部件库"
          onSave={() => {
            console.error(queditor.store.pack);
            collocation.store.designDetail.scenePack.source =
              queditor.store.pack;
            collocation.actions.saveDesign();
          }}
        >
          {collocation.store.menuOptions.sourceData?.mat.map(
            (matsGroup: MatsMatchComp, index: number) => {
              return (
                <PanelGroup
                  key={index}
                  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={switchMatsGroup}
                >
                  <List data={matsGroup.matIds || []} columns={5} gap="5px">
                    {{
                      item: (matId: string, index: number) => {
                        return (
                          <MatItem
                            key={matId}
                            mat={collocation.helper.findMatById(matId)}
                            active={index == matsGroup.index}
                            onClick={() =>
                              switchMatsGroupIndex(matsGroup, index)
                            }
                          />
                        );
                      },
                      empty: () => (
                        <div class="my-30px text-12px text-center text-gray-500">
                          暂无数据
                        </div>
                      ),
                    }}
                  </List>
                </PanelGroup>
              );
            }
          )}
        </PanelCard>
      );
    };
  },
});