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

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

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

export default BasicDescriptions;
