var propsClass={
    PropsConf:[],
    PropsData:[],
    container:[],
    rewardCnt:[],
    Init: function (rewardData, id, type = 'func') {
        if( $('#'+id).length < 1){
            alert('container id not found:'+id)
            return;
        }
        $.get('/config/getPropsConfig',{'type':type}, function(propsConfig){
            if(typeof propsConfig == 'string')propsConfig = JSON.parse(propsConfig);
            console.log(propsConfig)
            propsClass.PropsConf = propsConfig.data;
            propsClass.PropsData[id] = rewardData;
            propsClass.preateId  = id;
            propsClass.container[id] = $('#'+id);
            propsClass.initHtml(id)
        }).fail(function (error) {
            alert('init props component failed:' + error.statusText)
        })
    },
    test:function () {
        console.log(propsClass.PropsConf);
        console.log(propsClass.PropsData)
    },
    initHtml:function (id) {

        propsClass.rewardCnt[id] = 0;
        console.log(propsClass.PropsData[id]);
        console.log(propsClass.PropsConf);
        propsClass.container[id].empty();
        if(!propsClass.container[id].hasClass('form-group'))propsClass.container[id].addClass('form-group');
        var html = '<label class="col-sm-2 control-label">奖励:</label>';
        html += '<div class="col-sm-10">'
            +       '<div class="col-sm-12 addOrDelControl">';
        console.log(propsClass.PropsData[id])
                        $.each(propsClass.PropsData[id],function(k,v) {
                            html +=propsClass.getOnePropHtml(id,v);
                            propsClass.rewardCnt[id]++;
                        });
        html += '       <div class="col-sm-12">' +
                '           <button type="button" class="btn btn-success addPropsReward"   style="margin-top:10px;margin-left: 12px;margin-bottom: 10px;">增加</button>\n' +
                '       </div>' +
                '</div>'
        $('#'+propsClass.preateId).append(html);
        propsClass.container[id].on('click','.addPropsReward', function(){
            var id = $(this).parents('.propsList').attr('id')
            propsClass.rewardCnt[id]++;
            $(this).parent().before(propsClass.getOnePropHtml(id, {"propsId":1,"num":1}))
            $.event.stopPropagation()
        });
        return true;
    },
    getOnePropHtml:function (id, prop) {
        var i = propsClass.rewardCnt[id]
        console.log("i:",i, "prop:",prop);
        var selRtype2 = "";
        var vName = "数量*";
        if (Number(prop.rtype) === 2) {
            selRtype2 = "selected";
            vName = "倍率*";
        }
        var html='<div class="form-group speProps">';
        //道具行
        html +='<label class="col-sm-1 control-label">道具*: </label>';
        html +='<div class="col-sm-2">';
        html +='<select class="form-control selectPropId" name="props['+id+']['+i+'][propsId]" onchange="propsClass.changePropId(this,'+i+',this.value)"> ';
        $.each(propsClass.PropsConf,function(k,v) {
            var sel = prop.propsId == v.id ? 'selected' : '';
            html += '<option value="'+v.id+'" '+sel+'>'+v.name+'</option>';
        });
        html +='</select>';
        html +='</div>';
        //数量
        var propNum = isNaN(parseInt(prop.num)) ? 1 : parseInt(prop.num);
        html +='<label class="col-sm-1 control-label">'+vName+': </label>';
        html +='<div class="col-sm-2"><input type="number" class="form-control"  name="props['+id+']['+i+'][num]" value="'+propNum+'"></div>';
        //类型
        html +='<label class="col-sm-1 control-label">取值类型*: </label>';
        html +='<div class="col-sm-2"><select class="form-control propsRtype" name="props['+id+']['+i+'][rtype]">';
        html +='<option value="1">直接取值(固定卡)</option>';
        html +='<option value="2" '+selRtype2+'>等级取值(仅支持金币)(随机卡)</option>';
        html +='</select></div>';
        //皮肤

        var skinList = propsClass.getSkinConf(prop.propsId);
        html +='<div class="col-sm-4 selectSkinDiv selectSkinDiv_'+i+'" ';
        if(skinList !== false &&  skinList !== undefined){
            html += '>'
            html += propsClass.getSkinHtml(id, i,prop,skinList)
        }else{
            html += ' style="display: none">'
        }
        html+='</div>';

        html +='<button type="button" class="btn btn-danger deleteParent" onclick="propsClass.delPropHtml(this)">删除</button>';
        html +='</div>';
        return html;
    },
    delPropHtml:function (obj) {
        $(obj).parents('.speProps').remove()
    },
    getSkinHtml:function(id, i,prop,skinList){
        var html='';
        html +='<label class="col-sm-3 control-label">皮肤id: </label>';
        html +='<div class="col-sm-9">';
        html +='<select class="form-control selectSkin" name="props['+id+']['+i+'][skin]">';
        console.log(94,skinList);
        console.log(95,prop);
        $.each(skinList,function(k,v) {
            var sel = parseInt(prop.skin) == parseInt(v.id) ? 'selected' : '';
            html += '<option value="'+v.id+'" '+sel+'>'+v.name+'</option>';
        });
        html +='</select>';
        html +='</div>';
        return html;
    }
    ,
    getSkinConf:function(propsId){
        var skinList = false
        $.each(propsClass.PropsConf,function (k,v) {
            if(parseInt(propsId)==v.id){
                skinList = v.skinList;
            }
        });
        console.log(propsId,skinList)
        return skinList;
    },
    changePropId:function (event,i,propsId) {
        var id = $(event).parents('.propsList').attr('id')
        console.log("变更道具选择:",propsId);
        skinList = propsClass.getSkinConf(propsId);
        console.log(skinList)
        if(skinList !== false &&  skinList !== undefined  ){
            $('.selectSkinDiv_'+i).show()
            $(event).parents('.speProps').find('.selectSkinDiv').empty();
            var prop ={"propId":propsId,"skin":0};
            var html = propsClass.getSkinHtml(id, i,prop,skinList);
            $(event).parents('.speProps').find('.selectSkinDiv').append(html);
        }else{
            $('.selectSkinDiv_'+i).hide()
            console.log("移除皮肤选择:");
            $(event).parents('.speProps').find('.selectSkinDiv').empty()
        }
    },
    changeSkin:function (event) {
        console.log("变更皮肤选择");
        console.log(event)
    }
    // addListener:function () {
    //     var selectPropId=document.getElementsByClassName("selectPropId");
    //     selectPropId.onchange = function (event) {
    //         console.log(1111111111111111);
    //         console.log(event)
    //     };
    //     // var selectSkin=document.getElementsByClassName("selectSkin");
    // },
};