@inherits MyAntDesignAppServer.Pages.UserManagement.UserManagementBase
@page "/"
@using UserPointManagement.Application.Services
@using UserPointManagement.Model.Dtos
@using UserPointManagement.Model.Entities
@using System.ComponentModel.DataAnnotations
@using System.Text.Json
@inject IJSRuntime JS
@inject IUserService UserService;

<PageContainer Title="用户管理">
    <GridRow Style="margin: 10px 0">
        <GridCol Span="12">
            <Space Direction="@DirectionVHType.Horizontal">
                <SpaceItem>
                    <Search Placeholder="姓名或手机号" WrapperStyle="width: 200px;" OnSearch="OnSearch" ClassicSearchIcon/>
                </SpaceItem>
            </Space>
        </GridCol>
        <GridCol Span="12">
            <Space Direction="@DirectionVHType.Horizontal" Style="display: flex; justify-content: flex-end">
                <SpaceItem>
                    <Button type="primary" OnClick="@ShowModal">新增用户</Button>
                </SpaceItem>
            </Space>
        </GridCol>
    </GridRow>
    <Table TItem="User" DataSource="@_users"
           Total="_total"
           Loading="_loading"
           PageIndex="@_pageIndex"
           PageSize="@_pageSize"
           OnPageIndexChange="OnPageIndexChanged"
           OnPageSizeChange="OnPageSizeChange">
        <PropertyColumn Property="c => c.Name" title="姓名"/>
        <PropertyColumn Property="c => c.Mobile" title="手机号" Width="80"/>
        <ActionColumn Title="操作" Width="220">
            <Space Size=@("middle")>
                <SpaceItem>
                    <button>编辑</button>
                </SpaceItem>
            </Space>
        </ActionColumn>
    </Table>
</PageContainer>

<Modal Title="@("新增用户")"
       Visible="@_visible"
       OnOk="@HandleOk"
       OnCancel="@HandleCancel">
    <Form Loading="loading" Model="@model"
          LabelColSpan="8"
          WrapperColSpan="16"
          OnFinish="OnFinish"
          OnFinishFailed="OnFinishFailed"
          @ref="@_form">
        <FormItem Label="姓名">
            <Input @bind-Value="@context.Name" />
        </FormItem>
        <FormItem Label="手机号">
            <Input @bind-Value="@context.Mobile" />
        </FormItem>
    </Form>
</Modal>

@code {

    #region original form coding
    public class Model
    {
        [Required]
        public string Name { get; set; }
        public string Mobile { get; set; }
    }

    private Model model = new Model();

    private void OnFinishFailed(EditContext editContext)
    {
        Console.WriteLine($"Failed:{JsonSerializer.Serialize(model)}");
    }

    bool loading = false;

    void toggle(bool value) => loading = value;

    #endregion

    #region original modal coding

    bool _visible = false;

    private void ShowModal()
    {
        _visible = true;
    }

    private void HandleCancel(MouseEventArgs e)
    {
        _visible = false;
    }

    #endregion

    /*
     * Careful! 
     * 
     * next bind submit event to modal OK button 
     */

    private Form<Model> _form;

    /// <summary>
    /// when form is submited, close the modal
    /// </summary>
    /// <param name="args"></param>
    private void OnFinish(EditContext editContext)
    {
        Console.WriteLine("e");
        _visible = false;
    }

    /// <summary>
    /// on modal OK button is click, submit form manually
    /// </summary>
    /// <param name="e"></param>
    private async Task HandleOk(MouseEventArgs e)
    {
        _form.Submit();
        await UserService.CreateUser(new User()
        {
            Name = model.Name,
            Mobile = model.Mobile
        }).ConfigureAwait(false);
        await RefreshTable().ConfigureAwait(false);
    }
}