(function () {
    // >>> step1. 定义控件唯一标识（命名空间）
    var scopeName = "field_6903530450190094319";

    // >>> step2. 实现自定义控件渲染及交互逻辑
    var MyWidgetImpl = function (options) {
        this.customWidgetType = scopeName;
        this._create(options);
    };
    MyWidgetImpl.prototype = {
        constructor: MyWidgetImpl,
        _create: function (options) {
            this._options = options;
            this._widgetId = options.privateId;
            this._widgetProxy = options.adaptation;
            this._wrapper = document.getElementById(this._widgetId);
            this._field = this._widgetProxy.childrenGetData(this._widgetId);
            this._tunnelId = 'Event' + this._widgetId;
            if (!this._wrapper) return console.warn('没有找到组件渲染的容器');
            this.clicked = 0;
            this._update();
            console.log(this._widgetProxy);
        },
        _update: function (field) {
            if (field) this._field = field;
            this._destroy();
            this._buildRendering();
            this._postCreate();
        },
        _buildRendering: function () {
            var elemId = 'section-' + this._widgetId;
            var btnId = 'section-' + this._widgetId + '-btn';
            var tpl = '<section id="section-' + elemId + '">' +
                '<button id="' + btnId + '" style="display:block;border:1px solid blue;border-radius:5px;margin:8px 16px;padding:5px;line-height:24px;;text-align:center">' + this._field.display +
                'clicked ' + this.clicked + '次</button>' +
                '</section>';
            this._wrapper.innerHTML = tpl;
            this._el = this._wrapper.querySelector('#' + elemId);
            this._btnEl = this._wrapper.querySelector('#' + btnId);
        },
        _postCreate: function () {
            this._unbindTap = this._bind(this._btnEl, 'tap', this.onClick.bind(this));
            this._unbindUpdate = this._listen(this._tunnelId, this._update.bind(this));
        },
        _destroy: function () {
            this._unbindTap && this._unbindTap();
            this._unbindUpdate && this._unbindUpdate();
            this._el = this._btnEl = null;
        },
        _bind: function (el, evt, cb) {
            el.addEventListener(evt, cb, false);
            return function () {
                el.removeEventListener(evt, cb, false);
            }
        },
        _listen: function(evt, cb) {
            var hub = this._widgetProxy.ObserverEvent;
            hub.listen(evt, cb);
            return function() {
                hub.remove(evt, cb);
            }
        },
        onClick: function () {
            this.clicked += 1;
            this._btnEl.innerHTML = this._field.display +
                'clicked ' + this.clicked + '次';
            alert('Hello CAP4!');
            this._update();
        }
    };

    // >>> step3. 实现开发规范约定的init及destroy接口
    var myWidgets = {};
    // 组件初始化
    MyWidgetImpl.init = function (options) {
        var widget = new MyWidgetImpl(options);
        myWidgets[ widget._widgetId ] = widget;
    };
    // 组件销毁
    MyWidgetImpl.destroy = function (widgetId) {
        var widget = myWidgets[ widgetId ];
        if (widget) widget._destroy();
        delete myWidgets[ widgetId ];
    };

    // >>> step4. 注册组件实现到命名控件
    window[ scopeName ] = MyWidgetImpl;
})();