import { ElDescriptions, ElDescriptionsItem } from "element-plus";
import { defineComponent } from "vue";
import { basicDescriptionsProps } from "./types";

const BasicDescriptions = defineComponent({
  name: "BasicDescriptions",
  props: basicDescriptionsProps,
  setup(props, { slots }) {
    return () => {
      const { title, colNumber, columns, data, labelWidth } = props;

      return (
        <ElDescriptions title={title} border column={colNumber} size="small">
          {columns.map(col => (
            <ElDescriptionsItem
              label={col.label}
              key={col.field}
              span={col.span}
              minWidth={labelWidth}
            >
              {col.render ? col.render(data[col.field]) : data[col.field]}
            </ElDescriptionsItem>
          ))}

          {slots.custom && slots.custom(props.data)}
        </ElDescriptions>
      );
    };
  }
});

export default BasicDescriptions;
