/* 更改职业 */

	selectOccupation : function() {

		// 展示类型

	    var ms = new MutliSelectorUI(App.dataCode, function (data) {

	    	App.OccupationTpCd = data.code;

			App.OCCUPATION_NAME = data.name;

			var str = data.name;

			if (str.length>14) {

				str = str.substr(0,14)+"...";

			}

			$("#selectOccupation").val(str);

			$("#OccupationVal").val(data.code);

			ms.hideDialog();

	    });

	    if(App.version) {

	    	ms.showDialog();

		}else{

			ms.hideDialog();

		}

	},

function MutliSelectorUI(data, fn){

    const data_list = data;

    var panelBg = document.createElement('div')

    panelBg.className="msu_panel_background"

    panelBg.setAttribute('id','msu_panel_background')

    document.body.appendChild(panelBg)

    var $panel = $('#msu_panel_background')

    $panel.css({

        display: 'none'

    })

    this.showDialog = function(){

        $panel.show()

        $("#pageB").attr({"data-btnLeft":"false||", "data-btnRight":"false||"});

        Fw.showPageArea($("#pageB"), [ $(".page") ], true);

    }

    this.hideDialog = function(){

        $panel.hide()

        $("#pageB").attr({"data-btnLeft":"true|返回|App.backPerson()", "data-btnRight":"true|保存|App.saveOccupation()"})

        Fw.showPageArea($("#pageB"), [ $(".page") ], true)

    }

    let self = this

    $panel.empty()

    $panel_box = $('<div class="msu_panel_box"></div>')

    $panel_box_cancel = $('<div class="msu_panel_cencels">取 消</div>')

    $panel.append($panel_box)

    $panel.append($panel_box_cancel)

    this.renderMainRow = function(){

        let indx = 0;

        $panel_box.empty()

        for(let item of data_list){

            console.log(JSON.stringify(item.classes))

            var $row_item = $('<div class="msu_main_row" code="'+item.code+'" name="'+item.name+'" isexpend="false"><div class="msu_text">'+item.name+'</div><div class="msu_arrow right"></div></div>')

            $panel_box.append($row_item)

            if(item.classes.length == 0){

                $row_item.find('.msu_arrow').hide()

            }

            indx++

            if(indx == data_list.length){

                $row_item.css({

                    borderBottom: '0'

                })

            }

        }

    }

    // init

    this.renderMainRow()

    $panel_box_cancel.on('click',function(){

        self.hideDialog()

    })

    $panel.on('click','.msu_main_row',function () {

        let _code = $(this).attr('code')

        let _name = $(this).attr('name')

        let isexpend = $(this).attr('isexpend')

        let classes = []

        for(let dt of data_list){

            if(dt.code == _code){

                classes = dt.classes

                break;

            }

        }

        if(classes.length == 0){

            if(typeof fn === 'function'){

                fn({

                    code:_code,

                    name: _name

                })

            }

            return;

        }

        $panel_box.empty();

        var $subitem = $('<div class="msu_back_btn"><div class="msu_arrow left"></div><div class="msu_text">'+_name+'</div></div>')

        $panel_box.append($subitem)

        let indx = 0

        for(var cls of classes){

            var $subitem = $('<div class="msu_sub_row" code="'+cls.code+'" name="'+cls.name+'">'+cls.name+'</div>')

            $panel_box.append($subitem);

            indx++

            if(indx == classes.length){

                $subitem.css({

                    borderBottom: '0'

                })

            }

        }

    })

    $panel.on('click','.msu_sub_row',function () {

        var _code = $(this).attr('code')

        var _name = $(this).attr('name')

        if(typeof fn === 'function'){

            fn({

                code:_code,

                name: _name

            })

        }

    })

    $panel.on('click','.msu_back_btn',function () {

        self.renderMainRow()

    })

}