@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject NugetVersionService VersionManager

<h3>Markdown 编辑器</h3>

<h4>提供 Markdown 语法支持的文本编辑器</h4>

<p><b>注意事项：</b></p>

<p>本组件依赖于 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank"><code>BootstrapBlazor.Markdown</code></a>，使用本组件时需要引用其组件包</p>

<p><b>Nuget 包安装</b></p>

<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Markdown" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.Markdown</code> 组件的安装</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>

<h4>CSS 文件</h4>

<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" /&gt;</Pre>

<h4>JS 文件</h4>

<Pre>&lt;script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"&gt;&lt;/script&gt;</Pre>

<h4>本地化</h4>

<Tips>组件内置中文，切换当前文化信息即可获得中文</Tips>

<Block Title="普通用法" Introduction="默认设置">
    <p>输入 <code>Markdown</code> 相关代码后，点击下方相关区域显示数据</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString
        </textarea>
    </div>
</Block>

<Block Title="异步加载数据" Introduction="通过 <code>Webapi</code> 获得 <code>Markdown</code> 显示内容">
    <Button Text="加载" IsAsync="true" OnClick="GetAsyncString" Icon="fa fa-fa" />
    <Markdown @bind-Value="@AsyncValue"></Markdown>
</Block>

<Block Title="常用属性" Introduction="更改默认参数">
    <p>设置 <code>Markdown</code> 编辑器最小高度 <code>300px</code>，默认高度 <code>500px</code>，提示信息这是 <code>Markdown</code>，<code>Tab</code> 方式显示，默认显示所见即所得页面</p>
    <Markdown Height="500" MinHeight="300" Placeholder="这是 Markdown" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</Block>

<Block Title="浏览器模式" Introduction="单纯浏览模式，不可编辑">
    <p>设置<code>Markdown</code> 编辑器为纯浏览模式，<code>IsViewer="true"</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// Markdown 示例代码
    /// </summary>
    public partial class Markdowns
    {
        private string? MarkdownString { get; set; }

        private string? HtmlString { get; set; }

        /// <summary>
        /// 获得/设置 版本号字符串
        /// </summary>
        private string Version { get; set; } = "fetching";

        private string? Language { get; set; }

        private string? AsyncValue { get; set; }

        /// <summary>
        /// OnInitializedAsync 方法
        /// </summary>
        /// <returns></returns>
        protected override async Task OnInitializedAsync()
        {
            Language = CultureInfo.CurrentUICulture.Name;
            MarkdownString = "### 测试";
            Version = await VersionManager.GetVersionAsync("bootstrapblazor.markdown");
        }

        private async Task GetAsyncString()
        {
            await Task.Delay(600);
            AsyncValue = $"### {DateTime.Now}";
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem(){
                Name = "Height",
                Description = "控件高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "300"
            },
            new AttributeItem(){
                Name = "MinHeight",
                Description = "控件最小高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "200"
            },
            new AttributeItem(){
                Name = "InitialEditType",
                Description = "初始化时显示的界面",
                Type = "InitialEditType",
                ValueList = "Markdown/Wysiwyg",
                DefaultValue = "Markdown"
            },
            new AttributeItem(){
                Name = "PreviewStyle",
                Description = "预览模式",
                Type = "PreviewStyle",
                ValueList = "Tab/Vertical",
                DefaultValue = "Vertical"
            },
            new AttributeItem(){
                Name = "Language",
                Description = "UI 语言",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "Placeholder",
                Description = "提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem(){
                Name = "IsViewer",
                Description = "是否为纯浏览模式",
                Type = "bool",
                ValueList = " true/false ",
                DefaultValue = " false "
            }
        };
    }
}