@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>
    </div>
@endsection

@section('ordersearch')
<div class="order-search mb-10 align-center">
    <select id="video-cate" class="form-control autosize selectpicker inline-block mr-20" name="cid" v-model="selectVal">
        <option value="">请选择</option>
        <option v-for="item in category" :value="item.id">@{{ item.title }}</option>
    </select>
    <div class="form-datetime len150 inline-block">
        <input class="form-control len150" name="title" type="text" v-model="title" placeholder="请输入名称">
    </div>
    <button type="submit" class="btn btn-primary ml-20" @click="search()"><i class="iconfont icon-sousuo2"></i></button>
</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-if="content.data.length > 0">
        <ul class="train-video">
            <li v-for='(item, index) in content.data'>
                <a :href="HOME_URL + '/admin/train-video/' + item.id" class="train-video-img"><img :src="item.img"></a>
                <h3>
                    <a :href="HOME_URL + '/admin/train-video/' + item.id">@{{ item.title }}</a>
                </h3>
            </li>
        </ul>
    </template>
    <template v-else>
        <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            暂无相应视频数据！
        </div>
    </template>
    <template v-if="content.total > content.per_page">
        <div class="footer">
            <div class="len-full text-center" colspan="7">
                <div class="pagination-info">共有@{{ content.total }}条， 每页显示：@{{ content.per_page }}条</div>
                <ul class="pagination">
                    <li v-if="content.current_page > 1"><span @click="update(1)">首页</span></li>
                    <li class="disabled" v-if="content.current_page == 1"><span>«</span></li>
                    <li v-else><span @click="update(content.current_page - 1)">«</span></li>
                    <li v-for="item in pages" :class="item == content.current_page ? 'active' : '' ">
                        <template v-if="item == content.current_page">
                            <span v-text="item"></span>
                        </template>
                        <template v-else>
                            <span v-text="item" @click="update(item)"></span>
                        </template>
                    </li>
                    <li class="disabled" v-if="content.current_page == lastPage"><span>»</span></li>
                    <li v-else><span @click="update(content.current_page + 1)">»</span></li>
                    <li v-if="content.current_page < lastPage"><span @click="update(lastPage)">尾页</span></li>
                </ul>
            </div>
        </div>
    </template>
@endsection

@section('notice')

@endsection

@section('foot')
<script type="text/javascript">
    var url     = "{{ config('setting.api_url') }}" + "/content";
    var urlLoad = "{{ config('setting.api_url') }}" + "/category";
    var video = new Vue({
        el: '#main-view',
        data: {
            table: 'training',
            selectVal: '',
            page: 1,
            lastPage: 1,
            category: {},
            content: {},
            title: '',
            lodding: true,
            limit: 16,
            cid: '',
        },
        created: function() {
            this.loadCate();
        },
        mounted: function() {
            this.load(this.cid);
        },
        methods: {
            load: function(cid) {
                var _this = this;
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {"table": this.table, "cid": cid, "page": _this.page, "title": _this.title, "limit": _this.limit},
                    success: function(json) {
                        _this.lodding = false;
                        _this.content = json.data;
                        _this.pageList(_this.content);
                    }
                });
            },
            loadCate: function() {
                var _this = this;
                $.ajax({
                    type: "GET",
                    url: urlLoad,
                    data: {"table": this.table},
                    success: function(json) {
                        _this.category = json.data;
                    }
                });
            },
            pageList: function(data) {
                var pag = [];
                var current   = data.current_page;
                var showItem  = 10;
                var allpage   = Math.ceil(data.total/data.per_page);
                this.lastPage = allpage;
                if ( current < showItem ) { 
                var i = Math.min(showItem, allpage);
                while (i) {
                    pag.unshift(i--);
                }
                } else { //当前页数大于显示页数了
                var middle = current - Math.floor(showItem / 2 ),
                    i      = showItem;
                    if ( middle >  (allpage - showItem) ) {
                    middle = (allpage - showItem) + 1
                    }
                while (i--) {
                    pag.push( middle++ );
                    }
                }
                this.pages = pag;
            },
            search: function() {
                this.lodding = true;
                this.load(this.selectVal);
            },
            update: function(page) {
                this.page = page;
                this.load(this.cid);
            },
        }
    });
</script>
@endsection
