live-telecast-vue3-ui-pc/src/utils/column-helper.ts

import { h } from "vue";
import { ElTag, ElImage } from "element-plus";

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 renderImage(prop = "image") {
  return {
    cellRenderer({ row }) {
      return h(
        ElImage,
        {
          src: row[prop],
          fit: "cover",
          lazy: true,
          "preview-src-list": row[prop] !== "" ? [row[prop]] : [],
          "z-index": 99999,
          "preview-teleported": true
        },
        {
          default: () => "--"
        }
      );
    }
  };
}
// <el-image
//       style="width: 100px; height: 100px"
//       :src="url"
//       :preview-src-list="src"
//       :initial-index="4"
//       fit="cover"
//     />

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;
    }
  };
}