@namespace AntSK.Pages.ChatPage
@using AntSK.Domain.Repositories
@using AntSK.Models
@using Microsoft.AspNetCore.Components.Web.Virtualization
@page "/OpenChat/{AppId}"
@layout OpenLayout

<div id="chat" style="display:flex; flex-direction:column; height:100%; overflow-x:hidden;">
    <PageHeader Class="site-page-header" Title="@app.Name" Subtitle="@app.Describe" />
    <div id="scrollDiv" style="flex:1; width:100%; overflow-y:auto; overflow-x:hidden;padding:10px;">
        <Virtualize Items="@(MessageList.OrderBy(o => o.CreateTime).ToList())" Context="item">
            @if (item.IsSend)
            {
                <GridRow>
                    <GridCol Span="23">
                        <div class="chat-bubble sent">
                            <Popover Title="@item.CreateTime.ToString()">
                                @(item.Context)
                            </Popover>
                        </div>
                        <Icon Style="float:right;margin-top:10px;" Type="copy" Theme="outline" OnClick="async () =>await OnCopyAsync(item)" />
                    </GridCol>
                    <GridCol Span="1">
                        <Image Width="25px" Height="25px" Style="margin-top:10px;" Src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
                    </GridCol>
                </GridRow>
            }
            else
            {
                <GridRow>
                    <GridCol Span="1">
                        <Image Width="25px" Height="25px" Style="margin-top:10px;" Src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
                    </GridCol>
                    <GridCol Span="23">
                        <div class="chat-bubble received">
                            @((MarkupString)(item.HtmlAnswers))
                        </div>

                    </GridCol>
                </GridRow>
            }

        </Virtualize>
    </div>
    <div style="flex-shrink:0;margin:10px;">
        <AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding">
            <Suffix>
                <Button Icon="clear" Type="@(ButtonType.Link)" OnClick="@(async () => await OnClearAsync())" Disabled="@Sendding"></Button>
                <Button Icon="send" Type="@(ButtonType.Link)" OnClick="@(async () => await OnSendAsync())" Disabled="@Sendding"></Button>
            </Suffix>
        </AntDesign.Input>
    </div>
</div>

<style>

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 10px;
        justify-content: center;
        align-items: flex-start;
        height: 100vh;
    }

    .chat-container {
        width: 350px;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding-bottom: 15px;
    }

    .chat-bubble {
        padding: 10px;
        margin: 10px;
        margin-bottom: 0;
        border-radius: 5px;
        max-width: 70%;
        position: relative;
    }

    .received {
        background-color: #f0f0f0;
        align-self: flex-start;
        float: left;
    }

    .sent {
        background-color: #daf8cb;
        align-self: flex-end;
        float: right;
    }
</style>

@code {

}
