@page "/"
@using Newtonsoft.Json
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Gantt
@using System.Dynamic
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor

@using System.Text
@using System.Net
@using System.IO
@using System.Data
@using Newtonsoft.Json.Linq

@inject IJSRuntime JS

<style>
    #signature-control h4 {
        margin-bottom: 20px;
        text-align: center;
    }
    #signdescription {
        font-size: 14px;
        padding-bottom: 10px;
    }
    .e-sign-clear {
        margin-left: 5px;
    }
    .e-btn-options {
        float: right;
        margin-bottom: 10px;
    }
    #signature-control {
        width: 100%;
        margin: 0;
    }
    .e-bigger #signature-control h4 {
        font-size: 20px;
    }
</style>

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div id="@(id)_BoldBI" @ondrop="@OnDrop" ></div>
@*    <button @onclick=GetToken> 测试</button>
    <div>@Token</div>*@


<div style="height:100%;width:100%;">
    <div style="height:100%;width:100%;">
        <div style="height:100%;width:100%;">
            <div style="height:100%;width:100%;">
                <SfChart Height="100%" Width="100%">
                    <ChartTitleStyle></ChartTitleStyle>
                    <ChartArea></ChartArea>
                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
                    <ChartSeriesCollection>
                        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
                            <ChartMarker Visible="true">
                                <ChartDataLabel Visible="true">
                                    <ChartDataLabelFont>

                                    </ChartDataLabelFont>
                                </ChartDataLabel>
                            </ChartMarker>
                        </ChartSeries>
                    </ChartSeriesCollection>
                    <ChartTooltipSettings Enable="true">
                    </ChartTooltipSettings>
                    <ChartZoomSettings Mode="ZoomMode.XY" EnableMouseWheelZooming="true" EnableScrollbar="true"></ChartZoomSettings>
                </SfChart>
            </div>
        </div>
    </div>
</div>


@*<SfTab @bind-SelectedItem="@SelectedTab" Animation="new TabAnimationSettings(){}">
  <TabEvents Selecting="Select"></TabEvents>
    <TabItems >
        <TabItem Disabled="false">
            <HeaderTemplate>
                <div @onclick="()=>{SelectedTab = 0;}">
                    Login
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <div class="login-form">
                    <div class='wrap'>
                        <div id="heading">Sign in to view the Grid</div>
                        <div id="input-container">
                            <div class="e-float-input e-input-group">
                                <input type="text" @bind-value="@UserName" required />
                                <span class="e-float-line"></span>
                                <label class="e-float-text">Username</label>
                            </div>
                            <div class="e-float-input e-input-group">
                                <input type="password" @bind-value="@Password" required />
                                <span class="e-float-line"></span>
                                <label class="e-float-text">Password</label>
                            </div>
                        </div>
                        <div class="button-contain">
                            <SfButton @onclick="@OnClicked">Log in</SfButton>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </TabItem>
        <TabItem Disabled="@DisableTab">
            <HeaderTemplate>
                <div @onclick="()=>{SelectedTab = 1;}">
                    Grid
                </div>
            </HeaderTemplate>
            <ContentTemplate>
              <button @onclick="async()=>{ if(this.sfGrid != null){await this.sfGrid.ExportToExcelAsync();} }">导出</button>
                <SfGrid @ref="@sfGrid" DataSource="@Orders" AllowExcelExport="true">
                    <GridPageSettings></GridPageSettings>
                    <GridColumns>
                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="130"></GridColumn>
                        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    </GridColumns>
                    <GridAggregates>
                      <GridAggregate>
                        <GridAggregateColumns>
                          <GridAggregateColumn Field=@nameof(Order.Freight) Type="AggregateType.Sum">

                          </GridAggregateColumn>
                        </GridAggregateColumns>
                      </GridAggregate>
                    </GridAggregates>
                </SfGrid>
            </ContentTemplate>
        </TabItem>
        <TabItem Disabled="@DisableTab" >
            <HeaderTemplate>
                <div @onclick="()=>{SelectedTab = 2;}">
                    Gantt
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <Syncfusion.Blazor.Gantt.SfGantt DataSource="@TaskCollection" EnableVirtualization="false" EnablePersistence="true">
                    <GanttTaskFields ParentID="ParentId" Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks" Dependency="Dependency">
                    </GanttTaskFields>
                    <GanttEditSettings AllowAdding="false" AllowEditing="false" AllowDeleting="false" AllowTaskbarEditing="true" ShowDeleteConfirmDialog="true" Mode="Syncfusion.Blazor.Gantt.EditMode.Auto"></GanttEditSettings>
                </Syncfusion.Blazor.Gantt.SfGantt>
            </ContentTemplate>
        </TabItem>
        <TabItem Disabled="@DisableTab">
            <HeaderTemplate>
                <div @onclick="()=>{SelectedTab = 3;}">
                    Chart
                </div>
            </HeaderTemplate>
            <ContentTemplate>
                <SfChart Height="100%" Width="100%">
                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
                    <ChartSeriesCollection>
                        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
                          <ChartMarker Visible="false" />
                        </ChartSeries>
                    </ChartSeriesCollection>
                    <ChartZoomSettings Mode="ZoomMode.XY"   EnableMouseWheelZooming="true" EnableScrollbar="true"></ChartZoomSettings>
                </SfChart>
            </ContentTemplate>
        </TabItem>
    </TabItems>
