@using MudBlazor
@using System.Collections.Generic

<MudDataGrid Items="@Elements.Take(4)" Hover="@_hover" Dense="@_dense" Striped="@_striped" Bordered="@_bordered"
             RowStyleFunc="@_rowStyleFunc" RowClass="my-2 rounded-xl">
    <Columns >
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" CellStyleFunc="@_cellStyleFunc" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

<div class="d-flex flex-wrap mt-4">
    <MudSwitch @bind-Value="_hover" Color="Color.Primary">Hover</MudSwitch>
    <MudSwitch @bind-Value="_dense" Color="Color.Secondary">Dense</MudSwitch>
    <MudSwitch @bind-Value="_striped" Color="Color.Tertiary">Striped</MudSwitch>
    <MudSwitch @bind-Value="_bordered" Color="Color.Warning">Bordered</MudSwitch>
</div>

@code {
    // Element类定义
    public class Element
    {
        public int Number { get; set; }
        public string Sign { get; set; }
        public string Name { get; set; }
        public int Position { get; set; }
        public decimal Molar { get; set; }
    }

    // 示例数据
    private IEnumerable<Element> Elements = new List<Element>
    {
        new Element { Number = 1, Sign = "H", Name = "Hydrogen", Position = 1, Molar = 1.008m },
        new Element { Number = 2, Sign = "He", Name = "Helium", Position = 0, Molar = 4.0026m },
        new Element { Number = 3, Sign = "Li", Name = "Lithium", Position = 1, Molar = 6.94m },
        new Element { Number = 4, Sign = "Be", Name = "Beryllium", Position = 2, Molar = 9.0122m },
        new Element { Number = 5, Sign = "B", Name = "Boron", Position = 13, Molar = 10.81m }
    };

    private bool _hover;
    private bool _dense;
    private bool _striped;
    private bool _bordered;

    // 行样式函数：Position为0的行显示为斜体
    private Func<Element, int, string> _rowStyleFunc => (x, i) =>
    {
        if (x.Position == 0)
            return "font-style:italic";

        return "";
    };

    // 单元格样式函数：根据元素编号设置背景色，根据摩尔质量设置字体粗细
    private Func<Element, string> _cellStyleFunc => x =>
    {
        string style = "";

        if (x.Number == 1)
            style += "background-color:#8CED8C"; // 浅绿色

        else if (x.Number == 2)
            style += "background-color:#E5BDE5"; // 浅紫色

        else if (x.Number == 3)
            style += "background-color:#EACE5D"; // 浅黄色

        else if (x.Number == 4)
            style += "background-color:#F1F165"; // 浅黄色

        if (x.Molar > 5)
            style += ";font-weight:bold";

        return style;
    };
}