{include file="public/header" /}
<form id="search_form">
<input type="hidden" name="type" value="{$Request.param.type}" />    
<div class="wrapper" id="fix_goods">
    <table class="dssc-default-table mb15">
      <thead>
        <tr>
          <th class="tl" style="padding-left: 10px" colspan="2">{$Think.lang.ds_goods_name}</th>
          <th class="w90">{$Think.lang.ds_goods_price}</th>
          <th class="w90">{$Think.lang.ds_sort}</th>
          <th class="w90">{$Think.lang.ds_handle}</th></tr>
      </thead>
      <tbody dstype="bundling_data" class="bd-line tip">
        <tr{notempty name="goods_id"} style="display:none;"{/notempty}>
          <td colspan="20" class="norecord">
            <div class="no-promotion">
              <i class="zh"></i>
              <span>{$Think.lang.ds_no_record}</span></div>
          </td>
        </tr>{notempty name="goods_id"} {foreach name="goods_id" item="val"}
        <tr id="bundling_tr_{$val.goods_id}" class="off-shelf">
          <td class="w50">
            <div class="shelf-state">
              <div class="pic-thumb">
                <img src="{:goods_cthumb($val.goods_image,240,$val.store_id)}" ncname="{$val.goods_image}" dstype="bundling_data_img"></div></div>
          </td>
          <td class="tl">
            <dl class="goods-name">
              <dt style="width: 300px;">{$val.goods_name}</dt></dl>
          </td>
          <td class="goods-price w90" dstype="bundling_data_price">{$val.goods_price}</td>
          <td class="w90"><input data-goods="{$val.goods_id}" type="number" min="0" max="255" size="1" name="{$Request.param.name|default='goods_id'}[{$val.goods_id}][sort]" value="{if(isset($goods_id[$val['goods_id']]['sort']))}{$goods_id[$val['goods_id']]['sort']}{else}255{/if}" /></td>
          <td class="dscs-table-handle w90">
            <span>
              <a onclick="bundling_operate_delete($('#bundling_tr_{$val.goods_id}'), {$val.goods_id})" href="JavaScript:void(0);" class="btn-orange">
                <i class="iconfont">&#xe754;</i>
                <p>{$Think.lang.ds_del}</p>
              </a>
            </span>
          </td>
        </tr>{/foreach} {/notempty}</tbody>
    </table>
    <div class="div-goods-select-box">
        <div class="div-goods-select">
            
            <table class="search-form">
                <tbody>
                <tr>
                    <th></th>
                    <td><input type="text" name="keyword" class="text w200" value="{$Request.get.keyword}" /><a onclick="$('#search_form').submit()" dstype="search_a" class="dssc-btn"><i class="iconfont">&#xe718;</i>{$Think.lang.ds_search}</a></td>
                </tr>
                </tbody>
            </table>
            
            <div class="search-result" style="width:739px;">
                {notempty name="goods_list"}
                <ul class="goods-list" dstype="bundling_goods_add_tbody" style=" width:760px;">
                    {foreach name="goods_list" item="val"}
                    <li dstype="{$val.goods_id}">
                        <div class="goods-thumb"><img src="{:goods_cthumb($val.goods_image,240,$val.store_id)}" dstype="{$val.goods_image}" /></div>
                        <dl class="goods-info">
                            <dt><a href="#" target="_blank" title="{$val.goods_name}
                            {if $val.goods_serial != ''}{$val.goods_serial}{/if}">{$val.goods_name}</a></dt>
                            <dd>{$Think.lang.ds_goods_price}¥{$val.goods_price}</dd>
                            <dd>{$Think.lang.goods_storage}{$val.goods_storage}</dd>
                        </dl>
                        <div data-param="{gid:{$val.goods_id},image:'{$val.goods_image}',src:'{:goods_cthumb($val.goods_image,240,$val.store_id)}',gname:'{$val.goods_name}',gprice:'{$val.goods_price}',gstorang:'{$val.goods_storage}'}">{if isset($goods_id) && isset($goods_id[$val['goods_id']])}<a href="JavaScript:void(0);" class="dssc-btn-mini dssc-btn-orange" onclick="bundling_operate_delete($('#bundling_tr_{$val.goods_id}'), {$val.goods_id})"><i class="iconfont">&#xe754;</i>{$Think.lang.ds_del}</a>{else}<a href="JavaScript:void(0);" class="dssc-btn-mini dssc-btn-green" onclick="bundling_goods_add($(this))"><i class="iconfont">&#xe6db;</i>{$Think.lang.ds_add}</a>{/if}</div>
                    </li>
                    {/foreach}
                </ul>
                {else /}
                <div class="norecord">
                    <div class="warning-option"><i class="iconfont">&#xe64c;</i><span>{$Think.lang.no_record}</span></div>
                </div>
                {/notempty}
                {notempty name="goods_list"}
                <div class="pagination">{$show_page|raw}</div>
                {/notempty}
            </div>
        </div>
        
    </div>
