@page "/opc-da"
@inject IStringLocalizer<OpcDa> Localizer

<h3>@Localizer["OpcDaTitle"]</h3>

<h4>@Localizer["OpcDaDescription"]</h4>

<PackageTips Name="BootstrapBlazor.OpcDa"/>

<DemoBlock Title="@Localizer["OpcDaNormalTitle"]" Introduction="@Localizer["OpcDaNormalIntro"]" ShowCode="false" Name="Normal">
    <p class="code-label">1. 点击 <b>连接</b> 按钮与 <code>OpcDa</code> 服务器建立通讯连接</p>
    <p>
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel DisplayText="OpcDa Server"></BootstrapInputGroupLabel>
            <Display @bind-Value="@_serverName"></Display>
            <Button Text="连接" OnClick="OnConnect" IsDisabled="OpcDaServer.IsConnected"></Button>
            <Button Text="断开" OnClick="OnDisConnect" IsDisabled="!OpcDaServer.IsConnected"
                    Color="Color.Danger"></Button>
        </BootstrapInputGroup>
    </p>

    <p class="code-label">2. 点击 <b>读取</b> 按钮读取 <code>OpcDa</code> 服务器上的位号值</p>
    <div class="row g-3 mb-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="转速"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="@Tag1"></BootstrapInputGroupLabel>
                <Display @bind-Value="@_tagValue1"></Display>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="流速"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="@Tag2"></BootstrapInputGroupLabel>
                <Display @bind-Value="@_tagValue2"></Display>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <Button OnClick="OnRead" Text="读取" IsDisabled="!OpcDaServer.IsConnected"></Button>
        </div>
    </div>

    <p class="code-label">3. 订阅功能</p>
    <p>通过订阅可以监控一组 <b>位号</b> 数据改变情况，当数据改变时通过 <code>DataChanged</code> 回调方法通知订阅者</p>
    <p class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="订阅名称"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="Subscription1"></BootstrapInputGroupLabel>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="更新频率"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="1000"></BootstrapInputGroupLabel>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="转速"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="@Tag1"></BootstrapInputGroupLabel>
                <Display @bind-Value="@_tagValue3"></Display>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="流速"></BootstrapInputGroupLabel>
                <BootstrapInputGroupLabel DisplayText="@Tag2"></BootstrapInputGroupLabel>
                <Display @bind-Value="@_tagValue4"></Display>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <Button OnClick="OnCreateSubscription" Text="订阅" IsDisabled="@(!OpcDaServer.IsConnected || _subscribed)"></Button>
            <Button OnClick="OnCancelSubscription" Text="取消" IsDisabled="!_subscribed"></Button>
        </div>
    </p>

    <p class="code-label">4. 浏览</p>
    <p>通过调用 <code>OpcDaServer</code> 的 <code>Browse</code> 方法可以构建一个节点树状结构</p>
    <p>
        <Button OnClick="OnBrowse" Text="浏览" IsDisabled="!OpcDaServer.IsConnected"></Button>
    </p>
    <p>
        <TreeView Items="_roots" AutoCheckChildren="true" AutoCheckParent="true" ShowIcon="true"
                  OnExpandNodeAsync="OnExpandNodeAsync"></TreeView>
    </p>
</DemoBlock>
