<!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>
        /* 状态标签样式 (匹配图1) */
        .badge-status {
            display: inline-block;
            padding: 3px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
        }
        .badge-status-warning {
            background-color: #fef8e7;
            color: #d99b00;
        }
        .badge-status-success {
            background-color: #e6f7eb;
            color: #52c41a;
        }
        .badge-status-danger {
            background-color: #fff2f0;
            color: #ff4d4f;
        }
        .badge-status-gray {
            background-color: #f5f5f5;
            color: #8c8c8c;
        }

        /* 操作按钮样式 (匹配图1) */
        .action-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .btn-act {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 10px;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none !important;
            transition: all 0.2s;
        }
        .btn-act i {
            margin-right: 3px;
        }
        .btn-act-detail {
            background-color: #e6f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
        }
        .btn-act-detail:hover {
            background-color: #bae7ff;
            color: #096dd9;
        }
        .btn-act-approve {
            background-color: #e6f7eb;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .btn-act-approve:hover {
            background-color: #d9f7be;
            color: #389e0d;
        }
        .btn-act-reject {
            background-color: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }
        .btn-act-reject:hover {
            background-color: #ffedd5;
            color: #cf1322;
        }

        /* 弹框自定义样式 (匹配图2图3) */
        .custom-modal-body {
            padding: 20px 24px;
            background: #fff;
        }
        .modal-form-item {
            margin-bottom: 18px;
        }
        .modal-label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #262626;
            margin-bottom: 8px;
        }
        .required-star {
            color: #ff4d4f;
            margin-right: 4px;
        }
        .date-input-wrap {
            position: relative;
        }
        .date-input-wrap .modal-input {
            width: 100%;
            height: 38px;
            padding: 6px 36px 6px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            background-color: #fff;
            cursor: pointer;
            font-size: 14px;
        }
        .date-input-wrap .date-icon {
            position: absolute;
            right: 12px;
            top: 11px;
            color: #8c8c8c;
            pointer-events: none;
        }
        .modal-textarea {
            width: 100%;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 14px;
            resize: vertical;
        }
        .modal-textarea::placeholder, .modal-input::placeholder {
            color: #bfbfbf;
        }
        .modal-footer-btns {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
        }
        .btn-modal-cancel {
            background: #e6e6e6;
            color: #333;
            border: none;
            padding: 7px 22px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-modal-cancel:hover {
            background: #d9d9d9;
        }
        .btn-modal-approve {
            background: #1890ff;
            color: #fff;
            border: none;
            padding: 7px 22px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-modal-approve:hover {
            background: #40a9ff;
        }
        .btn-modal-reject {
            background: #ff4d4f;
            color: #fff;
            border: none;
            padding: 7px 22px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-modal-reject:hover {
            background: #ff7875;
        }
    </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>审核状态：<select name="status">
                            <option value="">全部</option>
                            <option value="0">待审核</option>
                            <option value="1">已通过</option>
                            <option value="2">已拒绝</option>
                            <option value="3">已撤销</option>
                        </select></li>
                        <li>艺人名称：<input type="text" name="artistName" placeholder="请输入艺人名称"/></li>
                        <li>店铺名称：<input type="text" name="storeName" placeholder="请输入店铺名称"/></li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>

    <!-- 驳回弹框 (图3) -->
    <div id="addClassify" style="display:none;" class="custom-modal-body">
        <div class="modal-form-item">
            <label class="modal-label"><span class="required-star">*</span> 驳回原因</label>
            <textarea id="reason" class="modal-textarea" rows="3" placeholder="请输入驳回原因"></textarea>
        </div>
        <div class="modal-footer-btns">
            <button type="button" class="btn-modal-cancel" onclick="closeModal()">取 消</button>
            <button type="button" class="btn-modal-reject" onclick="yes()">确认驳回</button>
        </div>
    </div>

    <!-- 通过弹框 (图2) -->
    <div id="approveModal" style="display:none;" class="custom-modal-body">
        <div class="modal-form-item">
            <label class="modal-label"><span class="required-star">*</span> 授权截止时间</label>
            <div class="date-input-wrap">
                <input type="text" id="expireAt" class="modal-input" placeholder="年 / 月 / 日  --:--" readonly>
                <i class="fa fa-calendar date-icon"></i>
            </div>
        </div>
        <div class="modal-form-item">
            <label class="modal-label">备注</label>
            <textarea id="remark" class="modal-textarea" rows="3" placeholder="请输入备注信息（选填）"></textarea>
        </div>
        <div class="modal-footer-btns">
            <button type="button" class="btn-modal-cancel" onclick="closeModal()">取 消</button>
            <button type="button" class="btn-modal-approve" onclick="approveYes()">确认通过</button>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "goblin/artist/auth";
    var currentApplyId = '';
    var infoFlg = [[${@permission.hasPermi('goblin:artist:auth:info')}]];

    function statusHtml(v) {
        if (v == 0) {
            return '<span class="badge-status badge-status-warning">待审核</span>';
        } else if (v == 1) {
            return '<span class="badge-status badge-status-success">已通过</span>';
        } else if (v == 2) {
            return '<span class="badge-status badge-status-danger">已驳回</span>';
        } else {
            return '<span class="badge-status badge-status-gray">已撤销</span>';
        }
    }
    function timeHtml(v) {
        if (!v) return '-';
        var s = String(v).replace('T', ' ');
        if (s.length > 19) { s = s.substring(0, 19); }
        return s;
    }

    $(function() {
        var options = {
            url: prefix + "/list",
            detailUrl: prefix + "/detailView/{id}",
            modalName: "授权申请",
            sortName: "createdAt",
            sortOrder: "desc",
            columns: [
                { field: 'applyId', title: '申请ID' },
                { field: 'storeName', title: '申请商家', formatter: function(v, row) { return v || row.storeId || '-'; }},
                { field: 'artistName', title: '关联艺人', formatter: function(v, row) { return v || row.artistId || '-'; }},
                { field: 'createdAt', title: '申请时间', formatter: function(v) { return timeHtml(v); }},
                { field: 'status', title: '审批状态', align: 'center', formatter: function(v) { return statusHtml(v); }},
                { field: 'reviewerName', title: '审批人', formatter: function(v) { return v || '-'; }},
                { field: 'reviewTime', title: '审批时间', formatter: function(v) { return timeHtml(v); }},
                { field: 'authExpireAt', title: '授权截止时间', formatter: function(v) { return timeHtml(v); }},
                { title: '操作', align: 'center', formatter: function(v, row) {
                    var html = '<div class="action-cell">';
                    html += '<a class="btn-act btn-act-detail ' + infoFlg + '" onclick="$.operate.detail(\'' + row.applyId + '\')"><i class="fa fa-eye"></i> 详情</a>';
                    if (row.status == 0) {
                        html += '<a class="btn-act btn-act-approve ' + infoFlg + '" onclick="auditApprove(\'' + row.applyId + '\')"><i class="fa fa-check"></i> 通过</a>';
                        html += '<a class="btn-act btn-act-reject ' + infoFlg + '" onclick="auditReject(\'' + row.applyId + '\')"><i class="fa fa-times"></i> 驳回</a>';
                    }
                    html += '</div>';
                    return html;
                }}
            ]
        };
        $.table.init(options);
    });

    function auditApprove(applyId) {
        currentApplyId = applyId;
        $("#expireAt").val('');
        $("#remark").val('');
        var initPicker = function() {
            var datePicker = (typeof layui !== 'undefined' && layui.laydate) ? layui.laydate : (typeof window.laydate !== 'undefined' ? window.laydate : null);
            if (datePicker) {
                datePicker.render({ elem: '#expireAt', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', min: 0, trigger: 'click' });
            }
        };
        if (typeof layui !== 'undefined') {
            layui.use('laydate', function() { initPicker(); });
        } else {
            initPicker();
        }
        layer.open({
            type: 1,
            title: '审批通过',
            area: ['480px', 'auto'],
            shade: 0.3,
            content: $('#approveModal')
        });
    }

    function approveYes() {
        var expireAt = $("#expireAt").val();
        if (!expireAt) { layer.msg('请选择授权截止时间'); return; }
        $.ajax({
            type: 'post',
            url: prefix + "/approve",
            data: { applyId: currentApplyId, expireAt: expireAt, remark: $("#remark").val() },
            success: function() {
                layer.closeAll();
                $.table.refresh();
            }
        });
    }

    function auditReject(applyId) {
        currentApplyId = applyId;
        $("#reason").val('');
        layer.open({
            type: 1,
            title: '审批驳回',
            area: ['480px', 'auto'],
            shade: 0.3,
            content: $('#addClassify')
        });
    }

    function yes() {
        var reason = $("#reason").val();
        if (!reason) { layer.msg('请填写驳回原因'); return; }
        $.ajax({
            type: 'post',
            url: prefix + "/reject",
            data: { applyId: currentApplyId, reason: reason },
            success: function() {
                layer.closeAll();
                $.table.refresh();
            }
        });
    }

    function closeModal() { layer.closeAll(); }
</script>
</body>
</html>
