<UserControl
    x:Class="DMS.WPF.Views.MqttServerDetailView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helper="clr-namespace:DMS.WPF.Helper"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
    xmlns:valueConverts="clr-namespace:DMS.WPF.ValueConverts"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <UserControl.Resources>
        <valueConverts:EnumDescriptionConverter x:Key="EnumDescriptionConverter" />
    </UserControl.Resources>

    <DockPanel>
        <!--  顶部导航栏  -->
        <Border
            Margin="20,10"
            Padding="15"
            DockPanel.Dock="Top">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--  返回MQTT列表按钮  -->
                <Button
                    Grid.Column="0"
                    Margin="0,0,10,0"
                    Command="{Binding NavigateToMqttsCommand}"
                    Style="{StaticResource ButtonDefault}"
                    ToolTip="返回MQTT服务器列表">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ArrowLeft8}" />
                        </StackPanel>
                    </Button.Content>
                </Button>

                <!--  操作菜单栏  -->
                <ui:CommandBar
                    Grid.Column="1"
                    HorizontalAlignment="Right"
                    DefaultLabelPosition="Right"
                    IsOpen="False">

                    <ui:AppBarButton
                        x:Name="EditButton"
                        Command="{Binding EditMqttCommand}"
                        Label="编辑">
                        <ui:AppBarButton.Icon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
                        </ui:AppBarButton.Icon>
                    </ui:AppBarButton>

                    <ui:AppBarButton x:Name="ShareButton" Label="分享">
                        <ui:AppBarButton.Icon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Share}" />
                        </ui:AppBarButton.Icon>
                    </ui:AppBarButton>

                    <ui:CommandBar.SecondaryCommands>
                        <ui:AppBarButton
                            x:Name="SettingsButton"
                            Icon="Setting"
                            Label="设置" />
                    </ui:CommandBar.SecondaryCommands>
                </ui:CommandBar>
            </Grid>
        </Border>

        <!--  主内容区域  -->
        <ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto">
            <StackPanel Margin="20">
                <!--  MQTT Server Details  -->
                <Border
                    Margin="0,0,0,10"
                    Padding="15"
                    Background="White"
                    BorderBrush="#E0E0E0"
                    BorderThickness="1"
                    CornerRadius="8">
                    <Border.Effect>
                        <DropShadowEffect
                            BlurRadius="5"
                            Opacity="0.1"
                            ShadowDepth="2"
                            Color="#888888" />
                    </Border.Effect>

                    <StackPanel>
                        <Grid Margin="0,0,0,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <StackPanel Grid.Column="0" Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,10,0"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource MdFontIcons}"
                                    FontSize="24"
                                    Foreground="#2196F3"
                                    Glyph="&#xF048B;" />
                                <TextBlock
                                    VerticalAlignment="Center"
                                    Style="{StaticResource SubtitleTextBlockStyle}"
                                    Text="MQTT 服务器详情" />
                            </StackPanel>
                        </Grid>

                        <Grid Margin="0,8,0,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <StackPanel
                                Grid.Row="0"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.Tag}" />
                                <TextBlock VerticalAlignment="Center" Text="名称:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="0"
                                Grid.Column="1"
                                Margin="0,0,10,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.ServerName}" />

                            <StackPanel
                                Grid.Row="0"
                                Grid.Column="2"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.World}" />
                                <TextBlock VerticalAlignment="Center" Text="主机:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="0"
                                Grid.Column="3"
                                Margin="0,0,0,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.ServerUrl}" />

                            <StackPanel
                                Grid.Row="1"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.ConnectApp}" />
                                <TextBlock VerticalAlignment="Center" Text="端口:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="1"
                                Grid.Column="1"
                                Margin="0,0,10,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.Port}" />

                            <StackPanel
                                Grid.Row="1"
                                Grid.Column="2"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.ContactInfo}" />
                                <TextBlock VerticalAlignment="Center" Text="客户端ID:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="1"
                                Grid.Column="3"
                                Margin="0,0,0,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.ClientId}" />

                            <StackPanel
                                Grid.Row="2"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.People}" />
                                <TextBlock VerticalAlignment="Center" Text="用户名:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="2"
                                Grid.Column="1"
                                Margin="0,0,10,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.Username}" />

                            <StackPanel
                                Grid.Row="2"
                                Grid.Column="2"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.Lock}" />
                                <TextBlock VerticalAlignment="Center" Text="密码:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="2"
                                Grid.Column="3"
                                Margin="0,0,0,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.Password}" />

                            <StackPanel
                                Grid.Row="3"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource MdFontIcons}"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Glyph="&#xF06A7;" />
                                <TextBlock VerticalAlignment="Center" Text="发布主题:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="3"
                                Grid.Column="1"
                                Margin="0,0,10,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.PublishTopic}" />

                            <StackPanel
                                Grid.Row="3"
                                Grid.Column="2"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource MdFontIcons}"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Glyph="&#xF009E;" />
                                <TextBlock VerticalAlignment="Center" Text="订阅主题:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="3"
                                Grid.Column="3"
                                Margin="0,0,0,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.SubscribeTopic}" />

                            <StackPanel
                                Grid.Row="4"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.PC1}" />
                                <TextBlock VerticalAlignment="Center" Text="平台:" />
                            </StackPanel>
                            <!-- <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding CurrentMqtt.MqttPlatform, Converter={StaticResource EnumDescriptionConverter}}" Margin="0,0,10,12" VerticalAlignment="Center" FontWeight="SemiBold" Foreground="#333333"/> -->

                            <StackPanel
                                Grid.Row="5"
                                Grid.Column="0"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
                                <TextBlock VerticalAlignment="Center" Text="消息头:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="5"
                                Grid.Column="1"
                                Margin="0,0,10,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.MessageHeader}" />

                            <StackPanel
                                Grid.Row="5"
                                Grid.Column="2"
                                Margin="0,0,5,12"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
                                <TextBlock VerticalAlignment="Center" Text="消息内容:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="5"
                                Grid.Column="3"
                                Margin="0,0,0,12"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.MessageContent}" />

                            <StackPanel
                                Grid.Row="6"
                                Grid.Column="0"
                                Margin="0,0,5,0"
                                Orientation="Horizontal">
                                <ui:FontIcon
                                    Margin="0,0,5,0"
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="#666666"
                                    Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
                                <TextBlock VerticalAlignment="Center" Text="消息尾:" />
                            </StackPanel>
                            <TextBlock
                                Grid.Row="6"
                                Grid.Column="1"
                                Margin="0,0,10,0"
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="#333333"
                                Text="{Binding CurrentMqtt.MessageFooter}" />
                        </Grid>
                    </StackPanel>
                </Border>

                <!--  Associated Variables  -->
                <Border
                    Margin="0,0,0,10"
                    Padding="15"
                    Background="White"
                    BorderBrush="#E0E0E0"
                    BorderThickness="1"
                    CornerRadius="8">
                    <Border.Effect>
                        <DropShadowEffect
                            BlurRadius="5"
                            Opacity="0.1"
                            ShadowDepth="2"
                            Color="#888888" />
                    </Border.Effect>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock
                            Grid.Row="0"
                            Margin="0,0,0,10"
                            Style="{StaticResource SubtitleTextBlockStyle}"
                            Text="关联变量" />
                        <DataGrid
                            x:Name="AssociatedVariablesDataGrid"
                            Grid.Row="1"
                            AutoGenerateColumns="False"
                            CanUserAddRows="False"
                            CanUserDeleteRows="False"
                            IsReadOnly="True"
                            ItemsSource="{Binding CurrentMqtt.VariableAliases}"
                            SelectionMode="Extended">

                            <i:Interaction.Behaviors>
                                <helper:SelectedItemsBehavior SelectedItems="{Binding SelectedMqttAliaes}" />
                            </i:Interaction.Behaviors>


                            <DataGrid.ContextMenu>
                                <ContextMenu>
                                    <MenuItem
                                        Command="{Binding ModifyAliasCommand}"
                                        CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=DataGrid}, Path=SelectedItems[0]}"
                                        Header="修改发送名称" />
                                    <MenuItem
                                        Command="{Binding UnassignAliasCommand}"
                                        Header="取消关联" />
                                </ContextMenu>
                            </DataGrid.ContextMenu>
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="{Binding Variable.VariableTable.Device.Name}" Header="设备名称" />
                                <DataGridTextColumn Binding="{Binding Variable.VariableTable.Name}" Header="变量表名称" />
                                <DataGridTextColumn Binding="{Binding Variable.Name}" Header="变量名称" />
                                <DataGridTextColumn Binding="{Binding Alias}" Header="MQTT发送名称" />
                                <DataGridTextColumn Binding="{Binding Variable.S7Address}" Header="地址" />
                                <DataGridTextColumn Binding="{Binding Variable.DataType}" Header="数据类型" />
                                <DataGridTextColumn Binding="{Binding Variable.DisplayValue}" Header="显示值" />
                                <DataGridTextColumn Binding="{Binding Variable.UpdatedAt, StringFormat='yyyy-MM-dd HH:mm:ss'}" Header="更新时间" />
                            </DataGrid.Columns>
                        </DataGrid>
                    </Grid>
                </Border>
            </StackPanel>
        </ScrollViewer>
    </DockPanel>
</UserControl>