@page "/picture/post"
@using System.Linq
@attribute [Authorize]
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">创建图像</MudText>
<MudOverlay Visible="_isPosting" ZIndex="9999" DarkBackground="true">
    <MudProgressCircular Color="Color.Secondary" Indeterminate="true"/>
</MudOverlay>
<EditForm Model="_picture" OnValidSubmit="PostPictureAsync">
    <MudExpansionPanels>
        <MudExpansionPanel Text="表单验证">
            <MudText Color="@Color.Error">
                <ValidationSummary/>
            </MudText>
        </MudExpansionPanel>
    </MudExpansionPanels>
    <MudCard>
        <MudCardContent>
            <DataAnnotationsValidator/>
            <MudGrid>
                <MudItem xs="12" md="12">
                    <InputFile OnChange="OnInputFileChanged" id="fileInput112" hidden accept="@(string.Join(',', AppTools.ImageExtensions.Select(x => '.' + x)))"/>

                    <MudButton HtmlTag="label"
                               Variant="Variant.Filled"
                               Color="Color.Primary"
                               StartIcon="@Icons.Filled.CloudUpload"
                               for="fileInput112">
                        点击选择要上传的图片
                    </MudButton>
                    <MudList Style="padding:2em;width:100%;" Dense="true">
                        <Preview></Preview>
                        @foreach (var file in _selectedFiles)
                        {
                            <MudListItem @key="@file">
                                <MudChip Color="Color.Dark"
                                         Style="width:60px; overflow:hidden;"
                                         Text="@(file.Key.Split(".").Last())"/>
                                @file.Key
                                <MudChip Color="Color.Dark"
                                         Style="overflow:hidden;"
                                         Text="@(file.Value.FileSize())"/>
                            </MudListItem>
                        }
                    </MudList>
                </MudItem>

                <MudItem xs="12" md="12">
                    <MudSelect T="string"
                               Label="标签"
                               HelperText="请选择标签"
                               MultiSelection="true"
                               ToStringFunc="x => x"
                               SelectedValues="_picture.Tags">
                        @foreach (var state in _tags)
                        {
                            <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  HelperText="上面标签不满足时，在此输入补充标签，多个标签以[,](英文逗号)隔开"
                                  Immediate="true"
                                  Label="补充标签"
                                  @bind-value="_picture.AdditionsTags"
                                  For="@(() => _picture.AdditionsTags)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  HelperText="图像描述"
                                  Immediate="true"
                                  Label="描述"
                                  Lines="5"
                                  @bind-value="_picture.Description"
                                  For="@(() => _picture.Description)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
            </MudGrid>
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Disabled="_isPosting" Color="Color.Primary">
                @if (_isPosting)
                {
                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                    <MudText Class="ms-2">正在上传</MudText>
                }
                else
                {
                    <MudText>上传</MudText>
                }
            </MudButton>
            <MudButton Variant="Variant.Filled" Href="/picture">返回列表</MudButton>
        </MudCardActions>
    </MudCard>
</EditForm>