@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Data
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model PageData<ArticleEntity>
@{
    var type = this.Context.Request.GetInt("Catalog");  
}
<link rel="stylesheet" href="~/help_style/css/nav.css">
<div id="app" class="container-fluid" style="color: #fff;background:#39516b;">
    <div class="container" style="padding: 20px;">
    <div class="navhelp col-md-3" style="overflow:auto;">
        <ul style="padding-top: 20px;">  
            <li class="navhelp-item">
                <a href="?Catalog=5"><span>公告中心</span></a>
            </li>
            <li class="navhelp-item">
                <a href="?Catalog=4"><span>直连教程</span></a>
            </li>
            <li class="navhelp-item">
                <a href="?Catalog=3"><span>常见售后</span></a>
            </li>
            <li class="navhelp-item">
                <a href="?Catalog=1"><span>其他帮助</span></a>
            </li>
            <li class="navhelp-item">
                <a href="?Catalog=2"><span>优惠活动</span></a>
        </ul>
    </div>
        <section class=" col-md-9" style="color: #0777ff;background:#263238;margin-left:5px;height: 80vh;overflow:auto; text-center;" >
            <div id="help_info">
                <div class="tab-content listcon" >
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div></div>
                        <ul class="listUl">
                            @foreach (var item in Model.List)
                            {
                                <li>
                                    <a style="color: aliceblue;" href="#" v-on:click="help_info(@item.Id)">
                                        <div class="newsTit">
                                            <div class="item" >
                                                <p style="padding: 0;margin:0;color:white;">@item.Title</p>
                                            </div>
                                            <div class="item">
                                                @item.CreateTime.ToString("yyyy.MM.dd")
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                    @* 详细内容 *@
                    <div role="tabpanel" class="tab-pane active  text-center" id="detail" style="display:none;"> 
                        <ul class="breadcrumb text-left" >
                            <li><a :href="'?Catalog='+title.id" style="color:#ccc">{{title.value1}}</a></li>
                            <li class="active" style="color:white">{{title.value2}}</li>
                        </ul>
                        <div v-if="detail_id == 3" style="text-align: center;">
                            <h1>视频教程</h1>
                            <video controls="controls" height="500"  name="media"><source src="http://mp4.juip.com/%E8%8B%B9%E6%9E%9C%E6%89%8B%E6%9C%BA%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
                        </div>
                        <div v-if="detail_id == 4" style="text-align: center;">
                            <h1>视频教程</h1>
                            <video controls="controls" height="500"  name="media"><source src="http://mp4.juip.com/%E5%AE%89%E5%8D%93%E6%89%8B%E6%9C%BA%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
                        </div>
                        <div v-if="detail_id == 5" style="text-align: center;">
                            <h1>视频教程</h1>
                            <video controls="controls" height="500"  name="media"><source src="http://mp4.juip.com/%E6%A8%A1%E6%8B%9F%E5%99%A8%E6%95%99%E7%A8%8B.mp4" type="video/mp4"></video>
                        </div>
                        <div v-if="detail_id == 56" style="text-align: center;">
                            <h1>视频教程</h1>
                            <video controls="controls" height="500"  name="media"><source src="http://mp4.juip.com/wjjc.mp4" type="video/mp4"></video>
                        </div>
                        <div id="content" style="background:white;">
                            
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-lg-6 text-left">
                                    上一条：<a href="#" v-on:click="help_info(prev.Id)">{{prev.Title}}</a>
                                </div>
                                <div class="col-lg-6 text-right">
                                    下一条：<a href="#" v-on:click="help_info(next.Id)">{{next.Title}}</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div><!-- /container -->
  <hr style="color: white;padding:0;margin:0;">
<script src="~/help_style/js/nav.js"></script>
<script src="~/js/vue.js"></script>
<script type="text/javascript">

var title_list = [' ','其他帮助','优惠活动','常见售后','直连教程','公告中心'];

    var app = new Vue({
        el: '#app',
        data: {
            detail_id:0,
            title:{
                id:'123',
                value1:'',
                value2:'',
            },
            prev:{},
            next:{},
        },
        computed: {

        },
        watch: {
            
        },
        created: function () {
            
        },
        methods: {
            help_info(id) {
                var that=this;
                this.detail_id = id;
                $("#home").hide();
                $("#detail").show();
                $.ajax({
                    type: 'GET',
                    url: '/article/info?id=' + id,
                    dataType: "json",
                    success: function (res) {
                        $("#content").html(res.Data.Info.Content)
                        that.title.id = res.Data.Info.CatalogId
                        that.title.value1 = title_list[that.title.id]
                        that.title.value2 = res.Data.Info.Title
                        that.prev = res.Data.Prev?res.Data.Prev:''
                        that.next = res.Data.Next?res.Data.Next:''
                    }
                });
                
            }
        }
    })
</script>