@page "/audio"
@page "/audio/list"
@attribute [Authorize]
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">录音管理</MudText>
<MudTable Hover="true"
          @ref="_table"
          ServerData="x => LoadDataAsync(x)"
          CurrentPage="@(_pageIndex -1)"
          RowsPerPage="PageSize">
    <ToolBarContent>
        <MudIconButton Icon="@Icons.Material.Filled.Search"
                       Variant="Variant.Outlined"
                       Color="Color.Primary"
                       Title="搜索"
                       Size="Size.Medium"
                       OnClick="Search"
                       Class="ma-2" />
    </ToolBarContent>
    <HeaderContent>
        <MudTh>
            文件大小
        </MudTh>
        <MudTh>
            录音
        </MudTh>
        <MudTh>
            上传人
        </MudTh>
        <MudTh>
            上传时间
        </MudTh>
        <MudTh>操作</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="文件大小">
            @context.Size.FileSize()
        </MudTd>
        <MudTd DataLabel="录音">
            <audio controls="controls" src="@context.AccessUrl" preload="metadata"></audio>
        </MudTd>
        <MudTd DataLabel="上传人">
            @context.Uploader.Name
        </MudTd>
        <MudTd DataLabel="上传时间">
           @context.UploadTime.ToString("yyyy-MM-dd HH:mm:ss")
        </MudTd>
        <MudTd DataLabel="操作">
            <MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="() => DeleteAsync(context.Id)">删除</MudButton>
        </MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager RowsPerPageString="每页数量"
                       HideRowsPerPage="true"
                       PageSizeOptions="new []{15,20,30}"
                       InfoFormat="此页显示{first_item}-{last_item} 共{all_items}条" />
    </PagerContent>
</MudTable>