fastadmin_tailored/public/assets/js/backend/commission/goods.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        // 模板对象
        templates: {
            // 模板渲染工具方法
            render: function(template, data) {
                var result = template;
                Object.keys(data).forEach(function(key) {
                    var regex = new RegExp('{{' + key + '}}', 'g');
                    result = result.replace(regex, data[key] || '');
                });
                return result;
            },
            
            // 文本截断工具
            truncateText: function(text, maxLength) {
                if (!text || text.length <= maxLength) {
                    return text;
                }
                return text.substring(0, maxLength) + '...';
            },
            
            // 安全转义HTML
            escapeHtml: function(text) {
                if (typeof Fast !== 'undefined' && Fast.api && Fast.api.escape) {
                    return Fast.api.escape(text);
                }
                return $('<div>').text(text).html();
            },
            
            // 商品信息模板
            goodsInfo: function(row) {
                var template = '<div class="goods-info-container" style="display: flex; align-items: center; padding: 8px 0;">' +
                    '<!-- 商品图片 -->' +
                    '<div class="goods-image" style="margin-right: 15px; flex-shrink: 0;">' +
                        '<img src="{{imageUrl}}" ' +
                             'style="width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #e1e5e9; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" ' +
                             'onerror="this.src=\'/assets/img/goods-default.png\'" />' +
                    '</div>' +
                    
                    '<!-- 商品信息 -->' +
                    '<div class="goods-content" style="flex: 1; min-width: 0; line-height: 1.4;">' +
                        '<!-- 商品标题 -->' +
                        '<div class="goods-title" style="font-weight: 600; color: #495057; margin-bottom: 6px; font-size: 14px;">' +
                            '<a href="javascript:;" style="color: #495057; text-decoration: none; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">' +
                                '{{title}}' +
                            '</a>' +
                            '{{specBadge}}' +
                        '</div>' +
                        
                        '<!-- 商品描述 -->' +
                        '{{subtitle}}' +
                        
                        '<!-- 商品元信息 -->' +
                        '<div class="goods-meta" style="color: #6c757d; font-size: 11px; margin-top: 6px;">' +
                            '<span class="goods-id">ID: {{id}}</span>' +
                            '{{typeInfo}}' +
                        '</div>' +
                    '</div>' +
                '</div>';
                
                // 数据填充
                var data = {
                    imageUrl: row.image || '/assets/img/goods-default.png',
                    title: Controller.templates.truncateText(Controller.templates.escapeHtml(row.title || '未命名商品'), 50),
                    id: row.id || '-',
                    subtitle: row.subtitle ? 
                        '<div class="goods-subtitle" style="color: #6c757d; font-size: 12px; margin-bottom: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;" title="' + 
                        Controller.templates.escapeHtml(row.subtitle) + '">' + 
                        Controller.templates.truncateText(Controller.templates.escapeHtml(row.subtitle), 60) + 
                        '</div>' : '',
                    specBadge: (row.spec_type == 1 || (row.spec_type_text && row.spec_type_text === '多规格')) ? 
                        ' <span class="goods-spec-badge">多规格</span>' : '',
                    typeInfo: row.status_text ? 
                        ' | <span class="goods-status">' + Controller.templates.escapeHtml(row.status_text) + '</span>' : ''
                };
                
                return Controller.templates.render(template, data);
            },
            
            // 分销规则状态模板
            commissionStatus: function(row) {
                if (!row.commission_goods) {
                    return '<span class="label label-danger">不参与</span>';
                }
                
                var participateStatus = row.commission_goods.status;
                if (participateStatus == 0) {
                    return '<span class="label label-danger">不参与</span>';
                }
                
                var ruleTypeList = Config.commission_goods_rule_type_list || {
                    '0': '默认规则',
                    '1': '独立规则', 
                    '2': '批量规则'
                };
                var colorMap = {
                    '0': 'info',
                    '1': 'success',
                    '2': 'warning'
                };
                
                var value = row.commission_goods.rule_type;
                var text = ruleTypeList[value] || '默认规则';
                var color = colorMap[value] || 'info';
                
                return '<span class="label label-' + color + '">' + text + '</span>';
            },
            
            // 商品状态模板
            goodsStatus: function(row) {
                var statusMap = {
                    '0': {text: '仓库中', color: 'default'},
                    '1': {text: '上架中', color: 'success'},
                    '2': {text: '已售罄', color: 'warning'},
                    '3': {text: '已下架', color: 'danger'}
                };
                
                var status = statusMap[row.status] || {text: '未知', color: 'default'};
                return '<span class="label label-' + status.color + '">' + status.text + '</span>';
            }
        },
        
        index: function () {
            // 添加自定义样式
            Controller.addCustomStyles();
            
            // 初始化表格参数
            Table.api.init({
                extend: {
                    index_url: 'commission/goods/index' + location.search,
                    add_url: '',
                    commission_url: 'commission/goods/commission',
                    del_url: '',
                    multi_url: '',
                    import_url: '',
                    table: 'shop_goods',
                    dragsort_url: ''
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                sortable: true,
                sort: 'desc',
                columns: [
                    [
                        {field: 'id', title: __('ID'), width: 80},
                        {field: 'title', title: __('商品信息'), operate: 'LIKE', width: 400, formatter: function(value, row, index) {
                            return Controller.templates.goodsInfo(row);
                        }},
                        {field: 'price', title: __('价格'), operate: 'BETWEEN', width: 100},
                        {field: 'commission_goods.rule_type', title: __('分销规则'), width: 120, formatter: function(value, row, index) {
                            return Controller.templates.commissionStatus(row);
                        }},
                        {field: 'status', title: __('商品状态'), width: 100, formatter: function(value, row, index) {
                            return Controller.templates.goodsStatus(row);
                        }},
                        {field: 'operate', title: __('操作'), table: table, events: Table.api.events.operate, width: 150,
                         buttons: [
                             {
                                 name: 'commission',
                                 text: __('设置佣金'),
                                 title: __('设置佣金'),
                                 classname: 'btn btn-xs btn-success btn-dialog',
                                 icon: 'fa fa-cog',
                                 url: 'commission/goods/commission',
                                 callback: function(data) {
                                     // 弹窗回传回调，刷新表格
                                     table.bootstrapTable('refresh');
                                 }
                             }
                         ], 
                         formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        
        // 添加自定义样式
        addCustomStyles: function() {
            var styles = `
                <style>
                /* 商品信息容器样式优化 */
                .goods-info-container:hover {
                    background-color: #f8f9fa;
                    border-radius: 6px;
                    transition: background-color 0.2s ease;
                }
                
                .goods-image img {
                    transition: transform 0.2s ease;
                }
                
                .goods-info-container:hover .goods-image img {
                    transform: scale(1.05);
                }
                
                .goods-title a:hover {
                    color: #18bc9c !important;
                    transition: color 0.2s ease;
                }
                
                /* 多规格标签样式 */
                .goods-spec-badge {
                    background: linear-gradient(135deg, #18bc9c, #16a085);
                    color: white;
                    font-size: 10px;
                    padding: 2px 8px;
                    border-radius: 12px;
                    margin-left: 8px;
                    font-weight: 500;
                    box-shadow: 0 1px 3px rgba(24, 188, 156, 0.3);
                }
                
                /* 表格行间距优化 */
                #table .bootstrap-table .fixed-table-body .table tbody tr td {
                    padding: 12px 8px;
                    vertical-align: middle;
                    border-bottom: 1px solid #e9ecef;
                }
                
                /* 操作按钮样式 */
                .btn-commission {
                    background: linear-gradient(135deg, #18bc9c, #16a085);
                    border: none;
                    color: white;
                    font-weight: 500;
                    transition: all 0.2s ease;
                }
                
                .btn-commission:hover {
                    background: linear-gradient(135deg, #1dd1a1, #18bc9c);
                    transform: translateY(-1px);
                    box-shadow: 0 2px 8px rgba(24, 188, 156, 0.3);
                }
                </style>
            `;
            
            // 添加样式到页面
            if (!$('#commission-goods-styles').length) {
                $('head').append(styles.replace('<style>', '<style id="commission-goods-styles">'));
            }
        },
        detail: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        commission: function () {
            // 佣金设置页面
            Controller.api.bindevent();
            
            // 佣金规则类型切换
            $(document).on('change', 'input[name="rule_type"]', function() {
                var ruleType = $(this).val();
                Controller.updateFormState(ruleType);
            });
            
            // 更新表单状态的方法
            Controller.updateFormState = function(ruleType) {
                if (ruleType == '0') { // 默认规则
                    // 只禁用高级配置项，保持"是否参与"和"分销商业绩"可编辑
                    $('input[name="level"], input[name="self_buy"], input[name="reward_type"], input[name="reward_event"]').prop('disabled', true);
                    // "是否参与"和"分销商业绩"保持可编辑
                    $('input[name="status"], input[name="order_status"]').prop('disabled', false);
                    
                    // 显示默认规则的佣金比例
                    $('.default-rule-value').show();
                    $('.custom-rule-input').hide();
                    $('.default-rule-help').show();
                    $('.custom-rule-help').hide();
                    
                    // 添加部分只读样式
                    $('.commission-form').addClass('readonly-mode');
                    
                } else if (ruleType == '1' || ruleType == '2') { // 独立规则或批量规则
                    // 启用所有配置项
                    $('input[name="status"], input[name="order_status"], input[name="level"], input[name="self_buy"], input[name="reward_type"], input[name="reward_event"]').prop('disabled', false);
                    
                    // 显示自定义规则的输入框
                    $('.default-rule-value').hide();
                    $('.custom-rule-input').show();
                    $('.default-rule-help').hide();
                    $('.custom-rule-help').show();
                    
                    // 移除只读样式
                    $('.commission-form').removeClass('readonly-mode');
                }
            };
            
            // 初始化规则显示状态
            var checkedRuleType = $('input[name="rule_type"]:checked').val() || '0';
            Controller.updateFormState(checkedRuleType);
            
            // 初始化已有数据
            if (typeof Config.commission_data !== 'undefined' && Config.commission_data) {
                var commissionData = Config.commission_data;
                
                // 设置规则类型
                if (commissionData.rule_type !== undefined) {
                    $('input[name="rule_type"][value="' + commissionData.rule_type + '"]').prop('checked', true);
                }
                
                // 设置基本配置
                if (commissionData.status !== undefined) {
                    $('input[name="status"][value="' + commissionData.status + '"]').prop('checked', true);
                }
                if (commissionData.order_status !== undefined) {
                    $('input[name="order_status"][value="' + commissionData.order_status + '"]').prop('checked', true);
                }
                
                // 从config中获取扩展配置
                var config = commissionData.config || {};
                if (config.self_buy !== undefined) {
                    $('input[name="self_buy"][value="' + config.self_buy + '"]').prop('checked', true);
                }
                if (config.level !== undefined) {
                    $('input[name="level"][value="' + config.level + '"]').prop('checked', true);
                }
                if (config.reward_type !== undefined) {
                    $('input[name="reward_type"][value="' + config.reward_type + '"]').prop('checked', true);
                }
                if (config.reward_event !== undefined) {
                    $('input[name="reward_event"][value="' + config.reward_event + '"]').prop('checked', true);
                }
                
                // 最后触发状态更新
                Controller.updateFormState($('input[name="rule_type"]:checked').val() || '0');
            } else {
                // 没有数据时，设置默认值
                $('input[name="rule_type"][value="0"]').prop('checked', true);
                $('input[name="status"][value="0"]').prop('checked', true);
                $('input[name="order_status"][value="1"]').prop('checked', true);
                $('input[name="level"][value="3"]').prop('checked', true);
                $('input[name="self_buy"][value="1"]').prop('checked', true);
                $('input[name="reward_type"][value="pay_price"]').prop('checked', true);
                $('input[name="reward_event"][value="paid"]').prop('checked', true);
                
                // 触发状态更新
                Controller.updateFormState('0');
            }
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"), function(data, ret) {
                    // 表单提交成功回调
                    Fast.api.close(ret);
                });
                
                // 绑定独立设置变化事件
                $(document).on('change', 'input[name="row[self_rules]"]', function() {
                    var value = $(this).val();
                    var commissionConfigContainer = $('.commission-config-container');
                    if (value == '1') {
                        commissionConfigContainer.show();
                    } else {
                        commissionConfigContainer.hide();
                    }
                });
            }
        }
    };
    return Controller;
});