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

    var statKeys = [
        {value: '', text: '不绑定（只用固定值）'},
        {value: 'factory_count', text: '入驻厂家'},
        {value: 'print_today', text: '今日打印量'},
        {value: 'print_total', text: '累计套打张数'},
        {value: 'template_count', text: '可用模板'}
    ];

    function escapeAttr(value) {
        return String(value == null ? '' : value)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    function parseContent() {
        var raw = $.trim($('#home-block-content').text() || '{}');
        try {
            var data = JSON.parse(raw);
            return data && typeof data === 'object' ? data : {};
        } catch (e) {
            return {};
        }
    }

    function rowHtml(type, item, index) {
        item = item || {};
        if (type === 'stats') {
            var options = statKeys.map(function (opt) {
                var selected = String(item.key || '') === opt.value ? ' selected' : '';
                return '<option value="' + escapeAttr(opt.value) + '"' + selected + '>' + opt.text + '</option>';
            }).join('');
            return '<div class="item-row well well-sm">' +
                '<div class="row">' +
                '<div class="col-xs-4"><input class="form-control" name="row[content][items][' + index + '][label]" placeholder="名称" value="' + escapeAttr(item.label) + '"></div>' +
                '<div class="col-xs-4"><select class="form-control" name="row[content][items][' + index + '][key]">' + options + '</select></div>' +
                '<div class="col-xs-3"><input class="form-control" name="row[content][items][' + index + '][value]" placeholder="固定值可空" value="' + escapeAttr(item.value) + '"></div>' +
                '<div class="col-xs-1"><a href="javascript:;" class="btn btn-xs btn-danger btn-remove-item" title="删除"><i class="fa fa-times"></i></a></div>' +
                '</div></div>';
        }
        if (type === 'steps') {
            return '<div class="item-row well well-sm">' +
                '<div class="form-group" style="margin-bottom:8px;"><input class="form-control" name="row[content][items][' + index + '][title]" placeholder="步骤标题" value="' + escapeAttr(item.title) + '"></div>' +
                '<div class="form-group" style="margin-bottom:8px;"><textarea class="form-control" rows="2" name="row[content][items][' + index + '][desc]" placeholder="步骤说明">' + escapeAttr(item.desc) + '</textarea></div>' +
                '<a href="javascript:;" class="btn btn-xs btn-danger btn-remove-item">删除步骤</a>' +
                '</div>';
        }
        return '<div class="item-row well well-sm">' +
            '<div class="row" style="margin-bottom:8px;">' +
            '<div class="col-xs-3"><input class="form-control" name="row[content][items][' + index + '][tag]" placeholder="标签" value="' + escapeAttr(item.tag) + '"></div>' +
            '<div class="col-xs-5"><input class="form-control" name="row[content][items][' + index + '][title]" placeholder="标题" value="' + escapeAttr(item.title) + '"></div>' +
            '<div class="col-xs-4"><input class="form-control" name="row[content][items][' + index + '][path]" placeholder="跳转路径" value="' + escapeAttr(item.path) + '"></div>' +
            '</div>' +
            '<div class="form-group" style="margin-bottom:8px;"><textarea class="form-control" rows="2" name="row[content][items][' + index + '][desc]" placeholder="说明">' + escapeAttr(item.desc) + '</textarea></div>' +
            '<a href="javascript:;" class="btn btn-xs btn-danger btn-remove-item">删除卡片</a>' +
            '</div>';
    }

    function fillItems(type, items) {
        var $box = $('.item-rows[data-type="' + type + '"]');
        if (!$box.length) {
            return;
        }
        $box.empty();
        (items || []).forEach(function (item, index) {
            $box.append(rowHtml(type, item, index));
        });
    }

    function reindex($box) {
        $box.children('.item-row').each(function (index) {
            $(this).find('[name]').each(function () {
                this.name = this.name.replace(/items\]\[\d+\]/, 'items][' + index + ']');
            });
        });
    }

    function syncTypePanel() {
        var type = $('#c-type').val() || 'custom';
        $('.type-panel').each(function () {
            var match = $(this).data('type') === type;
            $(this).toggle(match);
            $(this).find(':input').prop('disabled', !match);
        });
    }

    var Controller = {
        index: function () {
            Table.api.init({
                extend: {
                    index_url: 'ps/home_block/index' + location.search,
                    add_url: 'ps/home_block/add',
                    edit_url: 'ps/home_block/edit',
                    del_url: 'ps/home_block/del',
                    multi_url: 'ps/home_block/multi',
                    table: 'ps_home_block',
                }
            });

            $('.btn-add, .btn-edit').data('area', ['880px', '92%']);
            var table = $("#table");
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                sortOrder: 'desc',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {
                            field: 'type',
                            title: __('Type'),
                            searchList: {
                                "hero": __('Hero'),
                                "stats": __('Stats'),
                                "steps": __('Steps'),
                                "features": __('Features'),
                                "cta": __('Cta'),
                                "custom": __('Custom')
                            },
                            formatter: Table.api.formatter.normal
                        },
                        {field: 'name', title: __('Name'), operate: 'LIKE'},
                        {field: 'title', title: __('Title'), operate: 'LIKE'},
                        {field: 'kicker', title: __('Kicker'), operate: 'LIKE'},
                        {field: 'weigh', title: __('Weigh'), operate: false},
                        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });
            Table.api.bindevent(table);
            table.data('area', ['880px', '92%']);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                var content = parseContent();
                var currentType = $('#c-type').val();
                if (currentType === 'stats' || currentType === 'steps' || currentType === 'features') {
                    var items = Array.isArray(content.items) && content.items.length ? content.items : [{}];
                    fillItems(currentType, items);
                }
                $(document).on('change', '#c-type', function () {
                    syncTypePanel();
                    var type = $(this).val();
                    var $box = $('.item-rows[data-type="' + type + '"]');
                    if ($box.length && !$box.children().length && (type === 'stats' || type === 'steps' || type === 'features')) {
                        fillItems(type, [{}]);
                    }
                });
                $(document).on('click', '.btn-add-item', function () {
                    var type = $(this).data('type');
                    var $box = $('.item-rows[data-type="' + type + '"]');
                    $box.append(rowHtml(type, {}, $box.children().length));
                });
                $(document).on('click', '.btn-remove-item', function () {
                    var $box = $(this).closest('.item-rows');
                    $(this).closest('.item-row').remove();
                    reindex($box);
                });
                syncTypePanel();
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});