import { css } from "@linaria/core";
import { useImage } from "@queenjs/use";
import { defineUI } from "queenjs";
import { object } from "vue-types";

export const BaseInfo = defineUI({
  props: {
    data: object().def({}),
  },
  setup(props) {
    const bgImg = useImage(() => props.data.thumbnail || { url: "" });

    return () => {
      return (
        <div class={baseInfoStyle}>
          <div class="baseInfo_thumbnail">
            <img class="w-1/1 h-1/1 object-cover" src={bgImg.url} />
          </div>
          <div class="flex-1">
            <div>{props.data.name || "未命名"}</div>
            <div>{`编号：${props.data.cusNum || "未命名"}`}</div>
          </div>
        </div>
      );
    };
  },
});

const baseInfoStyle = css`
  display: flex;

  .baseInfo_thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 14px;
    border-radius: 2px;
    color: #ccc;
  }
`;
