@extends('admin.master')

@section('style')
<link href="{{ asset('data/assets/css/lightbox.css') }}" rel="stylesheet">
@endsection

@section('top')
	<div class="top-breadcrumb pull-left">
        <h5>资讯详情</h5>
        <a class="btn btn-xs btn-default goback" onclick="javascript:history.go(-1);">
            <i class="iconfont icon-back-copy"></i><span>返回</span>
        </a>
    </div>
@endsection

@section('content')
    <template v-if="lodding">
        <div class="laodding">
            <div colspan="2" class="text-center">
                <img src="{{ asset('data/assets/images/load.gif') }}">&nbsp;数据正在加载中...
            </div>
        </div>
    </template>
    <template v-else>
        <div class="container train-detail">
            <div class="row">
                <h2 class="video-detail-title pb-20">@{{ content.title }}</h2>
                <div class="col-md-4 attribute pt-10 pb-10">发布时间：
                    <span>@{{ content.created_at }}</span>
                </div>
                <div class="col-md-4 attribute pt-10 pb-10">作者：
                    <span>@{{ content.author }}</span>
                </div>
                <div class="col-md-4 attribute pt-10 pb-10">所属分类：
                    <span>@{{ content.cate.title }}</span>
                </div>
            </div>
            <div class="content-text pt-20 w-markdown-body" v-html="content.content"></div>
            <div class="page-next-prev row pt-20">
                <div class="col-xs-6 previous-page">
                    <a class="arrow mr-10" :href="prev ? HOME_URL + '/admin/train-news/' + prev.id : '#'">
                        <i class="iconfont icon-back-copy"></i>
                    </a>
                    <template v-if="prev">
                        <a class="page-link" :href="HOME_URL + '/admin/train-news/' + prev.id">@{{ prev.title }}</a>
                    </template>
                    <template v-else>
                        <span>没有了</span>
                    </template>
                </div>
                <div class="col-xs-6 next-page">
                    <template v-if="next">
                        <a class="page-link" :href="HOME_URL + '/admin/train-news/' + next.id">@{{ next.title }}</a>
                    </template>
                    <template v-else>
                        <span>没有了</span>
                    </template>
                    <a class="arrow ml-10" :href="next ? HOME_URL + '/admin/train-news/' + next.id : '#'">
                        <i class="iconfont icon-back-copy"></i>
                    </a>
                </div>
            </div>
        </div>
    </template>
@endsection

@section('notice')

@endsection

@section('foot')
<link rel="stylesheet" href="{{ asset('data/assets/js/highlight/github.css') }}">
<script src="{{ asset('data/assets/js/highlight/highlight.pack.js') }}"></script>
<style>
    pre {
        background: #f8f8f8;
    }
</style>
<script type="text/javascript">
    var urlLoad = "{{ config('setting.api_url') }}" + "/content/show/" + "{{ $id }}";
    var video = new Vue({
        el: '#main-view',
        data: {
            table: 'article',
            content: {},
            lodding: true,
            prev: null,
            next: null,
        },
        mounted: function() {
            this.load();
        },
        methods: {
            load: function() {
                var _this = this;
                $.ajax({
                    type: "GET",
                    url: urlLoad,
                    data: {"table": this.table},
                    success: function(json) {
                        _this.lodding = false;
                        json.data.content = json.data.content.replace(/lang-/g, 'language-');
                        _this.content = json.data;
                        _this.prev    = json.prev;
                        _this.next    = json.next;
                        setTimeout(function () {
                            $('pre code').each(function(i, block) {
                                hljs.highlightBlock(block);
                            });
                        }, 200);
                    }
                });
            },
        }
    });
</script>
@endsection
