<!DOCTYPE html>
<html lang="en">
<head>
<%include("/common/_head.html"){}%>
    <title>图片管理 -飞趣</title>
<style>
</style>
</head>
<body>
<%
var user = c.currentUser(request, servlet.response);
var isLogin = false;
if(user != null){
isLogin=true;
}
include("/common/_headwithlogin.html",{user:user,isLogin:isLogin}){}
%>
<div class="layui-container fly-marginTop topToFix c-user-main">
    <%include("/common/_user_menu.html",{user:user}){}%>
        <div class="c-panel fly-panel-user detail-box">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md12">
                    <table class="layui-hide" id="beautyManage" lay-filter="beauty"></table>
                    <script type="text/html" id="bar">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="addToBanner">加至Banner</a>
                    </script>
                    <script type="text/html" id="imgUrlTpl">
                        <a href="/beauty/{{d.id}}" class="layui-table-link" target="_blank"><img src="{{d.imgUrl}}"> </a>
                    </script>
                </div>
            </div>
        </div>
</div>
<%include("/common/_footor.html"){}%>
</body>
<%include("/common/_scripts.html",{user:user}){}%>
<script>
    layui.use(['table','fly'], function() {
        var table=layui.table
            ,fly=layui.fly;
        table.render({
            elem: '#beautyManage'
            ,url:'/beauty/manage/list'
            ,toolbar: true
            ,title: '图片数据表'
            ,totalRow: true
            ,cols: [[
                {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
                {field:'title', title:'标题', width:200, fixed: 'left', unresize: true, sort: true},
                {field:'imgUrl', title:'图片地址', width:200, fixed: 'left', unresize: true, sort: true,templet: '#imgUrlTpl'},
                {field:'uploadUserId', title:'用户id', width:80, fixed: 'left', unresize: true, sort: true},
                {field:'createTime', title:'创建时间', width:160, fixed: 'left', unresize: false, sort: true},
                {field:'delFlag', title:'标志', width:80, fixed: 'left', unresize: true, sort: true},
                {fixed: 'right', width:200, align:'center', toolbar: '#bar'}
            ]]
            ,page: true
            ,response: {
                statusCode: '0000', //重新规定成功的状态码为 200，table 组件默认为 0
                msgName: 'message' //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,id: 'beautyReload'
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
        });
        //监听工具条
        table.on('tool(beauty)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 1
                    ,id: 'fq_website'
                    ,title: '查看图片'
                    ,area:  ['50%', '80%']
                    ,content: ['<ul class="layui-form c-panel-body" style="margin: 20px;">'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">图片标题</label>'
                        ,'<div class="layui-input-block">'
                        ,'<input required name="name" lay-verify="required" placeholder="图片标题" value="'+data.title+'" class="layui-input">'
                        ,'</div>'
                        ,'</li>'
                        ,'<li class="layui-form-item">'
                        ,'<label class="layui-form-label">图片详情</label>'
                        ,'<div class="layui-input-block">'
                        ,'<img src="'+data.imgUrl+'" >'
                        ,'</div>'
                        ,'</li>'
                        ,'</ul>'].join('')
                    ,success: function(layero, index){

                    }
                });
            }  else if(obj.event === 'del'){
                layer.confirm('真的删除这幅图片么', function(index){
                    fly.json('/beauty/delete?id='+data.id,{},function (res) {
                        layer.msg('删除成功！');
                        table.reload('beautyReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    });
                    layer.close(index);
                });
            }else if(obj.event === 'addToBanner'){
                layer.confirm('真将这幅图片加到banner上么', function(index){
                    var simBeauty = {
                        id:data.id,
                        title:data.title,
                        imgUrl:data.imgUrl,
                        href:'/beauty/'+data.id
                    }
                    fly.json('/beauty/manage/addOrDelBanner?type=add',simBeauty,function (res) {
                        layer.msg('加入成功！');
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</html>