live_antd

defmodule LiveAntd.Components.Table do
  @moduledoc """
  A table for normal way (it's not antd style.)

  ## API

    * [x] `title`: table title
    * [x] `withCard`: with card compoenent.
    * [x] `data`: Data record array to be displayed
    * [x] `rowClass: Row's className function(record, index)
    * [x] `paginate: Table with data pagination
    * [x] `onChange`:	Callback executed when pagination, filters or sorter is changed

  ## Example

    <Table data={{ item <- @table_list }}>
      <Column label="Event ID">
        {{ item.event_id }}
      </Column>
      <Column label="Event Name">
        {{ item.event_name }}
      </Column>
      <Column label="Event Position">
        {{ item.event_position }}
      </Column>
      <Column label="Actions">
        <a href="#">{{ item.event_id }}</a>
      </Column>
    </Table>
  """

  use Surface.Component

  alias LiveAntd.Components.Card
  alias LiveAntd.Components.Empty
  alias LiveAntd.Components.Pagination

  import LiveAntd.Helper

  # event
  prop(onChange, :event)
  # api property
  prop(data, :list, required: true)
  prop(title, :string)
  prop(withCard, :boolean, default: true)
  prop(rowClass, :fun)
  prop(class, :css_class)
  prop(paginate, :map, default: %{total_pages: 0, current_page: 0, per_page: 10, total_count: 0})

  # slot
  @doc "The columns of the table"
  slot(cols, props: [item: ^data], required: true)

  def render(assigns) do
    # 如果列表为空，则返回 empty
    case length(assigns.data) do
      0 -> render_empty(assigns)
      _ -> render_table(assigns)
    end
  end

  def render_table(assigns) do
    case assigns.withCard do
      true ->
        ~H"""
          <Card title={{@title}}>
            {{ render_basic_table(assigns) }}
          </Card>
        """

      false ->
        render_basic_table(assigns)
    end
  end

  def render_basic_table(assigns) do
    ~H"""
    <div class="ant-table-wrapper" style="margin-bottom: 10px">
      <div class="ant-spin-nested-loading">
        <div class="ant-spin-container">
          <div class="ant-table">
            <div class="ant-table-container">
              <div class="ant-table-content">
                <table
                  class={{ @class }}
                  style="table-layout: auto;"
                >
                  <thead class="ant-table-thead">
                    <tr>
                      <th class="ant-table-cell" :for={{ col <- @cols }}>
                        {{ col.label }}
                      </th>
                    </tr>
                  </thead>
                  <tbody class="ant-table-tbody">
                    <tr
                      :for={{ {item, index} <- Enum.with_index(@data) }}
                      class={{
                        "ant-table-cell",
                        row_class_fun(@rowClass).(item, index)
                      }}
                    >
                      <td :for.index={{ index <- @cols }}>
                        <span><slot name="cols" index={{ index }} :props={{ item: item }}/></span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Pagination
      current={{ @paginate.current_page }}
      total={{ @paginate.total_count }}
      size={{ @paginate.per_page }}
      totalPages={{ @paginate.total_pages }}
      onChange={{ @onChange }}
    />
    """
  end

  defp row_class_fun(nil), do: fn _, _ -> "" end
  defp row_class_fun(rowClass), do: rowClass
end