<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>

                <section class="content">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#item" aria-controls="item" role="tab"
                                data-toggle="tab">单项</a></li>
                        <li role="presentation"><a href="#item-group" aria-controls="item-group" role="tab"
                                data-toggle="tab">组合</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="item">
                            <section class="content">
                                <div class="group-table-section">
                                    <div class="prize-group-wrapper js-normal-prize-group-wrapper">
                                        <div class="header-wrapper">
                                            <div class="right-content js-no-editing">
                                                <div class="action-btn-wrap"><button class="btn btn-primary js-edit-group"
                                                        data-pool-type="1">编辑</button></div>
                                            </div>
                                            <div class="right-content right-content-edit js-editing">
                                                <div class="action-btn-wrap">
                                                    <button class="btn btn-primary js-add-prize">新增</button>
                                                    <button class="btn btn-danger js-save-edit">保存</button>
                                                    <button class="btn btn-default js-cancel-edit">取消</button>
                                                </div>
                                            </div>
                                        </div>
                                        <table class="prize-group-table table table-hover table-striped">
                                            <tr>
                                                <th>ID</th>
                                                <th>名称</th>
                                                <th>图片</th>
                                                <th>倍数</th>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="item-group">
                            <section class="content">
                                <div id="toolbar">
                                    <button id="addBtn" class="btn btn-primary">
                                        <i class="glyphicon glyphicon-plus"></i>增加
                                    </button>
                                </div>
                                <table id="table"></table>
                            </section>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>

    <!-- 添加弹窗 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title" id="addModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addForm">
                        <input type="hidden" name="id" id="id" />
                        <div class="form-group">
                            <label for="modal_name" class="col-sm-3 control-label">名称<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[required]" name="name" id="modal_name"
                                    placeholder="配置名称只能为中文，数字，大小写英文与下划线">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">配置图片<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <img src="" id="picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
                                <input type="hidden" id="picUrl" name="imgUrl" class="form-control validate[required]" />
                                <span id="picImgInfo" style="color:red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="module_multiple" class="col-sm-3 control-label">倍数:<font color="red">*</font>
                                :</label>
                            <div class="col-sm-9">
                                <input type="text" class="input-sm form-control datetime validate[required]" name="multiple"
                                    id="module_multiple" placeholder="倍数需要大于等于1">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" id="addCancel">取消</button>
                    <button class="btn btn-primary" type="button" id="addSave">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加弹窗 -->
    <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title" id="groupModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="groupForm">
                        <input type="hidden" name="id" id="groupId" />
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">名称<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[required]" name="name" id="name"
                                    placeholder="配置名称只能为中文，数字，大小写英文与下划线">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="itemIds" class="col-sm-3 control-label">开奖id<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control validate[required]" name="itemIds" id="itemIds">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status" class="col-sm-3 control-label">状态<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <input class="checkbox" type="checkbox" id="status">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" id="cancel">取消</button>
                    <button class="btn btn-primary" type="button" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body" id="tipMsg"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "LuckySeaItemAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                let isSeniorPrizeEditing;
                let seniorPrizeGroupCache;
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'id', title: 'id', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'name', title: '组合名', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'itemIds', title: '礼物清单', align: 'center', valign: 'middle', width: '20%' },
                        { field: 'itemNames', title: '礼物清单', align: 'center', valign: 'middle', width: '20%' },
                        {
                            field: 'status',
                            title: '状态',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                return val == 0 ? "关闭" : "开启";
                            }
                        },
                        {
                            field: 'tmp',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                return "<button class='btn btn-sm btn-primary opt-edit' data-id=" + row.id + ">编辑</button>" + " " +
                                    "<button class='btn btn-sm btn-danger opt-del' data-id=" + row.id + ">删除</button>";
                            }
                        }
                    ],
                    showRefresh: true,
                    pagination: false,
                    sidePagination: "null", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    uniqueId: 'id',
                    toolbar: '#toolbar',
                    url: '/admin/luckySea/listItemGroup',
                    onLoadSuccess: function (data) {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                })

                $("#table").on("click", '.opt-edit', function () {
                    const id = $(this).attr("data-id");
                    const row = $('#table').bootstrapTable('getRowByUniqueId', id);
                    $('#groupId').val(row.id);
                    $('#name').val(row.name);
                    $('#itemIds').val(row.itemIds);
                    $('#status').prop('checked', row.status == 1);
                    $('#groupModal').modal('show');
                });

                $("#table").on("click", '.opt-del', function () {
                    const id = $(this).attr("data-id");
                    if (confirm("你确定要移除吗？")) {
                        $.ajax({
                            type: "post",
                            url: "/admin/luckySea/delItemGroup",
                            data: { id },
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    $('#table').bootstrapTable('refresh');
                                } else {
                                    $("#tipMsg").text("删除失败." + json.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });

                $('#addBtn').on('click', function () {
                    $('#groupForm')[0].reset();
                    $('#status').attr('checked', true);
                    $('#groupModal').modal('show');
                });

                $('#cancel').on('click', function () {
                    $('#groupModal').modal('hide');
                })

                $('#save').on('click', function () {
                    const id = $('#groupId').val();
                    const name = $('#name').val();
                    if (undefined == name || "" == name || name.length < 1 || name.length > 5) {
                        alert("组合名不能为空，且不能超过5个字")
                        return;
                    }
                    const itemIds = $('#itemIds').val();
                    console.info(!itemIds.includes(','))
                    if (undefined == itemIds || "" == itemIds || !itemIds.includes(',') || itemIds.split(",").length < 2
                        || itemIds.split(",").some(id => "" == id)) {
                        alert("开奖ID不能少于两个")
                        return;
                    }
                    const status = $('#status').is(':checked') ? 1 : 0;
                    $.ajax({
                        type: "post",
                        url: "/admin/luckySea/saveItemGroup",
                        data: { id, name, itemIds, status },
                        success: function (json) {
                            if (json.code == 200) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                $('#table').bootstrapTable('refresh');
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                })

                const POOL_TYPE = {
                    normal: 1,
                    senior: 2,
                }

                function changeDateValue(propName, idx, inputValue) {
                    editingNormalPrizeGroup[idx][propName] = inputValue;
                    reRenderPage({
                        normalPrizeGroup: editingNormalPrizeGroup,
                    })
                }

                function inputChanged(e) {
                    const propName = $(e.target).attr("name");
                    const idx = $(e.target).attr("data-idx");
                    const inputValue = e.target.value;
                    console.log("input change", e, propName, idx, inputValue);
                    changeDateValue(propName, idx, inputValue);
                }

                function removePirzeItem(e) {
                    const idx = $(e.target).attr("data-idx");
                    if (confirm("你确定要移除吗？")) {
                        editingNormalPrizeGroup.splice(idx, 1);
                        console.debug("remove item", editingNormalPrizeGroup)
                        reRenderPage({
                            normalPrizeGroup: editingNormalPrizeGroup,
                        });
                    }
                }

                function renderPrizeGroup(items, isEdit) {
                    let wrapperClassName = '.js-normal-prize-group-wrapper';
                    if (isEdit) {
                        console.debug("show editing action btns")
                        $(`${wrapperClassName} .js-no-editing`).hide();
                        $(`${wrapperClassName} .js-editing`).show();
                    } else {
                        console.debug("hide editing action btns")
                        $(`${wrapperClassName} .js-no-editing`).show();
                        $(`${wrapperClassName} .js-editing`).hide();
                    }

                    const groupTableDom = $(`${wrapperClassName} .prize-group-table`);
                    $(`${wrapperClassName} .prize-group-table input`).unbind("change");
                    $(`${wrapperClassName} .prize-group-table .js-remove-item`).unbind("click");
                    groupTableDom.html("<thead><tr>\n" +
                        "                                <th>ID</th>\n" +
                        "                                <th>名称</th>\n" +
                        "                                <th>图片</th>\n" +
                        "                                <th>倍数</th>\n" +
                        "                            </tr></thead>");
                    groupTableDom.append("<tbody>")
                    items.forEach((item, idx) => {
                        const tds = [];
                        if (isEdit) {
                            tds.push(`<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${idx}"></i>${item.id}</td>`);
                        } else {
                            tds.push(`<td>${item.id}</td>`)
                        }
                        if (isEdit) {
                            tds.push(`<td><input type="text" name="name" data-idx="${idx}" value="${item.name}"></td>`);
                        } else {
                            tds.push(`<td>${item.name}</td>`)
                        }
                        if (isEdit) {
                            tds.push(`<td>
                        <img width="40" height="40" name="imgUrl" data-idx="${idx}" src="${item.imgUrl}"/>
                        <input type="file" id = "picUploadFile2${idx}" name="file">
                        <button class="btn btn-success picUploadBtn" type="button" class="picUploadBtn2" data-idx="${idx}" >上传</button>
                      </td>`)
                        } else {
                            tds.push(`<td><img width="40" height="40" src="${item.imgUrl}"/></td>`)
                        }
                        if (isEdit) {
                            tds.push(`<td><input type="text" name="multiple" data-idx="${idx}" value="${item.multiple}"></td>`)
                        } else {
                            tds.push(`<td>${item.multiple}</td>`)
                        }
                        let row = `<tr>${tds.join()}</tr>`;
                        groupTableDom.append(row);
                    })
                    groupTableDom.append("</tbody>")

                    // 注册输入框变更事件
                    $(`${wrapperClassName} .prize-group-table input[type=text]`).bind('change', inputChanged);
                    // 注册删除事件
                    $(`${wrapperClassName} .prize-group-table .js-remove-item`).bind("click", removePirzeItem);
                    // 变更图片
                    $(`${wrapperClassName} .prize-group-table .picUploadBtn`).bind("click", changedImg);
                }


                let normalPrizeGroupCache;
                let statisticsDatas;
                let deployedStatisticsDatas;
                let editingNormalPrizeGroup;
                let currentPoolLineId;
                let maxLineId;
                let isNormalPrizeEditing = false;

                function renderPageWhenInit(groupData) {
                    const normalPrizeGroup = groupData.rows;
                    normalPrizeGroupCache = normalPrizeGroup;
                    editingNormalPrizeGroup = null;
                    isNormalPrizeEditing = false;
                    renderPrizeGroup(normalPrizeGroup, false)
                }

                function getPageInfo() {
                    $.get('/admin/luckySea/listItem', {
                    }, function (res) {
                        console.log(res);
                        const data = res;
                        renderPageWhenInit(data);
                    })
                }
                getPageInfo();

                function deepClone(o) {
                    // 判断如果不是引用类型，直接返回数据即可
                    if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {
                        return o
                    } else if (Array.isArray(o)) { // 如果是数组，则定义一个新数组，完成复制后返回
                        // 注意，这里判断数组不能用typeof，因为typeof Array 返回的是object
                        console.log(typeof [])  // --> object
                        var _arr = []
                        o.forEach(item => { _arr.push(deepClone(item)) })
                        return _arr
                    } else if (typeof o === 'object') {
                        var _o = {}
                        for (let key in o) {
                            _o[key] = deepClone(o[key])
                        }
                        return _o
                    }
                }

                $('.js-edit-group').on('click', function () {
                    // 进入编辑状态,则使用深度拷贝复制2组数据
                    if (!editingNormalPrizeGroup) {
                        editingNormalPrizeGroup = deepClone(normalPrizeGroupCache);
                    }
                    isNormalPrizeEditing = true;
                    renderPrizeGroup(editingNormalPrizeGroup, true)
                });

                function reRenderPage (groupData) {
                    console.debug("reRenderPage groupData", groupData)
                    const normalPrizeGroup = groupData.normalPrizeGroup;
                    renderPrizeGroup(normalPrizeGroup, isNormalPrizeEditing)
                }

                $('.js-cancel-edit').on('click', function () {
                    console.log("js-cancel-edit ", normalPrizeGroupCache);
                    editingNormalPrizeGroup = null;
                    isNormalPrizeEditing = false;
                    reRenderPage({
                        normalPrizeGroup: normalPrizeGroupCache,
                    });
                });

                // 保存编辑
                $('.js-save-edit').on('click', function () {
                    isNormalPrizeEditing = false;
                    const prizeItems = editingNormalPrizeGroup;
                    console.log("js-save-edit prizeGroup", editingNormalPrizeGroup);
                    prizeItems.forEach((item, idx) => {
                        if (item.id === '-') {
                            item.id = null;
                        }
                    });
                    $.ajax({
                        type: "post",
                        url: "/admin/luckySea/saveLuckySeaActItems",
                        data: JSON.stringify({
                            items: editingNormalPrizeGroup,
                        }),
                        dataType: "json",
                        contentType: 'application/json',
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                getPageInfo();
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                                isNormalPrizeEditing = true;
                            }
                        }
                    });
                });


                function clearModal() {
                    $('#addForm').find('input[type=text],input[type=hidden],input[type=file],img,span').each(function () {
                        $(this).val('');
                        $(this).html('');
                        $(this).attr("src", '');
                    });
                    $('#editForm').find('input[type=text],select,input[type=hidden]').each(function () {
                        $(this).val('');
                    });
                }
                // 添加按钮事件
                $('.js-add-prize').on('click', function () {
                    clearModal();
                    $('#addModal').modal('show');
                });


                // 保存按钮事件
                $('#addSave').on('click', function () {
                    console.log(' before editingNormalPrizeGroup', editingNormalPrizeGroup)
                    const newItem = {
                        id: '-',
                        name: $('#modal_name').val(),
                        imgUrl: $('#picUrl').val(),
                        multiple: $('#module_multiple').val()
                    }
                    // 按平台价值递增排序
                    let insertIdx = editingNormalPrizeGroup.length;
                    for (let i = 0; i < editingNormalPrizeGroup.length; i++) {
                        const exsistsPrize = editingNormalPrizeGroup[i];
                        if (newItem.multiple < exsistsPrize.multiple) {
                            insertIdx = i;
                            break;
                        }
                    }
                    isNormalPrizeEditing = true;
                    editingNormalPrizeGroup.splice(insertIdx, 0, newItem);
                    console.log('after editingNormalPrizeGroup', editingNormalPrizeGroup)
                    reRenderPage({
                        normalPrizeGroup: editingNormalPrizeGroup,
                    });

                    $('#addModal').modal('hide');
                });

                $('#addCancel').on('click', function () {
                    $('#addModal').modal('hide');
                });

                // 上传图片
                $('#picUploadBtn').on('click', function () {
                    $.ajaxFileUpload({
                        fileElementId: 'picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/luckySea/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#picUrl').val(json.path);
                                $('#picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#picImgInfo").html('已上传成功');
                                } else {
                                    $("#picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);

                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })

                function changedImg(e) {
                    console.log('发生点啥')
                    const idx = $(e.target).attr("data-idx");
                    $.ajaxFileUpload({
                        fileElementId: `picUploadFile2${idx}`,    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/luckySea/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                console.log(json.path);
                                // 需要重新渲染table
                                changeDateValue('imgUrl', idx, json.path);
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                }

                // 发布
                $('.js-deploy').on('click', function () {
                    if (isSeniorPrizeEditing || isNormalPrizeEditing) {
                        $('#tipMsg').text('当前有礼物组未报错,请先保存礼物组后再尝试发布');
                        $('#tipModal').modal('show');
                        return;
                    }
                    if (!normalPrizeGroupCache.isUndeploy && !seniorPrizeGroupCache.isUndeploy) {
                        $('#tipMsg').text('没有待发布的修改');
                        $('#tipModal').modal('show');
                        return;
                    }
                    console.debug('js-deploy data', normalPrizeGroupCache, seniorPrizeGroupCache)
                    if ((normalPrizeGroupCache.prizeItems.length <= 0) ||
                        (seniorPrizeGroupCache.prizeItems.length <= 0)) {
                        $('#tipMsg').text('所有的礼物组都必须至少添加一个奖品');
                        $('#tipModal').modal('show');
                        return;
                    }

                    $('#deployedPrizeRate').text(deployedStatisticsDatas.prizeRate.toFixed(4));
                    $('#currPrizeRate').text(statisticsDatas.prizeRate.toFixed(4));
                    $('#currPoolLineId').text(currentPoolLineId);
                    $('#activePoolLineId').text(maxLineId + 1);

                    $('#deployConfirmModal').modal('show');
                })
                $('#deployCancel').on('click', function () {
                    $('#deployConfirmModal').modal('hide');
                })

                $('#deployConfirm').on('click', function () {
                    $.ajax({
                        type: "post",
                        url: "/admin/linearlyPool/deploy",
                        dataType: "json",
                        contentType: 'application/json',
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("发布成功.当前奖池线: " + json.data.currentPoolLineId + ". 生效奖池线: " + json.data.willActiveLineId);
                                $("#tipModal").modal('show');
                                getPageInfo();
                            } else {
                                $("#tipMsg").text(json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                    $('#deployConfirmModal').modal('hide');
                })
            })
        }
    },

};
</script>

<style scoped>
.dataCount>p {
    padding: 5px;
    border-radius: 5px;
    margin-right: 20px;
}

.group-table-section {
    display: flex;
    width: 100%;
}

.group-table-section .prize-group-wrapper {
    width: 50%;
}

.prize-group-wrapper .header-wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 512px;
}

.prize-group-wrapper .header-wrapper .title {
    font-size: 20px;
}

.prize-group-wrapper .header-wrapper .right-content {
    display: flex;
    justify-content: flex-start;
}

.prize-group-wrapper .header-wrapper .right-content.right-content-edit {
    display: none;
}

.prize-group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
    margin-right: 10px;
}

.prize-group-wrapper .header-wrapper .right-content .undeploy {
    color: red;
    margin-right: 10px;
}

.prize-group-wrapper .data-wrapper {
    display: flex;
    margin-top: 12px;
}

.prize-group-wrapper .data-wrapper div {
    margin-right: 20px;
}

.prize-group-wrapper .prize-group-table {
    margin-top: 12px;
    margin-right: 10px;
    max-width: 1024px;

}

.prize-group-wrapper .prize-group-table .glyphicon-remove {
    color: red;
    cursor: pointer;

}

#deployConfirmModal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;

}

#deployConfirmModal .modal-body #currPrizeRate {
    color: red;

}

#deployConfirmModal .modal-body div:first-child {
    margin-bottom: 10px;
}

#deployConfirmModal .modal-body div:last-child {
    margin-top: 10px;
}</style>