import { useResource } from "@/modules/resource";
import { useQueditor } from "@queenjs-modules/queditor";
import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
import { Pack } from "@queenjs-modules/queditor/objects";
import { List } from "@queenjs/ui";
import { defineComponent } from "vue";
import MatItem from "./MatItem";
import MeshItem from "./MeshItem";

export default defineComponent({
  setup() {
    const queditor = useQueditor();
    const resource = useResource();
    const { store } = resource;

    const replaceMesh = async (record: any) => {
      const data = await resource.treeController.selectOnePackScene();
      if (!data) return;

      console.log("replaceMesh=>", record);
      const slotId = record.Id || record.id;
      const meshConf = resource.store.meshSlots.find(
        (item) => item.id == slotId
      );
      if (meshConf) {
        meshConf.pack = data;
      } else {
        const meshSlot = { id: slotId, pack: data };
        resource.store.meshSlots.push(meshSlot);
      }
      queditor.actions.insertMesh(data);
    };

    const replaceMat = async (record: any) => {
      const mat = await resource.treeController.selectOneMat();
      if (!mat) return;

      clickMat(record);
      const matConf = resource.store.matSlots.find(
        (item) => item.id == record.id
      );
      if (matConf) {
        matConf.material = mat;
      } else {
        const matSlot = { id: record.id, material: mat };
        resource.store.matSlots.push(matSlot);
      }

      record.thumbnail = mat?.thumbnail?.url;
      const targetComp = getTargetProCom(record);
      if (!targetComp || !mat) return;
      queditor.actions.updatePackProductCompMat(targetComp, mat);
    };

    const getTargetProCom = (record: any) => {
      const source: Pack["source"] = queditor.store.pack;
      const targetPro = source.products[0];
      const targetComp = targetPro?.components.find(
        (c) => c.name == record.meshSlotName
      );
      return targetComp;
    };

    const switchComp = (compName: string) => {
      switchSceneProdComp.call(
        queditor.controls.queen3dCtrl,
        queditor.store.pack.scenes[0].products[0].id,
        compName
      );
    };

    const clickMesh = (item: any) => {
      resource.store.setActiveKey({ type: "mesh", id: item.Id });
      switchComp(item.meshName);
    };

    const clickMat = (item: any) => {
      switchComp(item.meshSlotName);
      resource.store.setActiveKey({ type: "mat", id: item.id });
    };

    queditor.actions.on("initQueen3dScene:success", () => {
      const app = queditor.controls.queen3dCtrl.queen3d.getAppInstance();
      app.on("tap:click", (geom: any) => {
        const compName = geom?._userdata?.name;
        const mesh: any = resource.store.treeData.find(
          (d: any) => d.meshName == compName
        );
        if (!mesh) {
          resource.store.setActiveKey({ type: "" });
        } else {
          clickMat(mesh.children[0]);
        }
      });
    });

    return () => {
      const Meshlist = store.treeData || [];

      return (
        <div class="w-300px flex flex-col">
          <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
            模型列表
          </div>
          <List
            data={Meshlist}
            gap="10px"
            class="scrollbar flex-1 py-15px px-15px"
          >
            {{
              item: (record: any) => (
                <div>
                  <MeshItem
                    record={record}
                    active={record.Id == store.activeKeys.id}
                    onReplace={replaceMesh}
                    onClick={clickMesh}
                  />
                  <div class="grid gap-y-10px pt-10px pl-10px">
                    {record.children.map((item: any) => (
                      <MatItem
                        key={item.id}
                        record={item}
                        active={item.id == store.activeKeys.id}
                        onClick={clickMat}
                        onReplace={replaceMat}
                      />
                    ))}
                  </div>
                </div>
              ),
              loadmore: () => (
                <div class="text-center py-20px text-12px opacity-80">
                  没有更多了
                </div>
              ),
            }}
          </List>
        </div>
      );
    };
  },
});