queenshow/src/pages/website/CreateMat/components/OutputTemplateItem.tsx

import { css, cx } from "@linaria/core";
import { Image, View } from "@queenjs/ui";
import { Checkbox, Radio, RadioChangeEvent, Tag } from "ant-design-vue";
import { defineUI, queenApi } from "queenjs";
import { reactive } from "vue";
import { any, bool, string } from "vue-types";
import PreviewMaterialModal from "../../components/PreviewMaterialModal";

const options = [
  { label: "1倍", value: 1 },
  { label: "2倍", value: 2 },
];

export default defineUI({
  props: {
    type: string<"image" | "video">().def("image"),
    active: bool(),
    record: any(),
  },
  emits: ["select", "change"],
  setup(props, { emit }) {
    const state = reactive({
      qos: 1,
    });

    const change = (e: RadioChangeEvent) => {
      state.qos = e.target.value;
      emit("change", state.qos);
    };

    const showModal = () => {
      const { record, type } = props;
      const isVideo = type == "video";

      queenApi.dialog(
        <PreviewMaterialModal
          data={{
            url: isVideo ? record.videoUrl : record?.thumbnailUrl,
            fileType: type,
          }}
        />,
        {
          title: "预览渲染模板",
          width: "1000px",
        }
      );
    };

    return () => {
      const { active, record, type } = props;
      const isVideo = type == "video";

      return (
        <div class="cursor-pointer">
          <View
            ratio={1.4}
            onClick={() => emit("select")}
            class={cx(
              itemStyles,
              "relative overflow-hidden group",
              active && "active"
            )}
          >
            {isVideo && (
              <Tag color="#E88B00" class="absolute right-0 top-0 z-9 !mr-0">
                视频
              </Tag>
            )}
            {active && (
              <Checkbox checked class="!-mt-0.2em absolute top-0 left-0 z-3" />
            )}
            {!isVideo ? (
              <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
            ) : (
              <video src={record.videoUrl} class="h-1/1 w-1/1 object-cover" />
            )}
            <span
              class="absolute left-1/2 top-1/2 z-3 transform -translate-x-1/2 -translate-y-1/2 rounded-1/2 w-56px leading-56px text-center bg-primary transition-all opacity-0 group-hover:opacity-100 hover:(bg-opacity-50)"
              onClick={(e) => {
                e.stopPropagation();
                showModal();
              }}
            >
              预览
            </span>
          </View>
          <div>
            <div class="py-8px">
              尺寸：{record.width} * {record.height}
            </div>
            <div>
              渲染分辨率：
              <Radio.Group
                disabled={!props.active}
                value={state.qos}
                options={options}
                onChange={change}
              />
            </div>
          </div>
        </div>
      );
    };
  },
});

const itemStyles = css`
  border: 1px solid transparent;
  &.active {
    border-color: @inf-primary-color;
  }
`;