{php $this->template('header')}
    <style>

.bui-tab .bui-nav .active{color:#f9342a}
.bui-nav>.active {
    color: #f9342a;
}

.bui-nav>[class*=bui-btn].active:after {
    background: #f9342a;
}
.bui-searchbar .btn-search {
    background-color: #5FB878;
    border-radius: 4px;
    padding-right: 10px;
    color: #fff;
    margin-left: 5px;
    height: 0.65rem;
    line-height: 0.65rem;
}
.vinfo{ padding-top: .1rem;padding-bottom: 0;border:none; }


.vtitle{ font-size: .3rem }
.vimg{ height: 2rem; overflow: hidden; }
.vimg::before{ display:block; height:30px; width: 30px;
   text-align:center;line-height: 30px; font-size: .3rem; position: absolute;top:50%;right: 50%; margin-top: -15px;margin-right: -15px;background: #000;border-radius: 50%;
   color: #fff;opacity:0.7; }
.vbtn { padding: .1rem .2rem; background: #fff;border-bottom: 6px solid #f2f2f2; }
.vbtn>span{ color: #777; font-size: .24rem;display: inline-block; line-height: .6rem}
.vbtn .right{float: right;display: inline-block;height: .6rem;line-height: .6rem }
.vbtn .right span{ display: inline-block; padding: 0 .24rem; background: #ccc;font-size: .24rem; height: .5rem; line-height: .5rem;border-radius: 2px;color: #fff}
.vbtn .right span::before{ font-size: .28rem }

   
    </style>
    {php echo share(user($this->user['id'],'nickname'),user($this->user['id'],'headimgurl'),快来看看我的视频);}
    <div class="bui-page">
        <main>
          <div class="bui-tab-head">
                <ul class="bui-nav">
                    <li class="bui-btn click"  data-url="{php echo iurl('index')}">视频广场</li>
                    <li class="bui-btn  active">我的视频</li>
                   
                </ul>
            </div>
            <div id="searchbar" class="bui-searchbar bui-box " >
                <div class="span1">
                    <div class="bui-input">
                        <i class="icon-search"></i>
                        <input type="search" value="" placeholder="请输入关键字"><i class="icon-removefill" style="display: none;"></i>
                    </div>
                </div>
                <div class="btn-search">搜索</div>
            </div>
            <div id="scrollList" class="bui-scroll" >
                <div class="bui-scroll-head"></div>
                <div class="bui-scroll-main">
                    <ul class="bui-list bui-list-thumbnail">
                    </ul>
                </div>
                <div class="bui-scroll-foot"></div>
            </div>
        </main>
       
         <footer>{php $this->template('video')}</footer> 
    </div> 
<script>
    bui.ready(function(){

        $(document).on('click','.b2',function(){

                var t=$(this);
                var id=t.data('id');

                bui.confirm("确认删除？", function(e) {
                    //this 是指点击的按钮
                    var text = $(e.target).text();

                    if (text == "确定") {
                        $.post("{php echo iurl('del')}",{id:id},function(r){

                            if (r.code) {

                                t.parents('li').remove();
                            }else{

                                return tips(r.msg)
                            }
                            
                        })
                    }
                    this.close()
                });
        })

       var uiList = bui.list({
        id: "#scrollList",
        url: "{$self}",
        pageSize: 5,
        data: {},
        field: {
            page: "page",
            size: "pageSize",
            data: "data"
        },
        template: function(data) {
            var html = "";
            data.forEach(function(el, index) {
                // 演示传参,标准JSON才能转换
                html += ` <li>
                            <div class="bui-btn bui-box vinfo click" data-url="{php echo iurl('play')}&type=1&id=${el.id}">
                                <div class="bui-thumbnail vimg iconfont icon-bofang1"> 
                                    <img src="${el.img}">
                                </div>
                                <div class="span1">
                                    <h3 class="item-title vtitle es2" style="margin-bottom:0.1rem;">${el.title}</h3>
                                    <p class="item-text" style="height:0.6rem;line-height:0.6rem;">${el.mark}</p>
                                    <p class="item-text iconfont icon-kanguo_S" style="margin-bottom:0; height:0.3rem; line-height:0.3rem;"> ${el.eye}</p>
                                </div>
                            </div>
                            <div class="vbtn clearfix"> 
                                <span class="iconfont icon-shijian11">${el.time}</span>
                                <div class="right">
                                    <span class="btn iconfont icon-daohang-tuiguanglianjie b1 click" data-url="{php echo iurl('renwu/index/add')}&id=${el.id}&type=1">推广</span>
                                    <span class="btn iconfont icon-bianji3 b1 click" data-url="{php echo iurl('video/index/edit')}&id=${el.id}">编辑</span>
                                    <span class="btn iconfont icon-shanchu b2" data-id="${el.id}" >删除</span>
                                    <span class="btn iconfont icon-fangke b3 click" data-url="{php echo iurl('video/fk/item')}&id=${el.id}">访客</span>
                                </div>
                            </div>
                           </li>`
            });
            return html;
        }
    });
        var uiSearchbar = bui.searchbar({
        id:"#searchbar",
        onInput: function(e,keyword) {
            //实时搜索onclick="del(${el.id})"
            // console.log(++n)
        },
        onRemove: function(e,keyword) {
            //删除关键词需要做什么其它处理
            // console.log(keyword);
        },
        callback: function (e,keyword) {
            // console.log(keyword);
            if( uiList ){ 
                //点击搜索清空数据
                uiList.empty();
                // 重新初始化数据
                uiList.init({
                    page: 1,
                    data: {
                        "title":keyword
                    }
                });
            }
        }
    });

    //选项卡
    var uiTab = bui.tab({
        id:"#uiTab"
    });

})
</script>