import { useList } from "@/modules/list";
import { css } from "@linaria/core";
import { setQueentreeExplorer } from "@queenjs-modules/queentree-explorer";
import PickNodeSteps from "@queenjs-modules/queentree-explorer/components/PickNodeSteps";
import { Image } from "@queenjs/ui";
import { Button, Space, Table } from "ant-design-vue";
import Modal from "queenjs/adapter/vue/components/modal";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const { store, showModal, actions } = useList();
    setQueentreeExplorer({});
    const columns = [
      {
        title: "封面图",
        dataIndex: "thumbnail",
        key: "thumbnail",
        customRender: ({ text }: any) => {
          return <Image class="thumbnail" src={text} size={120} />;
        },
      },
      {
        title: "模型名称",
        dataIndex: "name",
        key: "name",
      },
    ];

    const showFiles = async () => {
      showModal(
        <PickNodeSteps
          onSubmit={(branchArr: any) => {
            const branch = branchArr[0][0];
            const dbId = branch.parent?.state.id;
            const defineId = branch.state.id;
            localStorage.setItem("dbId", dbId);
            localStorage.setItem("defineId", defineId);
            console.log("xxxxxxxxxxxxxxxxx", dbId, defineId);
            actions.getAssetList(dbId, defineId);
            Modal.clear();
          }}
          lastStepText="选择"
          steps={[
            {
              title: "选择模型库",
              content: () => {
                return (
                  <PickNodeSteps.PickNodeStep
                    options={{
                      nodeType: "branch",
                      childNodeType: "pack",
                    }}
                  />
                );
              },
            },
          ]}
          expConfig={{ showNodeToolbar: false, nodeListColumns: 6 }}
        />,
        {
          width: "600px",
        }
      );
    };
    return () => (
      <div class={ViewStyle}>
        <div class="table_header">
          <div class="title">模型列表</div>
          <div>
            <Space>
              <Button
                type="primary"
                ghost
                onClick={() => {
                  showFiles();
                }}
              >
                导入模型
              </Button>
            </Space>
          </div>
        </div>
        <Table
          size="small"
          columns={columns}
          dataSource={store.list}
          rowKey={(record) => record?._id}
        ></Table>
      </div>
    );
  },
});

const ViewStyle = css`
  padding: 20px;
  .table_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    text-align: center;
  }
  .thumbnail {
    width: 120px;
    object-fit: contain;
  }
`;
