
<div class="example" id="@Title">
    <h2>@Title</h2>
    @if (Description is not null)
    {
            <p>@Description</p>
    }

    @*<TTab Position="TDesign.Position.Top" >
        <TTabItem Title="效果" AdditionalStyle="@RunStyle">
            @RunContent
        </TTabItem>
        <TTabItem Title="代码">
            @CodeContent
        </TTabItem>
    </TTab>*@


    <div class="demo-wrapper">
        <div class="content" style="@RunStyle">
            @RunContent
        </div>
        <div class="footer">
            <div class="btn">
                <TIcon AdditionalClass="@BtnClass" Name="IconName.Code" Size="24px"  @onclick="e=>ToogleCode()" style="display: flex;justify-content: space-evenly;align-items: center;" />
            </div>
        </div>
        <div class="@CodeClass" style="@GetStyle()">
            @CodeContent
            </div>
    </div>
</div>
@using ComponentBuilder
@code {
    [Inject] public IJSRuntime JSRuntime { get; set; }
    [Parameter] public string Id { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public RenderFragment Description { get; set; }
    [Parameter] public RenderFragment CodeContent { get; set; }
    [Parameter] public RenderFragment RunContent { get; set; }
    [Parameter] public string? RunStyle { get; set; }

    bool Active = false;

    string GetStyle() => Active ? "" : "display:none";
    string CodeClass => HtmlHelper.Instance.Class().Append("content code")
    //.Append(Active, "code-collapse", "code-expand")
    .ToString()
    ;

    string BtnClass => HtmlHelper.Instance.Class().Append("action").Append("active", Active).ToString();

    void ToogleCode()
    {
        Active = !Active;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("highlight");
        }
    }
}

