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

const BasicDescriptions = defineComponent({
  name: "BasicDescriptions",
  props: basicDescriptionsProps,
  setup(props, { slots }) {
    return () => {
      const { title, colNumber, columns, data, labelWidth, show } = props;
      return show ? (
        <ElDescriptions
          title={title}
          border
          width={props.labelWidth}
          column={colNumber}
          size="small"
        >
          {columns.map(col => (
            <ElDescriptionsItem
              label={col.label}
              key={col.field}
              span={col.span}
              labeWidth={col.labelWidth ? col.labelWidth : labelWidth}
            >
              {col.render ? col.render(data[col.field], data) : data[col.field]}
              {col.append}
            </ElDescriptionsItem>
          ))}

          {slots.custom && slots.custom(props.data)}
        </ElDescriptions>
      ) : (
        <div
          style={{
            display: "flex",
            width: "100%",
            justifyContent: "center",
            flexDirection: "column",
            alignItems: "center"
          }}
        >
          <el-button
            text
            size="large"
            icon={useRenderIcon("warning-filled")}
            disabled
          ></el-button>
          <span>暂无数据</span>
        </div>
      );
    };
  }
});

export default BasicDescriptions;