</div>
<div class="footer-btn">
    <input class="btn" type="button" value="{$Think.lang.ds_save}" onclick="saveGoods()" />
</div>
</form>
<script>
    function saveGoods(){
        var html=''
        var count=0
        $('*[data-goods]').each(function(){
            $(this).attr('value',$(this).val())
            html+=$(this).parent().html()
            count++
        })
        window.parent.saveGoods(html,'{$Request.param.id}',count)
        var index=parent.layer.getFrameIndex(window.name)
        parent.layer.close(index)
    }

    /* 添加商品 */
    function bundling_goods_add(o){
        eval('var _data = ' + o.parent().attr('data-param'));
        // 隐藏第一个tr
        $('tbody[dstype="bundling_data"]').children(':first').hide();
        // 插入数据
        $('<tr id="bundling_tr_' + _data.gid + '"></tr>')
            .append('<td class="w50 "><div class="pic-thumb"><img dstype="bundling_data_img" ncname="' + _data.image + '" src="' + _data.src + '" onload="javascript:ResizeImage(this,60,60)"></span></div></td>')
            .append('<td class="tl"><dl class="goods-name"><dt style="width: 300px;">' + _data.gname + '</dt></dl></td>')
            .append('<td class="w90 goods-price" dstype="bundling_data_price">' + _data.gprice + '</td>')
            .append('<td class="w90"><input data-goods="' + _data.gid + '" type="number" min="0" max="255" size="1" name="{$Request.param.name|default='goods_id'}[' + _data.gid + '][sort]" value="255" /></td>')
            .append('<td class="dscs-table-handle w90"><span><a href="javascript:void(0);" onclick="bundling_operate_delete($(\'#bundling_tr_' + _data.gid + '\'), ' + _data.gid + ')" class="btn-orange"><i class="iconfont">&#xe754;</i><p>{$Think.lang.ds_del}</p></a></span></td>')
    .fadeIn().appendTo('tbody[dstype="bundling_data"]');

        $('li[dstype="' + _data.gid + '"]').children(':last').html('<a href="JavaScript:void(0);" class="dssc-btn-mini dssc-btn-orange" onclick="bundling_operate_delete($(\'#bundling_tr_' + _data.gid + '\'), ' + _data.gid + ')"><i class="iconfont">&#xe754;</i>{$Think.lang.ds_del}</a>');

    }

    /* 删除商品 */
    function bundling_operate_delete(o, id){
        o.remove();
        check_bundling_data_length();
        $('li[dstype="'+id+'"]').children(':last').html('<a href="JavaScript:void(0);" onclick="bundling_goods_add($(this))" class="dssc-btn-mini dssc-btn-green"><i class="iconfont">&#xe6db;</i>{$Think.lang.ds_add}</a>');
    }
    function check_bundling_data_length(){
        if ($('tbody[dstype="bundling_data"] tr').length == 1) {
            $('tbody[dstype="bundling_data"]').children(':first').show();
        }
    }
