queenshow/src/pages/website/EditMaterial/components/LeftPanel.tsx

import { useResource } from "@/modules/resource";
import { cx } from "@linaria/core";
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 { AssetItemFile } from "@queenjs-modules/queentree-explorer/objects/fileSystem/assetFiles";
import { Image, List } from "@queenjs/ui";
import { Button } from "ant-design-vue";
import { defineComponent } from "vue";
import { any, bool } from "vue-types";
import LibraryModal from "./LibraryModal";

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

    const replaceMesh = async () => {
      const res = await resource.showModal<AssetItemFile>(<LibraryModal />, {
        width: "900px",
      });
      console.log("res: ", res);

      const pack = await res.getAssetDetail();
      const data = queditor.helper.getRelatedSourceByProduct(
        pack.source as Pack["source"],
        res.state.id
      );
      console.log("data: ", data);
      queditor.actions.insertMesh(data);
    };

    return () => {
      const list = resource.store.sourceDetail.webEditor?.meshSlots || [];
      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={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
            {{
              item: (record: any) => (
                <ProductItem
                  record={record}
                  onChange={replaceMesh}
                  active={record.Id == resource.store.selectedId}
                  onClick={() => {
                    // queditor.
                    debugger;
                    switchSceneProdComp.call(
                      queditor.controls.queen3dCtrl,
                      queditor.store.pack.scenes[0].products[0].prodId,
                      record.meshName
                    );
                    resource.store.setSelectedId(record.Id);
                  }}
                />
              ),
              loadmore: () => (
                <div class="text-center py-20px text-12px opacity-80">
                  没有更多了
                </div>
              ),
            }}
          </List>
        </div>
      );
    };
  },
});

const ProductItem = defineComponent({
  props: {
    record: any().isRequired,
    active: bool().def(false),
  },
  emits: ["change", "click"],
  setup(props, { emit }) {
    return () => {
      const { active, record } = props;
      return (
        <div
          style={{ backgroundColor: "#303030" }}
          class={cx(
            "flex items-center py-6px px-12px rounded-4px border-1 border-solid cursor-pointer hover:opacity-80 transition-all",
            active ? "border-orange-200" : "border-transparent"
          )}
          onClick={() => emit("click", record)}
        >
          <Image src={record.thumbnail} class="w-48px rounded-4px" />
          <div class="ml-10px flex-1 mr-5px truncate w-0">
            {record.meshName || "未命名"}
          </div>
          <Button
            type="primary"
            ghost
            size="small"
            onClick={(e) => {
              e.stopPropagation();
              emit("change", record);
            }}
          >
            替换
          </Button>
        </div>
      );
    };
  },
});