AISln/Platform/AI.Platform.Page/Pages/Site/UpdateScreenDialog.razor

@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)
            {
                <div class="filter_row">
                    <span>设备码</span><Input Placeholder="设备码" @bind-Value="Model.sn" Style="width:30%" />

                    <span>站点</span>
                    <Select @bind-Value="Model.SiteId"
                            Style="width:30%"
                            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>

                <div class="filter_row" style="justify-content:start">
                    <span>备注</span><Input Placeholder="备注" @bind-Value="Model.Remark" Style="width:30%" />

                </div>
            }

            

            @if (Model?.Type == 3)
            {
                <h3>是否删除设备？@(Model.sn)</h3>
            }

            <div class="filter_row" style="justify-content:end;margin-top:5%;">
                <Button Icon="plus" OnClick="onSure" Style="margin-right:2%">确定</Button>
                <Button Icon="reload" OnClick="Close" Style="margin-right:2%">取消</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%;
    }
</style>