@page  "/Report/SingleChart"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using P = Blazor.ECharts.Options.Series.Pie

<PageContainer>
    <Breadcrumb>
        <Breadcrumb>
            <BreadcrumbItem>
                <a href="/Home"><Icon Type="home"></Icon></a>
            </BreadcrumbItem>
            <BreadcrumbItem>
                <span>申诉单项统计</span>
            </BreadcrumbItem>
        </Breadcrumb>
    </Breadcrumb>
    <Content>
        <Space>
            <SpaceItem>统计类型：</SpaceItem>
            <SpaceItem>
                <Select DataSource="@Types"
                        @bind-Value="@iType"
                        LabelName="@nameof(TJType.Name)"
                        ValueName="@nameof(TJType.value)"
                        Placeholder="请选择统计类型">
                </Select>
            </SpaceItem>
            <SpaceItem>申诉开始时间</SpaceItem>
            <SpaceItem>
                <RangePicker TValue="DateTime?[]" DefaultValue="new DateTime?[] { start, end }" OnChange="OnTimeRangeChange" />
            </SpaceItem>
            <SpaceItem><Button Icon="search" Loading="_noIconLoading" OnClick="OnButtonClick">开始统计</Button></SpaceItem>
        </Space>
    </Content>
    <ChildContent>
        <div>
            @if (Datas == null)
            {

            }
            else
            {
                <div>
                    <center>
                        <Blazor.ECharts.Components.EPie Option="@Option1" Class="chart-normal" @ref="pieChart"/>
                        <table width="80%" border="1">
                            <thead>
                            <th>序号</th>
                            <th>@Datas.ATitle</th>
                            <th>数量</th>
                            </thead>
                            <tbody>
                                @{
                                    int iIndex = 1;
                                    foreach (var cData in Datas.Datas)
                                    {
                                        <tr>
                                            <td style="text-align: center;">@iIndex</td>
                                            <td>@cData.type</td>
                                            <td style="text-align: center;">@cData.value</td>
                                        </tr>
                                        iIndex++;
                                    }
                                }
                            </tbody>

                        </table>
                    </center>
                </div>
            }
        </div>
    </ChildContent>
</PageContainer>