{extend name="app/shop/view/base.html"/}
{block name="resources"}
{/block}
{block name="main"}

<!-- 搜索框 -->
<div class="ns-single-filter-box">
    <button class="layui-btn ns-bg-color" onclick="add()">添加海报</button>

    <div class="layui-form">
    <div class="layui-input-inline">
    <input type="text" name="keywords" placeholder="请输入海报名称" class="layui-input" autocomplete="off">
    <button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
    <i class="layui-icon">&#xe615;</i>
    </button>
    </div>
    </div>
</div>

<div class="layui-tab ns-table-tab" lay-filter="manjian_tab">
    <div class="layui-tab-content">
        <!-- 列表 -->
        <table id="poster_list" lay-filter="poster_list"></table>
    </div>
</div>
<script type="text/html" id="qr_img">
    <div class='ns-table-title'>
        <div class='ns-title-pic'>
            <img layer-src src="{{ns.img()}}" onerror="this.src = 'SHOP_IMG/default_headimg.png' ">
        </div>
    </div>
</script>

<script type="text/html" id="status">
    <div class='ns-table-title'>
            {{# if(d.status == 0){ }}
              <div class='ns-title-pic' style="text-align:left">未启用</div>
            {{# }else{ }}
              <div class='ns-title-pic ns-text-color' style="text-align:left">启用</div>
            {{# } }}
        </div>
    </div>
</script>
<!-- 操作 -->
<script type="text/html" id="operation">
    <div class="ns-table-btn">
        <a class="layui-btn" lay-event="detail">预览</a>
        <a class="layui-btn" lay-event="edit" >编辑</a>
        {{# if(d.status==0){ }}
        <a class="layui-btn" lay-event="start">启用</a>
        {{# }else{ }}
        <a class="layui-btn" lay-event="close">关闭</a>
        {{# } }}
        <a class="layui-btn" lay-event="delete">删除</a>
    </div>
</script>

{/block}
{block name="script"}
<script>
    var laytpl;
    layui.use(['form','element','laytpl'], function() {
        var table,
            form = layui.form,
            element = layui.element,
            repeat_flag = false; //防重复标识
        form.render();

        laytpl = layui.laytpl;
        table = new Table({
            elem: '#poster_list',
            url: ns.url("shop/goods/poster"),
            cols: [
                [{
                    field: 'poster_id',
                    title: 'ID',
                    unresize: 'false',
                    width: '10%'
                }, {
                    field: 'poster_name',
                    title: '海报名称',
                    unresize: 'false',
                    width: '15%',
                }, {
                    field: 'poster_type',
                    title: '海报类型',
                    unresize: 'false',
                    width: '15%',
                    templet: function(data) {
                        return data.poster_type == 1 ? '商品海报': '--';
                    }

                }, {
                    field: 'scan_num',
                    title: '扫码数',
                    unresize: 'false',
                    width: '15%',
                }, {
                    field: 'status',
                    title: '海报状态',
                    unresize: 'false',
                    width: '15%',
                    templet: '#status'
                },{
                    title: '操作',
                    toolbar: '#operation',
                    unresize: 'false',
                    width: '25%'
                }]
            ]
        });

        /**
         * 监听工具栏操作
         */
        table.tool(function(obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'detail': //预览
                    laytpl($("#detail").html()).render(data, function (html) {
                        layer.open({
                            type: 1,
                            shadeClose: true,
                            shade: 0.3,
                            offset: 'auto',
                            fixed: false,
                            title: "预览",
                            area: ['auto', 'auto'],
                            btn: ['退出'],
                            content: html,
                            skin: 'detail'
                        });

                    });
                    break;
                case 'edit': //编辑
                    location.href = ns.url("shop/goods/editposter", {"poster_id": data.poster_id});
                    break;
                case 'delete': //删除
                    deletePoster(data.poster_id);
                    break;
                case 'close': //关闭
                    close(data.poster_id);
                    break;
                case 'start': //启用
                    start(data.poster_id);
                    break;
            }
        });

        /**
         * 删除
         */
        function deletePoster(poster_id) {
            if (repeat_flag) return false;
            repeat_flag = true;

            layer.confirm('确定要删除该海报吗?', function() {
                $.ajax({
                    url: ns.url("shop/goods/deleteposter"),
                    data: {
                        poster_id:poster_id
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function(res) {
                        layer.msg(res.message);
                        repeat_flag = false;

                        if (res.code == 0) {
                            table.reload();
                        }
                    }
                });
            }, function () {
                layer.close();
                repeat_flag = false;
            });
        }

        /**
         * 关闭
         */
        function close(poster_id) {
            if (repeat_flag) return false;
            repeat_flag = true;

            layer.confirm('确定关闭吗?', function() {
                $.ajax({
                    url: ns.url("shop/goods/editstatus"),
                    data: {
                        poster_id:poster_id,status:0
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function(res) {
                        layer.msg(res.message);
                        repeat_flag = false;

                        if (res.code == 0) {
                            table.reload();
                        }
                    }
                });
            });
        }

        /**
         * 开启
         */
        function start(poster_id) {
            if (repeat_flag) return false;
            repeat_flag = true;

            layer.confirm('确定启用吗?', function() {
                $.ajax({
                    url: ns.url("shop/goods/editstatus"),
                    data: {
                        poster_id:poster_id,status:1
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function(res) {
                        layer.msg(res.message);
                        repeat_flag = false;

                        if (res.code == 0) {
                            table.reload();
                        }
                    }
                });
            });
        }

        /**
         * 搜索功能
         */
        form.on('submit(search)', function(data) {
            table.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
        });
    });

    function add() {
        location.href = ns.url("shop/goods/editposter");
    }
</script>

<!-- 详情弹框html -->
<script type="text/html" id="detail">
    <img layer-src src="{{ns.img(d.qr_img)}}" class="img_prev"/>
</script>
{/block}