@using AI.Platform.Page.Pages.Site.Model
@using System.Threading.Tasks
@using System.Text.Json

@if (IsVisible)
{
    <div class="modal-overlay">
        <div class="modal-content filter_box">
            @if (Model?.Type == 1 || Model?.Type == 2)
            {
                <EditForm Model="@Model" OnValidSubmit="onSure" style="width:100%">
                    <DataAnnotationsValidator />
                    <div class="filter_row">
                        <div class="filter_colume">
                            <div class="filter_row">
                                <span>设备码</span><Input Placeholder="设备码" @bind-Value="Model.sn" Style="width:75%" />
                            </div>
                            <ValidationMessage For="@(()=>Model.sn)" style="color:red" />
                        </div>
                        
                        <div class="filter_colume">
                            <div class="filter_row">
                                <span>站点</span>
                                <Select @bind-Value="Model.SiteId"
                                        Style="width:75%"
                                        TItemValue="long"
                                        TItem="string"
                                        DefaultActiveFirstOption="true" EnableSearch AllowClear>
                                    <SelectOptions>
                                        @foreach (var department in Model.Sites)
                                        {
                                            <SelectOption TItemValue="long" TItem="string" Value="@department.Id" Label="@department.Name" />
                                        }
                                    </SelectOptions>
                                </Select>
                            </div>
                            <ValidationMessage For="@(() => Model.SiteId)" style="color:red" />
                        </div>
                    </div>

                    <div class="filter_row" style="justify-content:start">
                        <div class="filter_colume">
                            <div class="filter_row">
                                <span>备注</span><Input Placeholder="备注" @bind-Value="Model.Remark" Style="width:75%" />
                            </div>
                            <ValidationMessage For="@(() => Model.Remark)" style="color:red" />
                        </div>
                    </div>

                    <div class="filter_row" style="justify-content:end;margin-top:5%;">
                        <button Icon="plus" type="submit" class="confirm_button">确定</button>
                        <button Icon="reload" type="button" @onclick="Close" class="cancel_button">取消</button>
                    </div>

                </EditForm>
                
            }

            

            @if (Model?.Type == 3)
            {
                <h3>是否删除设备？@(Model.sn)</h3>
                <div class="filter_row" style="justify-content:end;margin-top:5%;">
                    <button Icon="plus" @onclick="onSure" Class="confirm_button">确定</button>
                    <button Icon="reload" @onclick="Close" Class="cancel_button">取消</button>
                </div>
            }

            @* @if(Model?.Type == 4)
            {
                <h3>该设备已存在：@(Model.sn)</h3>
                <div class="filter_row" style="justify-content:end;margin-top:5%;">
                    <button Icon="plus" @onclick="onSure" Class="confirm_button">确定</button>
                    <button Icon="reload" @onclick="Close" Class="cancel_button">取消</button>
                </div>
            } *@

            
        </div>

    </div>
}

<style>
    /* 遮罩层：全屏、半透明 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* 弹窗内容：白色卡片，居中由父容器控制 */
    .modal-content {
        background: white;
        border-radius: 8px;
        width: 80%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        /* 注意：不要设 height: 100vh，否则会拉满全屏 */
    }

    .filter_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffffff;
        padding: 2%;
    }

    .filter_row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 2%;
    }

    .filter_row_around {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin-top: 2%;
    }

    .filter_colume {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        width: 48%;
        margin-top: 2%;
    }

    .confirm_button {
        margin-right: 2%;
        padding: 0% 2%;
        background-color: #52c41a;
        color:#FFFFFF;
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-content:center;
        border: solid #d9d9d9 1px;
        border-radius:5px;
        font-size: large;
    }

    .cancel_button {
        margin-right: 2%;
        padding: 0% 2%;
        background-color: #FFFFFF;
        color: #000000;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        border: solid #d9d9d9 1px;
        border-radius: 3px;
        font-size:large;
    }
</style>