</SfTab>*@

@*<div class="control-section">
    <div id="signature-control">
        <div class='e-sign-heading'>
            <span id="signdescription">Sign below</span>
            <span class="e-btn-options">
                <SfButton @ref="saveButton" Disabled="saveDisabled" IsPrimary="true" class="e-sign-save" @onclick="onSave">Save</SfButton>
                <SfButton @ref="clearButton" Disabled="clearDisabled" IsPrimary="true" class="e-sign-clear" @onclick="onClear">Clear</SfButton>
            </span>
        </div>
        <SfSignature @ref="signature" Changed="OnChange" style="height:100%; width: 100%;"></SfSignature>
    </div>
</div>
*@



@code {
    private SfSignature signature;
    private SfButton saveButton;
    private SfButton clearButton;
    private bool saveDisabled = true;
    private bool clearDisabled = true;
    private void OnChange()
    {
        clearDisabled = false;
        saveDisabled = false;
    }
    //无法保存成base64，保存图片也是保存到本地
    private async void onSave()
    {
        await signature.SaveAsync();

        clearDisabled = true;
    }
    private async Task onClear()
    {
        await signature.ClearAsync();
        saveDisabled = true;
    }

    private SfGrid<Order> sfGrid { get; set; }

    private void OnDrop(Microsoft.AspNetCore.Components.Web.DragEventArgs args)
    {

    }



    public void Select(SelectingEventArgs args)
    {
        if(args.IsSwiped)
        {
            args.Cancel = true;
        }
    }

    private void OnDrag(Syncfusion.Blazor.Navigations.DragEventArgs args)
    {
        args.Cancel = true;
    }

    private List<string> countries = new List<string> { "South Korea", "India", "Germany", "Italy", "Russia" };
    private Random randomNum = new Random();
    public List<ExpandoObject> MedalDetails { get; set; } = new List<ExpandoObject>();


    private string UserName { get; set; } = "";
    private string Password { get; set; } = "";
    private Boolean DisableTab { get; set; } = false;
    private Boolean Disabled { get; set; } = true;
    private int SelectedTab { get; set; } = 2;
    public List<Order> Orders { get; set; }

    private string id { get;set;}
    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        GetTempDatas(DtOri.Copy());
    }

    private DataTable DtOri = new DataTable();

    protected override void OnInitialized()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("X");
        dt.Columns.Add("Y");

        dt.Rows.Add("South Korea",20);
        dt.Rows.Add("Germany",50);
        dt.Rows.Add("Italy",70);
        dt.Rows.Add("India",40);
        dt.Rows.Add("Russia",80);

        DtOri = dt.Copy();

        GetTempDatas(DtOri.Copy());

        //id = Guid.NewGuid().ToString();
        //Orders = Enumerable.Range(1, 6).Select(x => new Order()
        //    {
        //        OrderID = 1000 + x,
        //        CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
        //        Freight = 2.1 * x,
        //        OrderDate = DateTime.Now.AddDays(-x),
        //    }).ToList();
        //TaskCollection = GetTaskCollection();
        //MedalDetails = Enumerable.Range(0, 5).Select((x) =>
        //{
        //    dynamic d = new ExpandoObject();
        //    d.X = countries[x];
        //    d.Y = randomNum.Next(20, 80);
        //    return d;
        //}).Cast<ExpandoObject>().ToList<ExpandoObject>();


    }

    private void GetTempDatas(DataTable dt)
    {
        MedalDetails = new List<ExpandoObject>();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            dynamic d = new ExpandoObject();
            ((IDictionary<string, object>)d)["X"] = dt.Rows[i]["X"].ToString();
            ((IDictionary<string, object>)d)["Y"] = dt.Rows[i]["Y"].ToString();
            MedalDetails.Add(d);
        }
    }


    private void OnClicked()
    {
        //if (this.UserName == "" && this.Password == "")
        //{
        //    Console.WriteLine("clicked");
        //}
        //else if (this.UserName == "")
        //{
        //    Console.WriteLine("Enter the username");
        //}
        //else if (this.Password == "")
        //{
        //    Console.WriteLine("Enter the password");
        //}
        //else if (this.UserName.Length < 4)
        //{
        //    Console.WriteLine("Username must be minimum 4 characters");
        //}
        //else
        //{
        //    this.UserName = "";
        //    this.Password = "";
        //    this.DisableTab = false;
        //    this.Disabled = true;
        //    this.SelectedTab = 1;
        //}
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }


    public List<TaskData> TaskCollection { get; set; } = new List<TaskData>();

    //实体类，最终绑到Gantt图上的数据类型
    public class TaskData
    {
        public int TaskId { get; set; } = 0;
        public string? ParentId { get; set; }
        public string TaskName { get; set; } = "";
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Duration { get; set; }
        public int? Progress { get; set; }
        public List<TaskData> SubTasks { get; set; } = new List<TaskData>();
        public string RowId { get; set; } = "";
        public string? Dependency { get; set; }
        public string? Comment { get; set; }
        public string? UDField1 { get; set; }
        public string? UDField2 { get; set; }
        public string? UDField3 { get; set; }
        public int DataPos { get; set; }
    }


    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>() {
        new TaskData() {
            TaskId = 1,
            TaskName = "Project initiation",
            StartDate = new DateTime(2019, 04, 02),
            EndDate = new DateTime(2019, 04, 21),
            SubTasks = (new List <TaskData> () {
                new TaskData() {
                    TaskId = 2,
                    TaskName = "Identify Site location",
                    StartDate = new DateTime(2019, 04, 02),
                    Duration = "0",
                    Progress = 30,
                },
                new TaskData() {
                    TaskId = 3,
                    TaskName = "Perform soil test",
                    StartDate = new DateTime(2019, 04, 02),
                    Duration = "4",
                    Progress = 40,
                },
                new TaskData() {
                    TaskId = 4,
                    TaskName = "Soil test approval",
                    StartDate = new DateTime(2019, 04, 02),
                    Duration = "0",
                    Progress = 30
                },
            })
        },
        new TaskData() {
            TaskId = 5,
            TaskName = "Project estimation",
            StartDate = new DateTime(2019, 04, 02),
            EndDate = new DateTime(2019, 04, 21),
            SubTasks = (new List <TaskData> () {
                new TaskData() {
                    TaskId = 6,
                    TaskName = "Develop floor plan for estimation",
                    StartDate = new DateTime(2019, 04, 04),
                    Duration = "3",
                    Progress = 30,
                },
                new TaskData() {
                    TaskId = 7,
                    TaskName = "List materials",
                    StartDate = new DateTime(2019, 04, 04),
                    Duration = "3",
                    Progress = 40
                },
                new TaskData() {
                    TaskId = 8,
                    TaskName = "Estimation approval",
                    StartDate = new DateTime(2019, 04, 04),
                    Duration = "0",
                    Progress = 30,
                }
            })
        }
    };
        return Tasks;
    }
}