!(function () {

    "use strict";

    // 鑾峰彇 json
    let json = null;
    function getJSON () {
        return new Promise(resolve => {
            if ( json ) {
                resolve( json );
            } else {
                $.getJSON( "/static/json/area.json" ).then(res => {
                    json = res;
                    resolve( res );
                })
            }
        })
    }

    // 鎵撳嵃閫夋嫨缁撴灉
    function log ( el, code, name, map ) {
        const _code = `[ ${ code.join( ", " ) } ]`;
        const _name = `[ ${ name.join( ", " ) } ]`;
        const content = `
            <p class="log-title">code:</p>
            <p>${ _code }</p>
            <p class="log-title">name:</p>
            <p>${ _name }</p>
            <p class="log-title">all:</p>
            <p><pre>${ JSON.stringify( map, null, 2 ) }</pre></p>
        `;
        $( el ).next().html( content.trim() );
    }

    // 瀹藉害
    const selectWidth = 131;
    const cascaderPanelWidth = "100%";

    // select 涓婚
    !(function selectTheme () {
        iPicker("#select-target-01", {
            theme: "select",
            data: {
                source: getJSON()
            },
            width: selectWidth,
            onSelect ( code, name, map ) {
                聽聽聽console.log(聽code聽);
                聽聽聽聽聽聽聽聽聽聽聽聽console.log(聽name聽);
                聽聽聽聽聽聽聽聽聽聽聽聽console.log(map);
            }
        });
       
    })();

    // cascader 涓婚
    !(function cascaderTheme () {
        iPicker("#cascader-target-01", {
            theme: "cascader",
            data: {
                source: getJSON()
            },
            width: cascaderPanelWidth,
            onSelect ( code, name, map ) {
                log( "#cascader-target-01", code, name, map );
            }
        });
        
    })();

    // panel 涓婚
    !(function panelTheme () {
        iPicker("#panel-target-01", {
            theme: "panel",
            data: {
                source: getJSON()
            },
            width: cascaderPanelWidth,
            onSelect ( code, name, map ) {
                log( "#panel-target-01", code, name, map );
            }
        });
        
    })();

    $( "#params-btn" ).click(function () {
        $( this ).find( "i" ).toggle();
        $( "#params" ).toggle().prev().toggle();
    })

    // 缁勪欢鏂规硶
    function clearLog () {
        $( "#method-cascader + .pre" ).empty(); 
    }
    const method = {
        create () {
            clearLog();
            const picker = iPicker("#method-cascader", {
                theme: "cascader",
                data: {
                    source: getJSON()
                },
                width: "100%",
                onSelect ( code, name, map ) {
                    log( "#method-cascader", code, name, map );
                }
            });
            return picker;
        },
        destroy () {
            clearLog();
            iPicker.destroy( IPicker );
        },
        get () {
            window.alert( iPicker.get( IPicker ) );
        },
        set () {
            iPicker.set( IPicker, [ "230000", "230100", "230103" ] );
        },
        disabled () {
            iPicker.disabled( IPicker );
        },
        enabled () {
            iPicker.enabled( IPicker );
        },
        clear () {
            clearLog();
            iPicker.clear( IPicker );
        },
        reset () {
            clearLog();
            return iPicker.reset( IPicker );
        }
    };
    let IPicker = method.create();
    $( ".main.method" ).on("click", "button", function () {
        const type = $( this ).data( "type" );
        if ( type === "create" || type === "reset" ) {
            IPicker = method[ type ]();
        } else {
            method[ type ]();
        }
    })

    const duration = 350;

    // 鍏抽棴寮圭獥 ( 鍏叡鏂规硶 )
    $( "#container" ).on("click", ".public-layer-title i", function () {
        $( this ).parent().parent().slideUp( duration ).parent().fadeOut( duration );
    })

    // 鎵撳紑寮圭獥 ( 鍏叡鏂规硶 )
    $( "header" ).on("click", "button", function () {
        $( `#layer-${ $( this ).data( "type" ) }` ).fadeIn( duration ).find( ".public-layer-wrapper" ).slideDown( duration );
    })
    
})();