import { h } from "vue";
import { ElTag, ElImage } from "element-plus";
import { isArray } from "/@/utils/validate";
export function renderCategory(prop = "can") {
  return {
    cellRenderer({ row }) {
      return row[prop].map(({ name }) => name).join("/");
    }
  };
}

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

export function renderImage(prop = "image") {
  return {
    cellRenderer({ row }) {
      return h(
        ElImage,
        {
          src: row[prop],
          fit: "cover",
          lazy: true,
          style: "width: 33px; height: 22px",
          "preview-src-list": row[prop] !== "" ? [row[prop]] : [],
          "z-index": 99999,
          "preview-teleported": true
        },
        {
          default: () => "--"
        }
      );
    }
  };
}

export function renderImages(prop: string) {
  return {
    cellRenderer({ row }) {
      if (isArray(row[prop])) {
        const arr2 = [];
        row[prop].forEach(item => {
          arr2.push(
            h(
              ElImage,
              {
                src: item,
                fit: "cover",
                lazy: true,
                style: "width: 33px; height: 22px; margin:0 0 0 10px",
                "preview-src-list": item !== "" ? [item] : [],
                "z-index": 99999,
                "preview-teleported": true
              },
              {
                default: () => "--"
              }
            )
          );
        });
        return arr2;
      } else {
        return "";
      }
    }
  };
}

export function convertOptions(source: any[], prop = "id") {
  return source.map(item => ({ value: item[prop], label: item.label }));
}

export function renderHtml(prop = "content") {
  return {
    cellRenderer({ row }) {
      const arr = row[prop].split("<br/>");
      const arr2 = [];
      for (let i = 0; i < arr.length; i++) {
        arr2.push(
          h(
            "li",
            {
              style: {
                lineHeight: "30px"
              }
            },
            arr[i]
          )
        );
      }

      return h(
        "ul",
        {
          style: {
            padding: "5px 0 5px 55px"
          }
        },
        {
          default: () => arr2
        }
      );
    }
  };
}
export function timeInterval(props: string[], tem: string) {
  return {
    cellRenderer({ row }) {
      let str = "";
      props.forEach((s, index) => {
        str += index === 0 ? `${row[s]}` : ` ${tem}${row[s]}`;
      });

      return str;
    }
  };
}
