import isEmpty from 'lodash/isEmpty';
import { defineComponent, PropType, ref, reactive, VNode } from 'vue';
import type { Column } from '../Container';
import './index.scss';

export default defineComponent({
  name: 'EditTable',
  props: {
    readonly: Boolean,
    columns: Array as PropType<Column<any>[]>,
    data: Object,
    onAdd: Function,
    btntext:String,
  },
  setup(props) {
    const handleAddResource = () => {};

    return () => (
      <>
        {!props.readonly && (
          <el-button
            size="small"
            icon="el-icon-plus"
            onClick={props.onAdd}
            readonly={props.readonly}>
            {props.btntext ?? '新增'}
          </el-button>
        )}
        {!isEmpty(props.data) && (
          <el-table size="small" data={props.data} class="edit-table-container">
            {props.columns &&
              props.columns.map((col) => (
                <el-table-column
                  width={col.width}
                  prop={col.prop}
                  label={col.label}
                  v-slots={
                    col.render && {
                      default: (slotProps: any) =>
                        col.render &&
                        col.render(
                          slotProps?.row?.[col.prop as string],
                          slotProps?.row,
                          slotProps.$index,
                        ),
                    }
                  }
                />
              ))}
          </el-table>
        )}
        {isEmpty(props.data) && props.readonly && <div> 暂无数据</div>}
      </>
    );
  },
});
