<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('财务导出')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    .export-card-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .export-card-col {
        width: 33.33%;
        padding: 0 10px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    @media (max-width: 1200px) {
        .export-card-col {
            width: 50%;
        }
    }

    @media (max-width: 768px) {
        .export-card-col {
            width: 100%;
        }
    }

    .export-card {
        background: #fff;
        border: 1px solid #e7eaec;
        border-radius: 6px;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: box-shadow .2s;
    }

    .export-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .export-card-header {
        padding: 18px 20px 14px;
        border-bottom: 1px solid #f0f0f0;
        text-align: center;
    }

    .export-card-icon {
        width: 48px;
        height: 48px;
        line-height: 48px;
        border-radius: 10px;
        margin: 0 auto 10px;
        font-size: 22px;
        color: #fff;
    }

    .export-card-icon.show {
        background: linear-gradient(135deg, #1ab394, #18a689);
    }

    .export-card-icon.commodity {
        background: linear-gradient(135deg, #f8ac59, #f59e42);
    }

    .export-card-icon.member {
        background: linear-gradient(135deg, #1c84c6, #1a7bb9);
    }

    .export-card-header h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .export-card-body {
        padding: 20px;
        flex: 1;
    }

    .export-card-body .form-group {
        margin-bottom: 14px;
    }

    .export-card-body .form-group label {
        display: block;
        margin-bottom: 6px;
        color: #666;
        font-weight: normal;
    }

    .export-card-body .form-control {
        width: 100%;
    }

    .time-range-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .time-range-row .form-control {
        flex: 1;
        min-width: 0;
    }

    .time-range-row .time-separator {
        color: #999;
        flex-shrink: 0;
    }

    .export-card-footer {
        padding: 0 20px 20px;
        text-align: center;
    }

    .export-card-footer .btn {
        min-width: 120px;
    }

    .show-filter-options label {
        font-weight: normal;
        margin-right: 14px;
        cursor: pointer;
    }

    .show-filter-options input {
        margin-right: 4px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="export-card-grid">
        <div class="export-card-col">
            <div class="export-card">
                <div class="export-card-header">
                    <div class="export-card-icon show"><i class="fa fa-ticket"></i></div>
                    <h4>演出订单</h4>
                </div>
                <div class="export-card-body">
                    <div class="form-group">
                        <label>导出方式</label>
                        <div class="show-filter-options">
                            <label><input type="radio" name="showExportMode" value="order" checked> 按下单时间</label>
                            <label><input type="radio" name="showExportMode" value="show"> 按演出开始时间</label>
                            <label><input type="radio" name="showExportMode" value="id"> 按演出id</label>
                        </div>
                    </div>
                    <div class="form-group" id="showIdGroup" style="display: none;">
                        <label>演出id</label>
                        <input id="showPerformanceId" type="text" class="form-control" placeholder="按演出id导出时填写"/>
                    </div>
                    <div class="form-group" id="showTimeGroup">
                        <label id="showTimeLabel">下单时间</label>
                        <div class="time-range-row">
                            <input type="text" class="form-control show-time-start" placeholder="选日期，默认 00:00:00"/>
                            <span class="time-separator">-</span>
                            <input type="text" class="form-control show-time-end" placeholder="选日期，默认 23:59:59"/>
                        </div>
                    </div>
                </div>
                <div class="export-card-footer">
                    <a class="btn btn-primary btn-rounded" onclick="exportShowOrder()">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
            </div>
        </div>

        <div class="export-card-col">
            <div class="export-card">
                <div class="export-card-header">
                    <div class="export-card-icon commodity"><i class="fa fa-shopping-bag"></i></div>
                    <h4>商品订单</h4>
                </div>
                <div class="export-card-body">
                    <div class="form-group">
                        <label>店铺</label>
                        <select id="commodityStoreSelect" class="form-control">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>下单时间</label>
                        <div class="time-range-row">
                            <input type="text" class="form-control commodity-order-start" placeholder="选日期，默认 00:00:00"/>
                            <span class="time-separator">-</span>
                            <input type="text" class="form-control commodity-order-end" placeholder="选日期，默认 23:59:59"/>
                        </div>
                    </div>
                </div>
                <div class="export-card-footer">
                    <a class="btn btn-warning btn-rounded" onclick="exportCommodityOrder()">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
            </div>
        </div>

        <div class="export-card-col">
            <div class="export-card">
                <div class="export-card-header">
                    <div class="export-card-icon member"><i class="fa fa-user"></i></div>
                    <h4>会员订单</h4>
                </div>
                <div class="export-card-body">
                    <div class="form-group">
                        <label>下单时间</label>
                        <div class="time-range-row">
                            <input type="text" class="form-control member-order-start" placeholder="选日期，默认 00:00:00"/>
                            <span class="time-separator">-</span>
                            <input type="text" class="form-control member-order-end" placeholder="选日期，默认 23:59:59"/>
                        </div>
                    </div>
                </div>
                <div class="export-card-footer">
                    <a class="btn btn-info btn-rounded" onclick="exportMemberOrder()">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>

<script th:inline="javascript">
    var prefix = ctx + "tools/export";

    function formatDatePart(date) {
        var pad = function (n) {
            return n < 10 ? '0' + n : '' + n;
        };
        return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
    }

    function initStartDatetimePicker(selector) {
        $(selector).each(function () {
            var $el = $(this);
            $el.datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                todayBtn: true,
                forceParse: false
            }).on('changeDate', function (e) {
                if (!e.date) {
                    return;
                }
                $el.val(formatDatePart(e.date) + ' 00:00:00');
            });
        });
    }

    function initEndDatetimePicker(selector) {
        $(selector).each(function () {
            var $el = $(this);
            $el.datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                todayBtn: true,
                forceParse: false
            }).on('changeDate', function (e) {
                if (!e.date) {
                    return;
                }
                $el.val(formatDatePart(e.date) + ' 23:59:59');
            });
        });
    }

    function doExport(url, param, modalName) {
        var options = {
            modalName: modalName,
            exportUrl: url
        };
        $.table.init(options);
        $.table.exportExcel("", param);
    }

    function toggleShowExportFields() {
        var mode = $('input[name="showExportMode"]:checked').val();
        if (mode === 'id') {
            $('#showIdGroup').show();
            $('#showTimeGroup').hide();
            $('.show-time-start, .show-time-end').val('');
        } else {
            $('#showIdGroup').hide();
            $('#showPerformanceId').val('');
            $('#showTimeGroup').show();
            $('#showTimeLabel').text(mode === 'show' ? '演出开始时间' : '下单时间');
        }
    }

    function exportShowOrder() {
        var mode = $('input[name="showExportMode"]:checked').val();
        var showId = $("#showPerformanceId").val();
        var beginTime = $(".show-time-start").val();
        var endTime = $(".show-time-end").val();
        var exportType;

        if (mode === 'order') {
            exportType = 1;
        } else if (mode === 'show') {
            exportType = 2;
        } else {
            exportType = 3;
        }

        if (exportType === 3) {
            if (!showId) {
                $.modal.alertWarning("演出id不能为空");
                return;
            }
        } else {
            if (!beginTime || !endTime) {
                $.modal.alertWarning("请填写完整的开始和结束时间");
                return;
            }
        }

        doExport(prefix + "/export/orderInfo", {
            "exportType": exportType,
            "showId": showId,
            "beginTime": beginTime,
            "endTime": endTime
        }, "演出订单");
    }

    function initStoreSelect() {
        $.get(prefix + '/store/list', function (json) {
            var list = (json && json.code == 0 && json.data) ? json.data : [];
            var $select = $('#commodityStoreSelect');
            $.each(list, function (i, item) {
                if (item.storeId && item.storeName) {
                    $select.append($('<option></option>').attr('value', item.storeId).text(item.storeName));
                }
            });
        });
    }

    function exportCommodityOrder() {
        var storeId = $("#commodityStoreSelect").val() || "";
        var beginTime = $(".commodity-order-start").val();
        var endTime = $(".commodity-order-end").val();

        if (!storeId && (!beginTime || !endTime)) {
            $.modal.alertWarning("请至少填写店铺或下单时间其中一个条件");
            return;
        }
        if ((beginTime && !endTime) || (!beginTime && endTime)) {
            $.modal.alertWarning("下单时间请填写完整的开始和结束时间");
            return;
        }

        doExport(prefix + "/export/commodityOrder", {
            "beginTime": beginTime,
            "endTime": endTime,
            "storeId": storeId
        }, "商品订单");
    }

    function exportMemberOrder() {
        var beginTime = $(".member-order-start").val();
        var endTime = $(".member-order-end").val();

        if (!beginTime || !endTime) {
            $.modal.alertWarning("请填写完整的下单时间范围");
            return;
        }

        doExport(prefix + "/export/memberOrder", {
            "beginTime": beginTime,
            "endTime": endTime
        }, "会员订单");
    }

    $(function () {
        initStartDatetimePicker('.show-time-start, .commodity-order-start, .member-order-start');
        initEndDatetimePicker('.show-time-end, .commodity-order-end, .member-order-end');
        $('input[name="showExportMode"]').on('change', toggleShowExportFields);
        toggleShowExportFields();
        initStoreSelect();
    });
</script>
</body>
</html>
