<extend name="Public:base" />
<block name="content">
<link rel="stylesheet" href="__PUBLIC__/css/special.css" />	
<div class="page-header">
	<h1>
		{$breadcrumb2}
		<small>
			<i class="icon-double-angle-right"></i>
			{$crumbs}
		</small>
		
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="alert alert-block alert-success">
		   1.点击右侧组件的<strong>“添加”</strong>按钮，增加对应类型版块到页面，其中<strong>“广告条版块”</strong>只能添加一个。<br/>
		  2. 鼠标触及左侧页面对应版块，出现操作类链接，可以对该区域块进行<strong>“移动”、“启用/禁用”、“编辑”、“删除”</strong>操作。<br/>
		   3.新增加的版块内容默认为<strong>“禁用”</strong>状态，编辑内容并<strong>“启用”</strong>该块后将在手机端即时显示。<br/>
		 
		</div>
	</div>
</div>
<div class="row">
	
	
<div class="page"> 
  
  <div class="fixed-empty"></div>
  
  <!-- 列表 -->
  <div class="mb-special-layout">
    <div class="mb-item-box">
		<div id="item_list" class="item-list">
                <?php if(!empty($list) && is_array($list)) {?>
				<?php foreach($list as $key => $value) {?>
				<div nctype="special_item" class="special-item <?php echo $value['item_type'];?> <?php echo $value['usable_class'];?>" data-item-id="<?php echo $value['item_id'];?>">
				  <div class="item_type"><?php echo $module_list[$value['item_type']]['desc'];?></div>
				  <?php $item_data = $value['item_data'];?>
				  <?php $item_edit_flag = false;?>
				  <div id="item_edit_content">
						<?php 
						if($value['item_type'] == 'adv_list'){
						?>
						<include file="Special:mb_special_item.module_adv_list" />
						<?php 
						}else if($value['item_type'] == 'home1'){ 
						?>
						<include file="Special:mb_special_item.module_home1" />
						<?php 
						} else if($value['item_type'] == 'home2'){ 
						?>
						<include file="Special:mb_special_item.module_home2" />
						<?php 
						} else if($value['item_type'] == 'home3'){ 
						?>
						<include file="Special:mb_special_item.module_home3" />
						<?php 
						} else if($value['item_type'] == 'home4'){ 
						?>
						<include file="Special:mb_special_item.module_home4" />
						<?php 
						}else if($value['item_type'] == 'goods'){ 
						?>
						<include file="Special:mb_special_item.module_goods" />
						<?php 
						}
						?>
				  </div>
		  
				  <div class="handle"><a nctype="btn_move_up" href="javascript:;"><i class="icon-arrow-up"></i>上移</a> <a nctype="btn_move_down" href="javascript:;"><i class="icon-arrow-down"></i>下移</a> <a nctype="btn_usable" data-item-id="<?php echo $value['item_id'];?>" href="javascript:;"><i class="icon-off"></i><?php echo $value['usable_text'];?></a> <a nctype="btn_edit_item" data-item-id="<?php echo $value['item_id'];?>" href="javascript:;"><i class="icon-edit"></i>编辑</a> <a nctype="btn_del_item" data-item-id="<?php echo $value['item_id'];?>" href="javascript:;"><i class="icon-trash"></i>删除</a></div>
				  </td>
				</div>
				<?php } ?>
				<?php } ?>        
        </div>
    </div>
    <div class="module-list">
                  <div class="module_adv_list"> <span>广告条版块</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="adv_list">添加</a> </div>
            <div class="module_home1"> <span>模型版块布局A</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="home1">添加</a> </div>
            <div class="module_home2"> <span>模型版块布局B</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="home2">添加</a> </div>
            <div class="module_home3"> <span>模型版块布局C</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="home3">添加</a> </div>
            <div class="module_home4"> <span>模型版块布局D</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="home4">添加</a> </div>
            <div class="module_goods" style="display:none;"> <span>商品版块</span> <a nctype="btn_add_item" class="add" href="javascript:;" data-module-type="goods">添加</a> </div>
                </div>
  </div>
</div>
	
</div>
</block>
<block name="javascript">