</script> 
<style>
.wrapper{padding:15px}
.search-form{color:#999;width:100%;border-bottom: 1px solid #e5e5e5;background: #f5f5f5;}
.search-form th{font-size:12px;line-height:22px;text-align:right;width:50px;padding:8px 8px 8px 0;}
.search-form th.w250{width:250px}
.search-form td{text-align:left;padding:20px 10px;}
.search-form input.text{vertical-align:middle;width:148px;}
.search-form .add-on{vertical-align:top;}
.search-form input[type="submit"],
.search-form input.submit,
.search-form a.submit{font:12px/30px "microsoft yahei";width:64px;height:30px;padding:0;cursor:pointer;border-radius:2px}
.search-form input[type="submit"]:hover{}
.dssc-default-table{line-height:20px;width:100%;border-spacing: 0;border-collapse:collapse;border: none;clear:both;margin-top:10px;margin-bottom:10px}
.dssc-default-table tbody tr.collapsed{display: none;}
.dssc-default-table thead tr, .dssc-default-table tbody tr{}
.dssc-default-table thead th{line-height:25px;color:#333;background-color:#F5F5F5;text-align:center;height:25px;padding:10px 0;font-weight:600;font-size:13px;}
.dssc-default-table thead td, .dssc-default-table tfoot th{background-color:#FFF;height:22px;padding:5px 0;border-bottom:solid 1px #E6E6E6;}
.dssc-default-table tfoot th{border-top:solid 1px #E6E6E6;}
.dssc-default-table thead td label, .dssc-default-table tfoot th label{color:#555;display:inline;float:left;margin-right:10px;cursor:pointer;}
.dssc-default-table tbody th{background-color:#FAFAFA;border:solid #E6E6E6;border-width:1px 0;padding:4px 0;}
.dssc-default-table tbody th span{display:inline-block;vertical-align:middle;margin-right:30px;}
.dssc-default-table tbody th span.goods-name{text-overflow:ellipsis;white-space:nowrap;width:240px;height:20px;overflow:hidden;}
.dssc-default-table tbody td{color:#999;background-color:#FFF;text-align:center;padding:10px 0;}
.dssc-default-table tbody td strong{color:#666;}
.dssc-default-table tfoot td{background-color:#FFF;text-align:center;padding:10px 0;}
.dssc-default-table td .pic-thumb{line-height:0;background-color:#FFF;text-align:center;vertical-align:middle;width:40px;height:40px;border:solid 1px #F5F5F5;overflow:hidden;margin-left:20px}
.dssc-default-table td .pic-thumb img{max-width:40px;max-height:40px;margin-top:expression(32-this.height/2);*margin-top:expression(16-this.height/2)/*IE6,7*/;}
.dssc-default-table td .goods-name{border:none;}
.dssc-default-table td .goods-name dt{font-size:12px;color:#333;text-overflow:ellipsis;display:block;text-align:left;max-width:320px!important;max-height:36px;padding-bottom:4px;overflow:hidden;}
.dssc-default-table td .goods-name dt span{line-height:16px;color:#FFF;background-color:#999;display:inline-block;*display:inline/*IE7*/;height:16px;padding:1px 4px;margin-right:2px;*zoom:1;box-shadow:inset 1px 1px 0 rgba(255,255,255,0.25);cursor:default;}
.dssc-default-table td .goods-name dt span.type-virtual{background-color:#3598DC;}
.dssc-default-table td .goods-name dt span.type-fcode{background-color:#9C59B8;}
.dssc-default-table td .goods-name dt span.type-presell{background-color:#1ABC9D;}
.dssc-default-table td .goods-name dt span.type-appoint{background-color:;}
.dssc-default-table td .goods-name dt a{color:#005EA6;}
.dssc-default-table td .goods-name dt a:hover{color:#DA542E;}
.dssc-default-table td .goods-name dd{line-height:16px;display:block;height:16px;}
.dssc-default-table td .goods-name .sale-type{background-color:#DA542E;padding:1px 4px;color:#FFFFFF}
.dssc-default-table td .goods-name dd.serve{height:18px;padding-top:2px;}
.dssc-default-table td .goods-name dd.serve span{color:#555;vertical-align:middle;display:inline-block;*display:inline/*IE7*/;margin-right:6px;position:relative;z-index:1;*zoom:1;cursor:default;}
.dssc-default-table td .goods-name dd.serve i{font-size:18px;line-height:20px;}
.dssc-default-table td .goods-name dd.serve i.commend{font-size:12px;background-color:#CCC;color:#FFF !important;line-height:16px;text-align:center;display:block;width:16px;height:16px;border-radius:2px;}
.dssc-default-table td .goods-name dd.serve .open i{color:#3598DC;}
.dssc-default-table td .goods-name dd.serve .open i.commend{background-color:#E84C3D;}
.dssc-default-table td .goods-name dd.serve span .QRcode{background:#F5F5F5;display:none;width:160px;padding:5px;border:solid 1px #CCC;position:absolute;z-index:99;top:-90px;right:-170px;box-shadow:0 0 5px rgba(0,0,0,0.15);}
.dssc-default-table td .goods-name dd.serve span .QRcode a{line-height:20px;display:block;text-align:right;}
.dssc-default-table td .goods-name dd.serve span .QRcode p{line-height:0;background-color:#FFF;text-align:center;vertical-align:middle;display:table-cell;*display:block;width:160px;height:160px;overflow:hidden;}
.dssc-default-table td .goods-name dd.serve span .QRcode img{max-width:160px;max-height:160px;margin-top:expression(160-this.height/2);}
.dssc-default-table td .goods-name dd.serve span:hover .QRcode{display:block;}


.div-goods-select-box{position:relative;z-index:1;zoom:1;}
.div-goods-select{background-color:#FFF;margin-bottom:60px;border:solid 1px #E6E6E6;position:relative;z-index:1;zoom:1;}
.div-goods-select .search-result{width:949px;margin:0 auto;overflow:hidden;}
.div-goods-select .search-result .goods-list{font-size:0;*word-spacing:-1px/*IE6、7*/;width:950px;border:solid #E6E6E6;border-width:0 0 1px 0;margin-right:-1px;}
.div-goods-select .search-result .goods-list li{font:12px/32px arial,"宋体";vertical-align:top;letter-spacing:normal;word-spacing:normal;display:inline-block;*display:inline/*IE7*/;width:149px;padding:10px 20px;margin:0 0 -1px 0;border-style:solid;border-color:#E6E6E6;border-width:0 1px 1px 0;overflow:hidden;zoom:1;}
.div-goods-select .search-result .goods-thumb{line-height:0;background-color:#FFF;text-align:center;vertical-align:middle;display:table-cell;*display:block;width:140px;height:140px;padding:4px;overflow:hidden;}
.div-goods-select .search-result .goods-thumb img{max-width:140px;max-height:140px;margin-top:expression(140-this.height/2);*margin-top:expression(70-this.height/2)/*IE6,7*/;}
.div-goods-select .search-result .goods-info{border:none;}
.div-goods-select .search-result .goods-info dt{text-align:left;width:auto;display:block;line-height:16px;height:32px;padding:0;overflow:hidden;}
.div-goods-select .search-result .goods-info dd{line-height:20px;height:auto !important;padding:5px 0;}
.div-goods-select .norecord{font-size:12px;color:#AAA;text-align:center;display:block;padding:40px 0;}

.dssc-btn-mini{font:normal 12px/20px arial;color:#fff;background-color:#3480c1;text-align:center;vertical-align:middle;display:inline-block;height:20px;padding:0 10px;margin-right:2px;border-style:solid;border-width:1px;border-color:#3480c1;cursor:pointer;border-radius:2px; }
.dssc-btn-mini:hover{text-decoration:none;color:#fff;background-color:#1e629c;border-color:#1e629c;}
.dssc-btn{font:normal 12px/20px "microsoft yahei";text-decoration:none;color:#fff !important;background-color:#3480c1;text-align:center;vertical-align:middle;display:inline-block;height:20px;padding:4px 10px;border:solid 1px;border-color:#3480c1;cursor:pointer;border-radius:2px;}
.dssc-btn:hover{text-decoration:none;color:#fff;background-color:#1e629c;border-color:#1e629c;}
.dssc-btn-mini i, .dssc-btn i{font-size:14px;vertical-align:middle;margin-right:4px;}
.dssc-btn-green, .dssc-btn-orange,
.dssc-btn-green:hover, .dssc-btn-orange:hover, .dscs-table-handle .btn-orange-current{color:#FFF;}
.dssc-btn-green,
.dscs-table-handle .btn-green:hover{background-color:#0ecc6a;border-color:#0ecc6a;}
.dssc-btn-orange,
.dscs-table-handle .btn-orange:hover,
.dscs-table-handle .btn-orange-current{background-color:#FAA732;margin:0;border-style:solid;border-width:1px;border-color:#FAA732 !important;}

.dssc-btn-green:hover{background-color:#19ba62;border-color:#19ba62;}
.dssc-btn-orange:hover{background-color:#F89406;border-color:#F89406;}

.footer-btn{
	text-align: center;
	padding: 20px;
	position:fixed;
    z-index: 2;
	bottom:0;
	left:0;
	right:0;
	background-color: #fff;
	border-top: 1px solid #eee;
}
</style>