<UserControl
    x:Class="SHH.CameraDashboard.CameraItemTop"
    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:local="clr-namespace:SHH.CameraDashboard"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="100"
    d:DesignWidth="800"
    mc:Ignorable="d">

    <Border
        Padding="20,12,20,6"
        Background="{DynamicResource Brush.Bg.Panel}"
        BorderBrush="{DynamicResource Brush.Border}"
        BorderThickness="0,0,0,1">

        <Grid>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Setter Property="Visibility" Value="Collapsed" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding HasSelection}" Value="False">
                                <Setter Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <TextBlock
                    FontSize="16"
                    Foreground="{DynamicResource Brush.Text.Secondary}"
                    Opacity="0.5"
                    Text="请在左侧列表中选择一个摄像头以查看详情" />
            </Grid>

            <Grid>
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Setter Property="Visibility" Value="Visible" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding HasSelection}" Value="False">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="210" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <WrapPanel>
                    <!--  在线、离线小圆点  -->
                    <Border
                        Width="10"
                        Height="10"
                        Margin="0,0,10,0"
                        VerticalAlignment="Center"
                        CornerRadius="5">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Background" Value="#FF5555" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="True">
                                        <Setter Property="Background" Value="#55FF55" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>

                    <!--  播放状态、ID号  -->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Border
                            Margin="6,2,0,0"
                            Padding="6,2"
                            VerticalAlignment="Center"
                            CornerRadius="4">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="#10808080" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Camera.Status}" Value="Playing">
                                            <Setter Property="Background" Value="#00CC6A" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Camera.Status}" Value="Faulted">
                                            <Setter Property="Background" Value="#FF5555" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <TextBlock
                                FontSize="11"
                                FontWeight="SemiBold"
                                Foreground="White"
                                Text="{Binding Camera.Status}" />
                        </Border>

                        <TextBlock
                            Grid.Row="1"
                            Margin="6,8,0,0"
                            FontSize="13"
                            Foreground="{DynamicResource Brush.Text.Secondary}"
                            Opacity="0.6"
                            Text="ID:" />

                        <TextBlock
                            Grid.Row="1"
                            Margin="26,8,0,0"
                            FontSize="13"
                            Foreground="{DynamicResource Brush.Text.Secondary}"
                            Text="{Binding Camera.Id}" />

                    </Grid>
                </WrapPanel>

                <Grid Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <WrapPanel>
                        <!--  设备名称  -->
                        <TextBlock
                            VerticalAlignment="Center"
                            FontSize="14"
                            FontWeight="Bold">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Text" Value="{Binding Camera.Name}" />
                                    <Setter Property="Foreground" Value="{DynamicResource Brush.Text.Primary}" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Camera.Name}" Value="">
                                            <Setter Property="Text" Value="未命名" />
                                            <Setter Property="Foreground" Value="{DynamicResource Brush.Text.Secondary}" />
                                            <Setter Property="FontStyle" Value="Italic" />
                                            <Setter Property="Opacity" Value="0.5" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Camera.Name}" Value="{x:Null}">
                                            <Setter Property="Text" Value="未命名" />
                                            <Setter Property="Foreground" Value="{DynamicResource Brush.Text.Secondary}" />
                                            <Setter Property="FontStyle" Value="Italic" />
                                            <Setter Property="Opacity" Value="0.5" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>

                        <TextBlock
                            Margin="4,0,0,0"
                            FontSize="13"
                            Foreground="{DynamicResource Brush.Text.Secondary}"
                            Opacity="0.5"
                            Text="{Binding Camera.Brand}" />
                    </WrapPanel>

                    <!--  IP 地址  -->
                    <TextBlock
                        Grid.Row="1"
                        HorizontalAlignment="Left"
                        FontFamily="Consolas"
                        FontSize="16"
                        Foreground="{DynamicResource Brush.Text.Primary}"
                        Text="{Binding Camera.IpAddress}" />
                </Grid>

                <WrapPanel Grid.Column="2" VerticalAlignment="Center">
                    <!--  分辨率  -->
                    <StackPanel Margin="20,0,20,0">
                        <TextBlock
                            HorizontalAlignment="Right"
                            FontSize="10"
                            FontWeight="Bold"
                            Foreground="{DynamicResource Brush.Text.Secondary}"
                            Opacity="0.5"
                            Text="RESOLUTION" />
                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                            <TextBlock
                                FontSize="16"
                                Foreground="{DynamicResource Brush.Text.Primary}"
                                Text="{Binding Camera.Width}" />
                            <TextBlock
                                Margin="2,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Foreground="{DynamicResource Brush.Text.Secondary}"
                                Text=" x " />
                            <TextBlock
                                FontSize="16"
                                Foreground="{DynamicResource Brush.Text.Primary}"
                                Text="{Binding Camera.Height}" />
                        </StackPanel>
                    </StackPanel>

                    <Border BorderBrush="{DynamicResource Brush.Border}" BorderThickness="0,0,1,0" />

                    <!--  实际帧  -->
                    <StackPanel Margin="20,0,20,0">
                        <TextBlock
                            HorizontalAlignment="Right"
                            FontSize="10"
                            FontWeight="Bold"
                            Foreground="{DynamicResource Brush.Text.Secondary}"
                            Opacity="0.5"
                            Text="REAL FPS" />
                        <TextBlock
                            HorizontalAlignment="Right"
                            FontSize="16"
                            Foreground="{DynamicResource Brush.Text.Primary}"
                            Text="{Binding Camera.RealFps}" />
                    </StackPanel>
                </WrapPanel>

                <StackPanel
                    Grid.Column="4"
                    VerticalAlignment="Center"
                    Orientation="Horizontal">
                    <Button
                        Width="32"
                        Height="32"
                        Margin="8,0,8,0"
                        Command="{Binding DeleteCommand}"
                        Style="{StaticResource Btn.Ghost.Danger}"
                        ToolTip="删除此摄像头">
                        <Path
                            Width="24"
                            Height="24"
                            Data="{StaticResource Icon.Trash}"
                            Style="{StaticResource Style.IconPath}" />
                    </Button>

                    <Button
                        Width="32"
                        Height="32"
                        Margin="8,0,8,0"
                        Command="{Binding EditDeviceCommand}"
                        Style="{StaticResource Btn.Ghost.Info}"
                        ToolTip="编辑设备配置">
                        <Path
                            Width="18"
                            Height="18"
                            Data="{StaticResource Icon.Action.Edit}"
                            Style="{StaticResource Style.IconPath}" />
                    </Button>

                    <Button
                        Width="32"
                        Height="32"
                        Margin="5,0,0,0"
                        Command="{Binding ImageProcessCommand}"
                        Style="{StaticResource Btn.Ghost.Info}"
                        ToolTip="图像处理">
                        <Path
                            Width="24"
                            Height="24"
                            Data="{StaticResource Icon.Action.Process}"
                            Style="{StaticResource Style.IconPath}" />
                    </Button>

                    <Button
                        Width="32"
                        Height="32"
                        Margin="5,0,0,0"
                        Command="{Binding ImageSubscribeCommand}"
                        Style="{StaticResource Btn.Ghost.Info}"
                        ToolTip="图像订阅">
                        <Path
                            Width="18"
                            Height="18"
                            Data="{StaticResource Icon.Action.Subscribe}"
                            Style="{StaticResource Style.IconPath}" />
                    </Button>
                    <Button
                        Width="32"
                        Height="32"
                        Margin="0,0,5,0"
                        Command="{Binding PtzCommand}"
                        Style="{StaticResource Btn.Ghost.Info}"
                        ToolTip="云台控制 (PTZ)">

                        <Path
                            Width="24"
                            Height="24"
                            Data="{StaticResource Icon.Ptz}"
                            Style="{StaticResource Style.IconPath}" />
                    </Button>

                    <Button
                        Width="32"
                        Height="32"
                        Margin="8,0,8,0"
                        Background="Transparent"
                        BorderThickness="0"
                        Command="{Binding TogglePlayCommand}"
                        Cursor="Hand">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Border
                                    x:Name="bd"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="8">

                                    <Path
                                        Width="24"
                                        Height="24"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Stretch="Uniform">
                                        <Path.Style>
                                            <Style TargetType="Path">
                                                <Setter Property="Data" Value="{StaticResource Icon.Action.Play}" />
                                                <Setter Property="Fill" Value="{DynamicResource Brush.Text.Secondary}" />

                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Camera.Status}" Value="Playing">
                                                        <Setter Property="Data" Value="{StaticResource Icon.Action.Pause}" />
                                                        <Setter Property="Fill" Value="#00CC6A" />
                                                    </DataTrigger>

                                                    <DataTrigger Binding="{Binding Camera.Status}" Value="Connecting">
                                                        <Setter Property="Data" Value="{StaticResource Icon.Status.Loading}" />
                                                        <Setter Property="Fill" Value="{DynamicResource Brush.State.Warning}" />
                                                    </DataTrigger>

                                                    <DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="False">
                                                        <Setter Property="Data" Value="{StaticResource Icon.Status.WifiOff}" />
                                                        <Setter Property="Fill" Value="{DynamicResource Brush.State.Danger}" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Path.Style>
                                    </Path>
                                </Border>

                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="bd" Property="Background" Value="#1A808080" />
                                    </Trigger>
                                    <DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="False">
                                        <Setter Property="Cursor" Value="Arrow" />
                                    </DataTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </StackPanel>

            </Grid>
        </Grid>
    </Border>
</UserControl>