import { useResource } from "@/modules/resource";
import { css, cx } from "@linaria/core";
import { Button } from "ant-design-vue";
import { defineComponent, onMounted } from "vue";
import AssetsList from "../components/AssetsList";
import MaterialTemplateModal from "./components/MaterialTemplateModal";

const materialType = [
  { name: "视频", key: "video" },
  { name: "图片", key: "image" },
  { name: "渲染任务", key: "task" },
];

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

    const showModal = (type: string) => {
      resource.showModal(<MaterialTemplateModal type={type} />, {
        title: `${type === "image" ? "图片" : "视频"}模板中心`,
        width: "1000px",
      });
    };

    const changeType = (v: string) => {
      resource.store.setSourceType(v);
      loadPage();
    };

    const loadPage = () => {
      resource.controls.materialListCtrl.state.query = {
        fileType: resource.store.type,
      };
      resource.controls.materialListCtrl.loadPage(1);
    };

    onMounted(() => loadPage());

    return () => {
      return (
        <div class={rootStyles}>
          <h3 class="text-22px">我的素材</h3>
          <div class="flex items-center justify-between mt-20px">
            <div class="filter space-x-60px">
              {materialType.map((d) => (
                <span
                  key={d.key}
                  onClick={() => changeType(d.key)}
                  class={cx(
                    resource.store.type == d.key && "active",
                    "cursor-pointer btn_tab"
                  )}
                >
                  {d.name}
                </span>
              ))}
            </div>
            <div>
              <Button
                ghost
                type="primary"
                onClick={resource.actions.uploadMaterial}
              >
                上传素材
              </Button>
              <Button
                ghost
                type="primary"
                class="ml-25px"
                onClick={() => showModal("image")}
              >
                生成图片
              </Button>
              <Button
                ghost
                type="primary"
                class="ml-15px"
                onClick={() => showModal("video")}
              >
                生成视频
              </Button>
            </div>
          </div>
          <AssetsList
            columns={6}
            class="mt-30px"
            control={resource.controls.materialListCtrl}
            item={(record: any) => (
              <resource.components.MaterialItem
                use="show"
                record={record}
                onDelete={() => resource.actions.deleteMaterial(record)}
                onDownload={() => resource.actions.downloadMaterial(record)}
              />
            )}
          />
        </div>
      );
    };
  },
});

const rootStyles = css`
  .btn_tab {
    padding: 3px 5px;
    &:hover,
    &.active {
      color: @inf-primary-color;
    }
  }
`;