<!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('待审核列表')"/>
    <style>
        #addClassify, #detailPro {
            display: none;
            width: 800px;
            padding-top: 20px;
        }
        
        #addClassify .selectClassify {
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        #addClassify .ibox-content {
            width: 100%;
            max-height: 600px;
            overflow: auto;
        }
        #addClassify .selectClassify label {
            display: flex;
            margin-right: 20px;
            align-items: center;
        }

        #addClassify .selectClassify label input {
            margin: 0;
            margin-right: 2px;
        }

        #detailPro .detail_inner {
            margin-bottom: 20px;
        }

        #detailPro .detail_title {
            margin-top: 50px;
            font-weight: bold;
            font-size: 16px;
        }

        .form-group span {
            padding-right: 20px;
        }

        .bottomBtn {
            text-align: left;
            padding: 10px 15px 12px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <!--        <div class="col-sm-12 search-collapse">-->
        <!--            <form id="formId">-->
        <!--                <div class="select-list">-->
        <!--                    <ul>-->
        <!--                        <li>-->
        <!--                            <label>手机号：</label>-->
        <!--                            <input type="text" name="activityTitle"/>-->
        <!--                        </li>-->
        <!--                        <li>-->
        <!--                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i-->
        <!--                                    class="fa fa-search"></i>&nbsp;搜索</a>-->
        <!--&lt;!&ndash;                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i&ndash;&gt;-->
        <!--&lt;!&ndash;                                    class="fa fa-refresh"></i>&nbsp;重置</a>&ndash;&gt;-->
        <!--                        </li>-->
        <!--                    </ul>-->
        <!--                </div>-->
        <!--            </form>-->
        <!--        </div>-->
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>

        <div id="addClassify">
            <div class="selectClassify">
                <div class="ibox-content">
                    <div class="form-group"></div>
                </div>
            </div>
            <input type="hidden" class="editCon">
            <div class="bottomBtn">
                <a href="javascript:;" class="layui-layer-btn0" onclick="yes(1)">保存</a>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var detailFlag = [[${@permission.hasPermi('smile:userPendingList:detail')}]];
    var smilePrefix = ctx + "smile/show";

    //     // createUrl: prefix + "/add",
    //     // updateUrl: prefix + "/edit/{id}",
    //     // removeUrl: prefix + "/remove",
    //     // exportUrl: prefix + "/export",
    //     // modalName: "订单",
    var subOArr = [];
    $(function () {
        var options = {
            modalName: "销售数据",
            url: smilePrefix + "/list",
            detailUrl: smilePrefix + "/base/saleData/{id}",
            columns: [{
                checkbox: true
            },
                {
                    field: 'performancesId',
                    title: '演出id'
                },
                {
                    field: 'title',
                    title: '演出名称'
                },
                {
                    field: 'cityName',
                    title: '城市'
                },
                {
                    field: 'open',
                    title: '总销售数量'
                },
                {
                    field: 'totalSalePrice',
                    title: '总销售金额'
                },
                {
                    field: 'totalOutAgent',
                    title: '总售出代理'
                },
                {
                    field: 'statusName',
                    title: '演出状态'
                },
                {
                    field: 'status',
                    title: '打款状态',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '已打款';
                        } else {
                            return '未打款';
                        }
                    }
                },
                {
                    field: 'comment',
                    title: '序列',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="topBtn(\'' + row.performancesId + '\')"><i class="fa fa-edit"></i>置顶</a> ');
                        return actions.join('');
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="toPop(\'' + row.performancesId + '\')"><i class="fa fa-edit"></i>设置票提</a> ');
                        // actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="editPop(\'' + row.performancesId + '\')"><i class="fa fa-edit"></i>编辑票提</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="toDetail(\'' + row.performancesId + '\')"><i class="fa fa-edit"></i>查看</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.performancesId + '\')"><i class="fa fa-edit"></i>销售数据</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function topBtn(id) {
        let postData = {
            performancesId: id,
            sort: '9'
        }
        $.ajax({
            type: 'post',
            url: ctx + 'smile/show/sort',
            headers: {"Content-Type": "application/json;charset=UTF-8"},
            data: JSON.stringify(postData),
            success: function (e) {
                // alert(e.msg)
                location.reload();
            }
        });
    }

    /* 跳转详情 */
    function toDetail(id) {
        window.localStorage.setItem('performancesId', id);
        var url = '/local/smileTicketsDetail';
        $.modal.openTab("演出详情", url);
    }

    function yes() {
        let postData = [];
        for (var i in subOArr) {
            postData.push({
                delTag: subOArr[i].delTag,
                id: subOArr[i].id,
                ordCarry: Math.round($('.ticketsti' + i).find('.normal').val() * 100) / 100,
                performanceId: subOArr[i].performanceId,
                ticketId: subOArr[i].ticketId,
                totalCarry: Math.round($('.ticketsti' + i).find('.total').val() * 100) / 100,
            });
        }
        $.ajax({
            type: 'post',
            url: ctx + 'smile/agent/create',
            headers: {"Content-Type": "application/json;charset=UTF-8"},
            data: JSON.stringify(postData),
            success: function (e) {
                if (e.code === 301) {
                    $.modal.msgWarning(e.msg);
                } else {
                    $(".layui-layer-close1").click();
                }
            }
        });
    }

    function editPop(id) {
        $('#addClassify .form-group').html('');
        layer.open({
            type: 1,
            shade: .3,
            title: '设置票提', //不显示标题
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                let postData = {
                    performancesId: id
                }
                $.ajax({
                    type: 'post',
                    url: ctx + 'smile/agent/list?performancesId=' + id,
                    headers: {"Content-Type": "application/json;charset=UTF-8"},
                    success: function (e) {
                        subOArr = e.data;
                        subOArr.forEach(item =>{
                            $('#addClassify .form-group').append(
                                '<div class="ticketsti' + item + '">' +
                                '<p>' + item.ticketName + '</p>' +
                                '<p>票提设置</p>' +
                                '<span>总代<input type="text" class="total" value="' + Number(item.totalCarry) * 100 + '">%</span>' +
                                '<span>普代<input type="text" class="normal" value="' + Number(item.ordCarry) * 100 + '">%</span>' +
                                '</div>'
                            )
                        })
                    }
                });
            },
            cancel: function (res) {
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

    function toPop(id) {
        $('#addClassify .form-group').html('');
        layer.open({
            type: 1,
            shade: .3,
            title: '设置票提', //不显示标题
            content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            success: function () {
                let postData = {
                    performancesId: id
                }
                $.ajax({
                    type: 'post',
                    url: ctx + 'smile/agent/list?performancesId=' + id,
                    headers: {"Content-Type": "application/json;charset=UTF-8"},
                    success: function (e) {
                        subOArr = e.data || [];
                        subOArr.forEach((item, index) =>{
                            $('#addClassify .form-group').append(
                                '<div class="ticketsti' + index + '">' +
                                '<p>' + item.ticketName + '</p>' +
                                '<p>票提设置</p>' +
                                '<span>总代<input type="text" class="total">%</span>' +
                                '<span>普代<input type="text" class="normal">%</span>' +
                                '</div>'
                            )
                        })
                    }
                });
            },
            cancel: function (res) {
                // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }

</script>
</body>
</html>