<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('店铺列表')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style>
        .layui-layer-btn0 {
            padding: 0;
        }
        .paddings {
            padding: 0 !important;
        }
        #addClassify {
            display: none;
            width: 540px;
            padding: 20px;
        }
        #addClassify .selectClassify {
            display: flex;
            align-items: center;
        }
        #addClassify .selectClassify label {
            display: flex;
            margin-right: 20px;
            align-items: center;
        }
        #addClassify .selectClassify label input {
            margin: 0;
            margin-right: 2px;
        }
        .shadeCss,.layui-layer-shade {
            background-color: rgb(0, 0, 0, 0.5) !important;
        }
        .select-list ul {
            display: flex;
            justify-content: space-between;
        }
        .selectClassifyOne {
            display: flex;
            align-items: center;
            margin: 12px 0;
        }
        .selectClassifyOne span {
            width: 45px;
        }
        .tagStore .fixed-table-toolbar {
            display: flex;
        }
        .tagStore .fixed-table-toolbar .bs-bars {
            flex: 1;
        }
        .tagStore .fixed-table-toolbar .bs-bars .btn-group-sm {
            display: flex;
            justify-content: space-between;
        }
        .leftSearchBox {
            display: flex;
            align-items: center;
        }
        .leftSearchBox input, .leftSearchBox select {
            width: 200px;
            height: 34px;
            margin-right: 12px;
        }
        .ibox-content {
            border-style: none;
            padding: 0;
        }
        .kv-hidden {
            display: none !important;
        }
    </style>