<script type="text/javascript" src="__PUBLIC__/js/jquery.ui.js"></script> 

<script>

	var special_id = {$special_id};
    var url_item_add = "{:U('Special/special_item_add')}";
    var url_item_del = "{:U('Special/special_item_del')}";
    var url_item_edit = "{:U('Special/special_item_edit')}";
    $(document).ready(function(){
        //添加模块
        $('[nctype="btn_add_item"]').on('click', function() {
            var data = {
                special_id: special_id,
                item_type: $(this).attr('data-module-type')
            };
            $.post(url_item_add, data, function(data) {
                if(typeof data.error === 'undefined') {
                    location.reload();
                } else {
                    alert(data.error);
                }
            }, "json");
        });

        //删除模块
        $('#item_list').on('click', '[nctype="btn_del_item"]', function() {
            if(!confirm('确认删除？')) {
                return false;
            }
            var $this = $(this);
            var item_id = $this.attr('data-item-id');
            $.post(url_item_del, {item_id: item_id, special_id: special_id} , function(data) {
                if(typeof data.error === 'undefined') {
                    $this.parents('.special-item').remove();
                } else {
                    alert(data.error);
                }
            }, "json");
        });

        //编辑模块
        $('#item_list').on('click', '[nctype="btn_edit_item"]', function() {
            var item_id = $(this).attr('data-item-id');
            location.href = (url_item_edit + '&item_id=' + item_id);
			return false;
        });

        //上移
        $('#item_list').on('click', '[nctype="btn_move_up"]', function() {
            var $current = $(this).parents('[nctype="special_item"]');
            $prev = $current.prev('[nctype="special_item"]');
            if($prev.length > 0) {
                $prev.before($current);
                update_item_sort();
            } else {
                alert('已经是第一个了');
            }
        });

        //下移
        $('#item_list').on('click', '[nctype="btn_move_down"]', function() {
            var $current = $(this).parents('[nctype="special_item"]');
            $next = $current.next('[nctype="special_item"]');
            if($next.length > 0) {
                $next.after($current);
                update_item_sort();
            } else {
                alert('已经是最后一个了');
            }
        });
		
		$('#btn_mb_special_goods_search').on('click', function() {
            var url = '{:U("Special/goods_list")}';
            var keyword = $('#txt_goods_name').val();
            if(keyword) {
                $('#mb_special_goods_list').load(url, {keyword: keyword});
            }
        });

        $('#mb_special_goods_list').on('click', '[nctype="btn_add_goods"]', function() {
            var item = {};
            item.goods_id = $(this).attr('data-goods-id');
            item.goods_name = $(this).attr('data-goods-name');
            item.goods_price = $(this).attr('data-goods-price');
            item.goods_image = $(this).attr('data-goods-image');
            var html = template.render('item_goods_template', item);
            $('[nctype="item_content"]').append(html);
        });
		
        var update_item_sort = function() {
            var item_id_string = '';
            $item_list = $('#item_list').find('[nctype="special_item"]');
            $item_list.each(function(index, item) {
                item_id_string += $(item).attr('data-item-id') + ',';
            });
            $.post("{:U('Special/update_item_sort')}", {special_id: special_id, item_id_string: item_id_string}, function(data) {
                if(typeof data.error != 'undefined') {
                    alert(data.message);
                }
            }, 'json');
        };

        //启用/禁用控制
        $('#item_list').on('click', '[nctype="btn_usable"]', function() {
            var $current = $(this).parents('[nctype="special_item"]');
            var item_id = $current.attr('data-item-id');
            var usable = '';
            if($current.hasClass('usable')) {
                $current.removeClass('usable');
                $current.addClass('unusable');
                usable = 'unusable';
                $(this).html('<i class="icon-off"></i>启用');
            } else {
                $current.removeClass('unusable');
                $current.addClass('usable');
                usable = 'usable';
                $(this).html('<i class="icon-off"></i>禁用');
            }

            $.post("{:U('Special/update_item_usable')}", {item_id: item_id, usable: usable, special_id: special_id}, function(data) {
                if(typeof data.error != 'undefined') {
                    alert(data.message);
                }
            }, 'json');
        });

    });
	
</script>
</block>