import { cx } from "@linaria/core";
import { Image } from "@queenjs/ui";
import { Button } from "ant-design-vue";
import { defineComponent } from "vue";
import { any, bool } from "vue-types";

export default defineComponent({
  props: {
    record: any().isRequired,
    active: bool().def(false),
  },
  emits: ["replace", "click"],
  setup(props, { emit }) {
    return () => {
      const { active, record } = props;
      return (
        <div
          class={cx(
            "flex items-center py-4px px-8px rounded-4px cursor-pointer border-1 border-solid hover:opacity-80 transition-all",
            active ? "border-orange-200" : "border-transparent"
          )}
          style={{ backgroundColor: "#303030" }}
          onClick={() => emit("click", record)}
        >
          <Image src={record.thumbnail} class="w-30px rounded-4px" />
          <div class="ml-10px flex-1 mr-5px w-0 text-12px leading-tight">
            {record.name || "未命名"}
          </div>
          <Button
            ghost
            type="primary"
            size="small"
            onClick={(e) => {
              e.stopPropagation();
              emit("replace", record);
            }}
          >
            替换
          </Button>
        </div>
      );
    };
  },
});
