/* eslint-disable prettier/prettier */
import { defineComponent } from "vue";
import { ElRow, ElCol } from "element-plus";
import { useRenderIcon } from "../../ReIcon/src/hooks";
import { basicDescriptionsProps } from "./types";
import "./index.scss"

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

      return show ? (
        <ElRow title={title} border column={colNumber} size="small">
          {columns.map(col => (
            <ElCol
              label={col.label}
              key={col.field}
              span={col.span ? col.span : 6}
            >
              <div class="col-item">
                <p class="col-label" style={{ width: labelWidth + 'px' }}>{col.label}</p>
                <p class="col-value">{col.render ? col.render(data[col.field], data) : data[col.field]} {col.append || ''}</p>
              </div>
            </ElCol>
          ))}

          {slots.custom && slots.custom(props.data)}
        </ElRow>
      ) : (
          <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;