</head>
<body class="tagStore">
    <div class="container-div">
        <div class="row">
            <div class="btn-group-sm" id="toolbar">
                <div>
                    <a class="btn btn-primary" id="button-open-10">
                        启用
                    </a>
                    <a class="btn btn-warning" id="button-open-10">
                        停用
                    </a>
                    <a class="btn btn-danger" id="button-open-10">
                        删除
                    </a>
                    <a class="btn btn-success" id="addActivity" th:onclick="$.operate.addTab()">
                        <i class="fa fa-plus"></i> 新增活动
                    </a>
                    <a class="btn btn-warning" id="button-open-11">
                        <i class="fa fa-download"></i> 导出Excel
                    </a>
                </div>
            </div>
            <div class="col-sm-12 search-collapse">
                <form id="coupon-form">
                    <div class="select-list">
                        <ul>
                            <div class="leftSearchBox">
                                <input class="form-control" type="text" name="purchaseName" placeholder="请输入名字">
                                类型：<select class="type form-control" name="status" data-first-title="请选择">
                                    <option value="-1">全部</option>
                                    <option value="0">等待开始</option>
                                    <option value="1">活动中</option>
                                    <option value="2">活动结束</option>
                                    <option value="7">停用</option>
                                </select>
                                时间：<input type="text" class="layui-input form-control" id="test1" name="startTime" placeholder="请选择时间">
                                ~  
                                <input type="text" class="layui-input form-control" id="test1" name="endTime"  style="margin-left: 10px;" placeholder="请选择时间">
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </div>
                            <div>
                                
                            </div>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
            <div id="addClassify">
                <div class="selectClassify">
                    <span>LOGO：</span>
                    <img id="viewImg" src="" alt="" style="max-height:150px;">
                    <div class="ibox-content">
                        <div class="form-group">
                            <div class="file-loading">
                                <input id="fileinput" type="file" name="file" data-browse-on-zone-click="true" data-theme="fas">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="selectClassifyOne">
                    <span>昵称：</span>
                    <input class="form-control" type="text">
                </div>
                <div class="selectClassify">
                    <span>类别：</span>
                    <label>
                        <input type="radio" checked value="1" id="optionsRadios1" name="optionsRadios"><span>音乐人</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>艺术家</span></label>
                    <label>
                        <input type="radio" value="3" id="optionsRadios1" name="optionsRadios"><span>IP</span></label>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var dicCouponBusiType = [[${@dict.getType('zhengzai_coupon_busi_type')}]];
        var dicCouponBindType = [[${@dict.getType('zhengzai_coupon_bind_type')}]];
        var platformUrl = [[${platformUrl}]];
        var prefix = ctx + "candy/coupon/mgt";
        var prefix2 = ctx + "local";

        var viewMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:detail')}]];
        var cancelMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:cancel')}]];

        var couType = [[${couType}]];
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                type: 'datetime'
            });
        });
        $(function () {
            var options = {
                url: "/goblin/marketing/zhengzai/list",
                type: 'get',
                createUrl: prefix2 + "/addNewActivity",
                detailUrl: prefix2 + "/addNewActivity?id={id}",
                removeUrl: prefix + "/cancel/{id}",
                openTab: prefix2 + "/activityStoreList/id={id}",
                // exportUrl: prefix + "/export",
                onCheck: onCheck,
                sortName: "createdAt",
                sortOrder: "desc",
                modalName: "活动",
                showSearch: false,
                showRefresh: true,
                showColumns: false,
                showToggle: false,
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'name',
                        title: '活动名称'
                    },
                    {
                        field: 'status',
                        title: '状态',
                        formatter: function(value, row, index) {
                            // $('.pull-right').hide()
                            if (value == -1) {
                                return '全部'
                            } else if (value == 0) {
                                return '等待开始'
                            } else if (value == 1) {
                                return '进行中'
                            } else if (value == 2) {
                                return '活动结束'
                            } else {
                                return '停用'
                            }
                        }
                    },
                    {
                        field: 'bindType',
                        title: '有效期',
                        formatter: function(value, row, index) {
                            return row.startTime + '  -  ' + row.endTime
                        }
                    },
                    {
                        field: 'createdAt',
                        title: '创建时间',
                        // formatter: function(value, row, index) {
                        //     console.log(value)
                        //     // return $.common.dateFormat(value, 'yyyy-MM-dd HH:mm:ss')
                        // }
                    },
                    {
                        field: 'comment',
                        title: '店铺数量'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return `<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="$.operate.detailTab('${index}')", 7, '确定下架此商品吗？')">编辑活动</a>
                            <a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="goToStore_list('${row.itemId}', 7, '确定下架此商品吗？')">查看详情</a>`
                        }
                    }]
            };
            $.table.init(options);
        });
        $("#button-open-10").click(function(){
            var btn = ['<span style="display:inline-block;padding:0 15px;height:100%;" onclick="yes(1,2)">确定</span>', '取消'];
	    	layer.open({
                type: 1,
                shade: true,
                title: '创建分类', //不显示标题
                btn,
                content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function () {
                    console.log(1111)
                    $(".layui-layer-btn0").addClass('paddings')
                    $(".layui-layer-shade").addClass('shadeCss')
                },
                cancel: function(res){
                    console.log(res, '111')
                    // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
                }
    		});
	    })
        $("#button-open-11").click(function(){
            $("button[name=refresh]").click()
	    })
        function goToStore_list () {
            $.modal.openTab('北京草莓音乐节', prefix2 + "/activityStoreList?id=" + 1212)
        }
        function onCheck (row, $element) {
            console.log(row, $element)
        }
        function yes(index, layero) {
            console.log(index, layero)
        }
        
        function del(id, status, notice) {
            $.modal.confirm(notice, function() {
                $.ajax({
                    type: 'put',
                    url: '/stone/item/change/status',
                    data: {
                        itemId: id,
                        status
                    },
                    success:function(e) {
                        layer.msg("操作成功！")
                        $("button[name=refresh]").click()
                    }
                })
            });
        }
        $(function(){
            $("#fileinput").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl':  platformUrl + "/platform/basicServices/alOss/upload",
                "uploadExtraData": {
                    "pathName" : "banner",
                    "buckType" : 1
                },
                autoReplace: true,
                showCaption: false,
                showPreview: false,
                showRemove: false,
                showUpload: false,
                showCancel: false,
                showClose: false,
                autoReplace: true,
                dropZoneTitle: "请上传文件",
                maxFileCount: 1
            }).on("filebatchselected", function (event, files) {         //默认上传
                $(this).fileinput("upload");
            })
            .on("fileuploaded", function (event, data) {       //上传回调事件
                showPicture = 'https://img.zhengzai.tv/' + data.response.data.ossPath;
                $("#viewImg").attr('src', showPicture)
            })
        })
    </script>
</body>
</html>