<div id="select_small_box">
    <style>
        /*注意事项*/
        .xg-attention{
            color: #19b1ea;
            line-height: 0.5rem;
            font-size: 0.3rem;
            padding: 0.3rem 0.4rem;
            background-color: #d6f0fa;
        }
        /*商品信息模块*/
        .game-info{
            padding: 0.52rem 0.4rem;
            background-color: #fff;
            line-height: 1rem;
        }
        .game-info-left{
            display: block;
            float: left;
            margin-right: 0.4rem;
        }
        .game-info-img{
            display: block;
            width: 1rem;
            height: 1rem;
            border-radius: 5px;
        }
        .game-info-right{
            overflow: hidden;
        }
        .game-info-name{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.4rem;
            color: #282828;
            font-weight: bold;
        }

        /*支付方式模块*/
        .select-small-number{
            background-color: #fff;
        }
        .select-small-number .select-small-number-desc{
            font-size: 0.34rem;
            color: #565656;
            padding-left: 0.36rem;
            line-height: 0.78rem;
            background-color: #f2f2f2;
        }
        .select-small-number-list{
            list-style: none;
            font-size: 0.34rem;
            line-height: 1.32rem;
            color: #565656;
            padding: 0 0.36rem;
        }
        .select-small-number-item{
            border-bottom: 1px solid #f2f2f2;
            padding-left: 0.9rem;
            background: url("__IMG__/trade1/btn_normal_weixuan@3x.png") no-repeat left center / 0.5rem 0.5rem;
        }
        .select-small-number-item.active{
            background-image: url("__IMG__/trade1/btn_selected_xuanzhong@3x.png");
        }
    </style>
	<div style="max-width:640px;width:100%;margin:0 auto;">
    <header class="header">
        <a class="xg-back" id="jsselectsmall" href="javascript:;"></a>
        <h1 class="xg-title">选择小号</h1>
    </header>
		<div style="line-height:1.1rem;">&nbsp;</div>
    <main class="xg-main2" style="position:relative;max-width:640px;margin:0 auto;">
        <div class="xg-container2">
            <!--注意事项 begin-->
            <div class="xg-attention">
                <p>注意事项：提交出售后，该小号将会进行冻结，无法登录。小号卖出后，该小号其他区服的角色将一并出售。</p>
            </div>
            <!--end 注意事项-->
						<empty name="game">
						<div class="no_data">
								<div class="nodata_content">
										<img class="nogame_img" src="__IMG__/trade1/icon_normal_game@3x.png" alt="" height="" width="">
										<p class="nodata_txt">暂无游戏，逛逛其他地方吧~</p>
								</div>
						</div>
						<else />
            <!--游戏基本信息 begin-->
            <div class="game-info clf">
                <img class="game-info-left game-info-img" src="<notempty name='game.icon'>{$game.icon}<else />__IMG__/trade1/pic_shangpin@3x.png</notempty>" width="216" height="216" alt="">
                <div class="game-info-right">
                    <p class="game-info-name">{$game.game_name}</p>
                </div>
            </div>
            <!--end 游戏基本信息-->
            <!--选择小号 begin-->
            <div class="select-small-number">
                <p class="select-small-number-desc">选择小号</p>
                <ul class="select-small-number-list">
                    <!--给li添加active类名表示选中的状态-->
										<volist name="smalldata" id="vo">
                    <li class="select-small-number-item jsssni" data-id="{$vo.small_id}" onclick="select_small(this,{$vo.small_id},'{$vo.small_account}');">
                        <span class="way-type">{$vo.small_account}</span>
												<span style="float:right;color:#939393;">累充{$vo.pay_amount|default='0.00'}元</span>
                    </li>
										</volist>
                </ul>
            </div>
            <!--end 选择小号-->
						</empty>
        </div>
    </main>
    <footer class="footer" id="comfirm_small">
        <!-- 在class左后面添加xg-btn-disabled是未有选中的样式 -->
				<div class="input_data_box">
				<input type="hidden" name="game_id" value="{$game.game_id}">
				<input type="hidden" name="game_name" value="{$game.game_name}">
				<input type="hidden" name="sdk_version" value="{$game.sdk_version}">
				<input type="hidden" name="small_id" value="" >
				<input type="hidden" name="small_account" value="" >
				</div>
        <button type="button" class="xg-btn xg-btn-submit xg-btn-primary xg-btn-disabled" id="readandsell">请阅读注意事项，并确认出售</button>
    </footer>
		<notempty name="game">
		<script>
			function select_small(e,id,account) {
				$(e).addClass('active').siblings().removeClass('active');
				$('#comfirm_small input[name="small_id"]').val(id);
				$('#comfirm_small input[name="small_account"]').val(account);
				$('#readandsell').removeClass('xg-btn-disabled');
			}
			
			if($('.popmsg2').length<1) {$('#comfirm_small').after('<div class="popmsg2 pop-dialog"></div>');var popmsg2 = $('.popmsg2').pop();}
			
			$(function() {
				if($('#comfirm_sell .input_data_box').length>0) {
					if($('#comfirm_small input[name="game_id"]').val() == $('#comfirm_sell input[name="game_id"]').val()) {
						var sid = $('#comfirm_sell input[name="small_id"]').val();
						$('.jsssni').each(function(i,n) {
							var that = $(n);
							if(that.attr('data-id') == sid) {
								select_small(n,sid,that.find('.way-type').text());
							}
						});
					}
				}
			
				$('#jsselectsmall').click(function() {
					if($('#jsselectgame').length>0) {
						var p = $('.popwin2').fadeOut(200);
						setTimeout(function(){p.find('#select_small_box').remove();},210);
					} else {
					  var p = $('.popwin').fadeOut(200);
						setTimeout(function(){p.find('#select_box').remove();},210);
					}
					return false;
				});
				
				$('#readandsell').click(function() {
					var that = $(this),p = that.closest('#comfirm_small');
					var gid = p.find('input[name="game_id"]').val();
					if(!$.trim(p.find('input[name="small_id"]').val())) {popmsg2.msg('请选择小号');return false;}
					if(!$.trim(p.find('input[name="small_account"]').val())) {popmsg2.msg('请选择小号');return false;}
					var html = p.find('.input_data_box').clone();
					$('#comfirm_sell .input_data_box').remove();
					$('#comfirm_sell').append(html);
					$('#jssell_game').find('.gray_txt').addClass('xh_selected').text(p.find('input[name="game_name"]').val());
					$('#jssell_small').attr('data-gid',gid).find('.gray_txt').addClass('xh_selected').text(p.find('input[name="small_account"]').val());
					$('#jssell_server').attr('data-gid',gid);
					
					var pop = $('.popwin').fadeOut(200);
					setTimeout(function(){pop.find('#select_box').remove();},210);
					
					return false;
				});
			
			});
			
			
		</script>
		</notempty>
</div>
</div>