<!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;
        }
        .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;
        }
        .gray-bg .fixed-table-toolbar {
            display: flex;
        }
        .gray-bg .fixed-table-toolbar .bs-bars {
            flex: 1;
        }
        .gray-bg .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="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="role-form">
                    <div class="select-list">
                        <ul>
                            <li class="leftSearchBox">
                                <input class="form-control" type="text" name="title" placeholder="请输入名字">
                                <!-- 时间：<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 id="searchBtns" 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="ceshi()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </li>
                            <li>
                                
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn-group-sm" id="toolbar">
                <div>
                    <a class="btn btn-success" id="addActivity" onclick="creatAndEdit(1)">
                        <i class="fa fa-plus"></i> 新增banner
                    </a>
                </div>
            </div>
            
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </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')}]];
        let rowData = {};
        var couType = [[${couType}]];
        $(function () {
            var options = {
                url: "/sweet/activity/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,
                // onCheckAll: onCheckAll,
                sortName: "createdAt",
                sortOrder: "desc",
                modalName: "活动",
                columns: [
                    {
                        field: 'cover',
                        title: '活动图片',
                        formatter: (value) => {
                            let dom = `<img id="viewImg" style="max-height: 60px;" class="imgBox" src="${value}" alt="">`
                            return dom;
                        }
                    },
                    {
                        field: 'title',
                        title: '活动名称'
                    },
                    
                    {
                        field: 'startTime',
                        title: '开始时间'
                    },
                    {
                        field: 'endTime',
                        title: '结束时间'
                    },
                    {
                        field: 'status',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value == 7) {
                                return '禁用'
                            } else {
                                return '启用'
                            }
                        }
                    },
                    {
                        title: '修改启用/禁用',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (row.status == 7) {
                                return`<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="paly('${row.activityId}', 6)">启用</a>`
                            } else {
                                return `<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="paly('${row.activityId}', 7)">禁用</a>`
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return`<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="creatAndEdit('','${row.activityId}')">编辑</a><a class="btn btn-warning btn-xs" id="button-open-11" onclick="exportData('','${row.activityId}')">
                                    <i class="fa fa-download"></i> 导出Excel
                                </a>`
                        }
                    },

                ]
            };
            $.table.init(options);
        });
        function ceshi () {
            $.form.reset();
            $("button[name=refresh]").click();
        }
        function creatAndEdit(num, id) {
            let name = '创建banner'
            if (!num) {
                console.log('编辑')
                name = '编辑banner'
            }
            $.modal.open(`${name}`, prefix2 + "/creatAndEdit?id=" + id, 900, 560, callback)
        }
        function callback(index, layero) {
            
            let data = {
                title: getDom(layero, "ybTitle").value,
                startTime: getDom(layero, "startTime").value,
                endTime: getDom(layero, "endTime").value,
                cover: getDom(layero, "viewImg").getAttribute('src')
            }
            for(var i in data) {
                if (!data[i]) return layer.msg('请将必填项填写完整～！')
            }
            if (getDom(layero, "activityId").value) {
                data.activityId = getDom(layero, "activityId").value;
                promiseMethods('/sweet/activity/update', 'post', JSON.stringify(data), 'application/json').then(res => {
                    $.operate.successCallback(res);
                })
            } else {
                data.activityId = '';
                promiseMethods('/sweet/activity/insert', 'post', JSON.stringify(data), 'application/json').then(res => {
                    $.operate.successCallback(res);
                })
            }
	    }
        $("#button-open-11").click(function(){
            $("button[name=refresh]").click()
	    })
        function getDom (layero, name) {
            console.log(name, '????')
            let bodyDom = $(layero).find("iframe")[0].contentWindow;
            return bodyDom.document.getElementById(name);
        }
        function exportData(id) {
            promiseMethods('/sweet/activity/export', 'post', {activityId:id}).then(res => {
                    // $.operate.successCallback(res);
                    window.open(res);
            })
        }
        function onCheck (row, $element) {
            rowData = row;
        }
        function onCheckAll (row, $element) {
            rowData = row;
        }
        function yes(index, layero) {
        }
        
        function paly(id, status) {
            console.log(id, status, 'dsadasda')
            let notice = '';
            if (status == 6) {
                notice = '确定要启用该活动？';
            } else {
                notice = '确定要禁用该活动？';
            }
            $.modal.confirm(notice, function() {
                $.ajax({
                    type: 'post',
                    url: '/sweet/activity/status',
                    data: {
                        activityId: id,
                        status
                    },
                    success:function(e) {
                        layer.msg("操作成功！")
                        $("#searchBtns").click(); 
                    }
                })
            });
        }
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1', //指定元素
                type: 'datetime'
            });
        });
        function promiseMethods(url,type,data,contentType) {
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url,
                    type,
                    data,
                    contentType,
                    success:function(res) {
                        resolve(res);
                    }
                })
            })
        }
    </script>
</body>
</html>