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

export function renderProp(options: any[], prop = "status") {
  return {
    cellRenderer({ row }) {
      const item = options.find(s => s.value === String(row[prop]));
      return h(
        ElTag,
        {
          type: item && item.type ? item.type : ""
        },
        {
          default: () => item?.label || "--"
        }
      );
    }
  };
}

export function renderIconLabelLeft(
  leftProp,
  rightProp,
  label = "",
  okProp = ""
) {
  return {
    cellRenderer({ row }) {
      console.log(row[okProp]);
      if (okProp && !row[okProp]) {
        return null;
      }

      return [
        h(
          ElPopover,
          {
            content: label + row[leftProp],
            placement: "left",
            width: 300
          },
          {
            reference: () =>
              h(ElButton, {
                link: true,
                size: "large",
                icon: useRenderIcon("information-line")
              })
          }
        ),
        h("text", null, row[rightProp] || "--")
      ];
    }
  };
}
