import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
import { css } from "@linaria/core";
import { Button, Space, Table } from "ant-design-vue";

import { Image, Modal } from "queenjs/ui";
import AddModel from "./addModel";
import { useCtx } from "../../context";
import ExportModal from "./components/exportModal";

export default defineComponent({
  setup() {
    const ctx = useCtx();
    const columns = [
      {
        title: "文物名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "封面图",
        dataIndex: "thumbnail",
        key: "thumbnail",
        customRender: ({ text }: any) => {
          return <Image class="thumbnail" src={text} size={120} />;
        },
      },
      {
        title: "展示形式",
        dataIndex: "type",
        key: "type",
        customRender: ({ text }: any) => {
          switch (text) {
            case "img":
              return "图片";
            case "video":
              return "视频";
            case "3D":
              return "模型";
          }
        },
      },
      {
        title: "操作",
        key: "action",
        dataIndex: "action",
        customRender: ({ record }) => {
          return (
            <Space>
              <Button type="link" onClick={() => showEdit(record)}>
                编辑
              </Button>

              <Button
                type="link"
                danger
                onClick={() => {
                  del(record);
                }}
              >
                删除
              </Button>
            </Space>
          );
        },
      },
    ];

    const showAdd = async () => {
      const values: any = await Modal.form({
        title: "添加文物",
        content: <AddModel />,
        formData: {},
        width: "6rem",
      });
      if (!values) return;
      // const uploadRes = await ctx.list.uploader.uploadBlobs(values, "museum");
      // if (uploadRes) {
      //   ctx.ui.messageError(uploadRes);
      //   return false;
      // }
      const res = await ctx.list.actions.addArtifacts(values);
    };
    const showEdit = async (record: any) => {
      const item = await ctx.list.actions.getArtifactDtl(record._id);

      if (!item) return false;
      const values: any = await Modal.form({
        title: "编辑文物",
        content: <AddModel />,
        formData: { ...item },
        width: "6rem",
      });
      if (!values) return;
      const uploadRes = await ctx.list.uploader.uploadBlobs(values, "museum");
      if (uploadRes) {
        ctx.ui.messageError(uploadRes);
        return false;
      }
      const res = await ctx.list.actions.updateArtifacts(values);
    };

    const del = (item: any) => {
      ctx.list.actions.deleteArtifact(item);
    };

    // const showExport = () => {
    //   const exportModal = Modal.show(
    //     <ExportModal
    //       onSubmit={(ids: string[]) => {
    //         exportArtifacts(ids);
    //         exportModal.close();
    //       }}
    //       onCancel={() => {
    //         exportModal.close();
    //       }}
    //     />,
    //     {
    //       title: "导出文物列表",
    //     }
    //   );
    // };
    const exportArtifacts = () => {
      ctx.list.actions.exportArtifacts();
    };

    return () => (
      <div class={ViewStyle}>
        <div class="table_header">
          <div class="title">文物列表</div>
          <div>
            <Space>
              <Button
                type="primary"
                ghost
                onClick={() => {
                  ctx.list.actions.importArtifacts();
                }}
              >
                导入资源
              </Button>

              <Button
                type="primary"
                ghost
                onClick={() => {
                  exportArtifacts();
                }}
              >
                导出资源
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  showAdd();
                }}
              >
                添加+
              </Button>
            </Space>
          </div>
        </div>
        <Table
          size="small"
          columns={columns}
          dataSource={ctx.list.backendList.state.list}
          pagination={{
            size: "default",
            pageSize: ctx.list.backendList.state.size,
            current: ctx.list.backendList.state.page,
            total: ctx.list.backendList.state.total,
            showSizeChanger: false,
            onChange: (p) => ctx.list.backendList.loadPage(p),
          }}
          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;
  }
`;
