import { useResource } from "@/modules/resource";
import { css, cx } from "@linaria/core";
import { IconClose } from "@queenjs/icons";
import { Button, Divider } from "ant-design-vue";
import { queenApi } from "queenjs";
import { defineComponent } from "vue";
import Logo from "../../components/layout/Logo";
import OutputTemplateModal from "./OutputTemplateModal";

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

    const showModal = () => {
      resource.showModal(<OutputTemplateModal />, {
        title: "选择渲染模板",
        width: "1000px",
      });
    };

    return () => {
      return (
        <div
          class={cx(
            rootStyles,
            "flex items-center justify-between py-15px px-25px"
          )}
        >
          <Logo />
          <div class="flex items-center justify-center">
            <Button type="primary" size="small" onClick={showModal}>
              渲染
            </Button>
            <Divider type="vertical" class="!mx-20px"></Divider>
            <IconClose
              class="text-22px cursor-pointer transition-all hover:opacity-60 active:opacity-70"
              onClick={() => queenApi.router.push({ name: "material" })}
            />
          </div>
        </div>
      );
    };
  },
});

const rootStyles = css`
  height: @inf-header-height;
  border-bottom: 1px solid @inf-border-color;
`;
