import { h } from "vue";
import { ElImage, ElButton, ElPopover, ElTag } from "element-plus";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

function createTooltip(left: string, reference: string, width = 200) {
  return h(
    "div",
    {
      style: {
        display: "flex",
        justifyContent: "space-between"
      }
    },
    {
      default: () => [
        h("span", null, left),
        h(
          ElPopover,
          {
            placement: "top",
            content: reference,
            width
          },
          {
            reference: () =>
              h(ElButton, {
                link: true,
                icon: useRenderIcon("information-line")
              })
          }
        )
      ]
    }
  );
}

function createImages(imgSrc: string | string[]) {
  const imgs = Array.isArray(imgSrc) ? imgSrc : imgSrc?.split(",");
  if (!imgs) return null;
  return imgs.map(src => {
    return h(ElImage, {
      src,
      previewSrcList: [src],
      style: {
        height: "20px",
        width: "20px"
      }
    });
  });
}
function createStatus(options: any[], status: string | number) {
  const item = options.find(s => s.value === String(status));
  return h(
    ElTag,
    {
      type: item?.type ? item.type : ""
    },
    {
      default: () => (item?.label ? item.label : "")
    }
  );
}
export { createTooltip, createImages, createStatus };
