<?php defined('InShopNC') or exit('Access Invalid!'); ?>
<style type="text/css">
    .dialog_content {
        overflow: hidden;
        padding: 0 15px 15px !important;
    }
</style>

<div class="page">
    <!-- 页面导航 -->
    <div class="fixed-bar">
        <div class="item-title">
            <h3><?php echo $output['item_title']; ?></h3>
            <ul class="tab-base">
                <?php foreach ($output['menu'] as $menu) {
                    if ($menu['menu_key'] == $output['menu_key']) { ?>
                        <li><a href="JavaScript:void(0);" class="current"><span><?php echo $menu['menu_name']; ?></span></a></li>
                    <?php } else { ?>
                        <li><a href="<?php echo $menu['menu_url']; ?>"><span><?php echo $menu['menu_name']; ?></span></a></li>
                    <?php }
                } ?>
            </ul>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <form id="form_item" action="<?php echo urlAdmin('mb_special', 'special_item_save'); ?>" method="post">
        <input type="hidden" name="special_id" value="<?php echo $output['item_info']['special_id']; ?>">
        <input type="hidden" name="item_type" value="<?php echo $output['item_info']['item_type']; ?>">
        <input type="hidden" name="item_id" value="<?php echo $output['item_info']['item_id']; ?>">
        <table class="table tb-type2 nohover">
            <tbody>
            <?php $item_data = $output['item_info']['item_data']; ?>
            <?php $item_edit_flag = true; ?>
            <tr class="noborder">
                <td style="height: auto; padding: 0;">
                    <div id="item_edit_content" class="mb-item-edit-content">
                        <?php require('mb_special_item.module_' . $output['item_info']['item_type'] . '.php'); ?>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr class="tfoot">
                <td colspan="2"><a id="btn_save" class="btn" href="javascript:;"><span>保存编辑</span></a>
                    <?php if ($output['item_info']['special_id'] > 0) { ?>
                        <a id="btn_back"
                           href="<?php echo urlAdmin('mb_special', 'special_edit', array('special_id' => $output['item_info']['special_id'])); ?>"
                           class="btn"><span>返回上一级</span></a>
                    <?php } else { ?>
                        <a id="btn_back" href="<?php echo urlAdmin('mb_special', 'index_edit'); ?>" class="btn"><span>返回上一级</span></a>
                    <?php } ?></td>
            </tr>
            </tfoot>
        </table>
    </form>
</div>

<?php require('mb_special_bg.edit.php'); ?>
<div id="dialog_item_edit_image" style="display:none;">
    <div class="s-tips margintop"><i></i>请按提示尺寸制作上传图片，已达到手机客户端及Wap手机商城最佳显示效果。</div>
    <div class="upload-thumb"><img id="dialog_item_image" src="" alt=""></div>
    <input id="dialog_item_image_name" type="hidden">
    <input id="dialog_type" type="hidden">
    <form id="form_image" action="">
        <div class="dialog-handle-box clearfix">
            <h4 class="dialog-handle-title">选择要上传的图片：</h4>
            <span>
      <input id="btn_upload_image" type="file" name="special_image">
      </span> <span id="dialog_image_desc" class="dialog-image-desc"></span>
            <h4 class="dialog-handle-title">标题：</h4>
            <input id="dialog_item_image_title" type="text" class="txt w200 marginright marginbot vatop"><br/>

            <h4 class="dialog-handle-title">显示类型：</h4>
            <div>
                <select id="dialog_item_show_type" name="" class="vatop">
                    <option value="">-请选择-</option>
                    <option value="image">图片</option>
                    <option value="goods">商品(红包价 + 专柜价)</option>
                    <option value="goods_simple">商品(红包价)</option>
                    <option value="goods_top">商品榜单</option>
                    <option value="webview">网络页面</option>
                    <option value="video">外部视频链接</option>
                    <option value="audio">外部音频链接</option>
                </select>
                <input id="dialog_item_show_data" type="text" class="txt w200 marginright marginbot vatop"><br/>
                <span id="dialog_item_image_desc" class="dialog-image-desc"></span>
            </div>

            <h4 class="dialog-handle-title">操作类型：</h4>
            <div>
                <select id="dialog_item_image_type" name="" class="vatop">
                    <option value="">-请选择-</option>
                    <option value="keyword">关键字</option>
                    <option value="special">专题编号</option>
                    <option value="goods">商品编号</option>
                    <option value="brand">品牌</option>
                    <option value="category">分类</option>
                    <option value="url">网页链接</option>
                    <option value="innerurl">内置网页链接(已经不用)</option>
                    <option value="video">视频链接</option>
                    <option value="audio">音频链接</option>
                    <option value="appjump">软件内部功能跳转</option>
                </select>
                <input id="dialog_item_image_data" type="text" class="txt w200 marginright marginbot vatop"><br/>
                <span id="dialog_item_image_desc" class="dialog-image-desc"></span>
            </div>
        </div>
        <h4 class="dialog-handle-title">保留数据：</h4>
        <input id="dialog_item_image_reserved" type="text" class="txt w200 marginright marginbot vatop"><br/>
        <a id="btn_save_item" class="btn" href="javascript:;"><span>保存</span></a>
    </form>
</div>

<script id="item_image_template" type="text/html">
    <div nctype="item_image" class="item">
        <img nctype="image" src="<%=image%>" alt="">
        <input nctype="image_name" name="item_data[item][<%=image_name%>][image]" type="hidden" value="<%=image_name%>">
        <input nctype="image_show_type" name="item_data[item][<%=image_name%>][show_type]" type="hidden" value="<%=image_show_type%>">
        <input nctype="image_show_data" name="item_data[item][<%=image_name%>][show_data]" type="hidden" value="<%=image_show_data%>">
        <input nctype="image_type" name="item_data[item][<%=image_name%>][type]" type="hidden" value="<%=image_type%>">
        <input nctype="image_data" name="item_data[item][<%=image_name%>][data]" type="hidden" value="<%=image_data%>">
        <input nctype="image_title" name="item_data[item][<%=image_name%>][title]" type="hidden" value="<%=image_title%>">
        <input nctype="image_reserved" name="item_data[item][<%=image_name%>][reserved]" type="hidden" value="<%=image_reserved%>">
        <a nctype="btn_del_item_image" href="javascript:;" class="a1"><i class="icon-trash"></i>删除</a>
        <a nctype="btn_edit_item_image" href="javascript:;" class="a2"><i class="icon-edit"></i>编辑</a>
    </div>
</script>
<script src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.ajaxContent.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/jquery.ui.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/dialog/dialog.js" id="dialog_js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.iframe-transport.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.fileupload.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/template.min.js" charset="utf-8"></script>

<script type="text/javascript">
    var url_upload_image = '<?php echo urlAdmin('mb_special', 'special_image_upload');?>';
    $(document).ready(function () {
        var $current_content = null;
        var $current_image = null;
        var $current_image_name = null;
        var $current_image_title = null;
        var $current_image_reserved = null;

        var $current_image_show_type = null;
        var $current_image_show_data = null;
        var $current_image_type = null;
        var $current_image_data = null;
        var old_image = '';

        var $cur_bg_image = null;
        var $cur_bg_image_name = null;
        var $cur_bg_type = null;
        var $cur_bg_data = null;
        var $cur_bg_has_margin = null;

        var $dialog_item_image = $('#dialog_item_image');
        var $dialog_item_image_name = $('#dialog_item_image_name');
        var $dialog_bg_image = $('#dialog_bg_image');
        var $dialog_bg_image_name = $('#dialog_bg_image_name');

        var special_id = <?php echo $output['item_info']['special_id'];?>;

        //保存
        $('#btn_save').on('click', function () {
            var col_num = document.getElementById('col_num');
            if (col_num) {
                if (col_num.value == '' || parseInt(col_num.value) < 2 || parseInt(col_num.value) > 11) {
                    alert('请输入正确的每行图片数量(大于2小于10)！');
                    $('#col_num').focus();
                    return;
                }
            }
            $('#form_item').submit();
        });

        //编辑属性
        $('[nctype="btn_edit_block_bg"]').on('click', function () {
            $item_property = $(this).parents('[nctype="item_property"]');
            console.log($item_property);
            $cur_bg_image = $item_property.find('[nctype="bg_image"]');
            $cur_bg_image_name = $item_property.find('[nctype="bg_image_name"]');
            $cur_bg_type = $item_property.find('[nctype="bg_type"]');
            $cur_bg_data = $item_property.find('[nctype="bg_data"]');
            $cur_bg_has_margin = $item_property.find('[nctype="has_margin"]');

            $('#dialog_bg_image').attr('src', $cur_bg_image.attr('src'));
            $('#dialog_item_bg_type').val($cur_bg_type.val());
            $('#dialog_item_bg_data').val($cur_bg_data.val());

            if ($cur_bg_has_margin.val() == 'true') {
                $('#dialog_item_bg_has_margin').attr("checked", true);
            } else {
                $('#dialog_item_bg_has_margin').attr("checked", false);
            }

            $('#dialog_image_desc').text('推荐图片尺寸' + $(this).attr('data-desc'));
            $('#dialog_property_type').val('edit');
            change_bg_type_desc($('#dialog_item_bg_type').val());

            $('#dialog_property_edit_image').nc_show_dialog({
                width: 600,
                title: '添加'
            });
        });

        //编辑图片
        $('[nctype="btn_edit_item_image"]').on('click', function () {
            //初始化当前图片对象
            $item_image = $(this).parents('[nctype="item_image"]');
            $current_image = $item_image.find('[nctype="image"]');
            $current_image_name = $item_image.find('[nctype="image_name"]');

            $current_image_show_type = $item_image.find('[nctype="image_show_type"]');
            $current_image_show_data = $item_image.find('[nctype="image_show_data"]');

            $current_image_type = $item_image.find('[nctype="image_type"]');
            $current_image_data = $item_image.find('[nctype="image_data"]');
            $current_image_title = $item_image.find('[nctype="image_title"]');
            $current_image_reserved = $item_image.find('[nctype="image_reserved"]');

            $('#dialog_item_image').attr('src', $current_image.attr('src'));
            $('#dialog_item_image_name').val($current_image_name.val());

            $('#dialog_item_show_type').val($current_image_show_type.val());
            $('#dialog_item_show_data').val($current_image_show_data.val());

            $('#dialog_item_image_type').val($current_image_type.val());
            $('#dialog_item_image_data').val($current_image_data.val());
            $('#dialog_item_image_title').val($current_image_title.val());
            $('#dialog_item_image_reserved').val($current_image_reserved.val());

            $('#dialog_image_desc').text('推荐图片尺寸' + $(this).attr('data-desc'));
            $('#dialog_type').val('edit');
            change_image_type_desc($('#dialog_item_image_type').val());

            $('#dialog_item_edit_image').nc_show_dialog({
                width: 600,
                title: '编辑'
            });
        });

        $('#btn_mb_special_goods_search').on('click', function () {
            var search_type=$('#search_type').val();
            var keyword = $('#txt_goods_name').val();
            var $mb_special_goods_list=$('#mb_special_goods_list');
            var url = '<?php echo urlAdmin('mb_special', 'goods_list');?>';
            if (keyword) {
                $mb_special_goods_list.load(url, {keyword: keyword,search_type:search_type});
            }
        });

        $('#mb_special_goods_list').on('click', '[nctype="btn_add_goods"]', function () {
            $('[nctype="btn_add_item_image"]').trigger('click');

            var goods_id = $(this).attr('data-goods-id');
            var goods_name = $(this).attr('data-goods-name');
            var goods_image = $(this).attr('data-goods-image');

            var item_type=$('input[name="item_type"]').val();
            if(item_type == 'goods'){
                $('#dialog_item_show_type').val('goods');
            }
            else {
                $('#dialog_item_show_type').val('goods_simple');
            }

            $('#dialog_item_show_data').val(goods_id);
            $('#dialog_item_image_type').val('goods');
            $('#dialog_item_image_data').val(goods_id);
            $('#dialog_item_image_title').val(goods_name);

            change_image_type_desc($('#dialog_item_image_type').val());
            $('#dialog_item_image_name').val(goods_image);
            $('#dialog_item_image').attr('src', goods_image).css('display', 'block');
        });

        //添加图片
        $('[nctype="btn_add_item_image"]').on('click', function () {
            $dialog_item_image.hide();
            $dialog_item_image_name.val('');
            $current_content = $(this).parent().find('[nctype="item_content"]');
            $('#dialog_image_desc').text('推荐图片尺寸' + $(this).attr('data-desc'));
            $('#dialog_type').val('add');
            change_image_type_desc($('#dialog_item_image_type').val());

            $('#dialog_item_edit_image').nc_show_dialog({
                width: 600,
                title: '添加'
            });
        });

        //删除图片
        $('#item_edit_content').on('click', '[nctype="btn_del_item_image"]', function () {
            $(this).parents('[nctype="item_image"]').remove();
        });

        //图片上传
        $("#btn_upload_image").fileupload({
            dataType: 'json',
            url: url_upload_image,
            formData: {special_id: special_id},
            add: function (e, data) {
                old_image = $dialog_item_image.attr('src');
                $dialog_item_image.attr('src', LOADING_IMAGE);
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                if (typeof result.error === 'undefined') {
                    $dialog_item_image.attr('src', result.image_url);
                    $dialog_item_image.show();
                    $dialog_item_image_name.val(result.image_name);
                } else {
                    $dialog_item_image.attr('src', old_image);
                    showError(result.error);
                }
            }
        });

        $("#btn_update_bgimg").fileupload({
            dataType: 'json',
            url: url_upload_image,
            formData: {special_id: special_id},
            add: function (e, data) {
                old_image = $dialog_bg_image.attr('src');
                $dialog_bg_image.attr('src', LOADING_IMAGE);
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                if (typeof result.error === 'undefined') {
                    $dialog_bg_image.attr('src', result.image_url);
                    $dialog_bg_image.show();
                    $dialog_bg_image_name.val(result.image_name);
                } else {
                    $dialog_bg_image.attr('src', old_image);
                    showError(result.error);
                }
            }
        });

        $('#btn_save_item').on('click', function ()
        {
            var item_type=$('input[name="item_type"]').val();
            var type = $('#dialog_type').val();
            if (type == 'edit') {
                edit_item_image_save();
            }
            else
            {
                if ($dialog_item_image_name.val() == '') {
                    showError('请上传图片');
                    return false;
                }
                if(item_type == 'home1') {
                    edit_item_image_save();
                } else {
                    add_item_image_save();
                }
            }
            $('#dialog_item_edit_image').hide();
        });

        $('#btn_save_bg').on('click', function () {
            var type = $('#dialog_property_type').val();
            if (type == 'edit') {
                edit_bg_image_save();
            }
//            else {
//                if(dialog_bg_image_name.val() == '') {
//                    showError('请上传图片');
//                    return false;
//                }
//                add_item_image_save();
//            }

            $('#dialog_property_edit_image').hide();
        });

        function edit_item_image_save() {
            $current_image.attr('src', $('#dialog_item_image').attr('src'));
            $current_image_name.val($('#dialog_item_image_name').val());
            $current_image_show_type.val($('#dialog_item_show_type').val());
            $current_image_show_data.val($('#dialog_item_show_data').val());
            $current_image_type.val($('#dialog_item_image_type').val());
            $current_image_data.val($('#dialog_item_image_data').val());
            $current_image_title.val($('#dialog_item_image_title').val());
            $current_image_reserved.val($('#dialog_item_image_reserved').val());
        }

        function edit_bg_image_save() {
            $cur_bg_image.attr('src', $('#dialog_bg_image').attr('src'));
            $cur_bg_image_name.val($('#dialog_bg_image_name').val());
            $cur_bg_type.val($('#dialog_item_bg_type').val());
            $cur_bg_data.val($('#dialog_item_bg_data').val());
            if ($('#dialog_item_bg_has_margin').is(':checked')) {
                $cur_bg_has_margin.val('true');
            } else {
                $cur_bg_has_margin.val('false');
            }
        }

        function add_item_image_save() {
            var $html_item_image = $('#html_item_image');
            var item = {};
            item.image = $('#dialog_item_image').attr('src');
            item.image_name = $('#dialog_item_image_name').val();
            item.image_show_type = $('#dialog_item_show_type').val();
            item.image_show_data = $('#dialog_item_show_data').val();

            item.image_type = $('#dialog_item_image_type').val();
            item.image_data = $('#dialog_item_image_data').val();
            item.image_title = $('#dialog_item_image_title').val();
            item.image_reserved = $('#dialog_item_image_reserved').val();
            var $templateObj = template.render('item_image_template', item);
            $current_content.append($templateObj);
        }

        $('#dialog_item_image_type').on('change', function () {
            change_image_type_desc($(this).val());
        });
        $('#dialog_item_bg_type').on('change', function () {
            change_bg_type_desc($(this).val());
        });

        function change_image_type_desc(type) {
            var desc_array = {};
            var desc = '操作类型一共四种，对应点击以后的操作。';
            if (type != '') {
                desc_array['keyword'] = '关键字类型会根据搜索关键字跳转到商品搜索页面，输入框填写搜索关键字。';
                desc_array['special'] = '专题编号会跳转到指定的专题，输入框填写专题编号。';
                desc_array['goods'] = '商品编号会跳转到指定的商品详细页面，输入框填写商品编号。';
                desc_array['brand'] = '品牌编号会跳转到指定的品牌详细页面，输入框填写品牌编号。';
                desc_array['category'] = '分类编号会跳转到指定的分类搜索结果页面，输入框填写分类。';
                desc_array['url'] = '链接会跳转到指定链接，输入框填写完整的URL。';
                desc_array['video'] = '链接会打开制定的网络视频，输入框填写完整的视频URL。';
                desc_array['appjump'] = '跳转到指定的功能页面。';
                desc = desc_array[type];
            }
            $('#dialog_item_image_desc').text(desc);
        }

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        function change_bg_type_desc(type) {
            var desc_array = {};
            var desc = '操作类型一共两种，对应点击以后的操作。';
            if (type != '') {
                desc_array['color'] = '注：背景色是数字色值（例：#FFFFFF）。';
                desc_array['image'] = '';
                desc = desc_array[type];
            }
            $('#dialog_item_bg_desc').text(desc);
        }
    });

    var move_item = function (start, target, parent)
    {
        var src  = start -1;
        var dest = target-1;

        var title = $('.content h5');
        var items = $('.content [nctype="item_image"]');
        var org_items   = Array.prototype.slice.call(items, 0);

        var new_items = [];
        for (var i = 0; i < org_items.length; ++i)
        {
            if(i == dest) {
                new_items.push(org_items[src]);
                new_items.push(org_items[dest]);
            }
            else if(i == src) {
                continue;
            }
            else {
                new_items.push(org_items[i]);
            }
        }

        org_items.unshift(title);
        $(parent).html(new_items);
        items_number();
    };

    var items_number=function()
    {
        $('.items_index').remove();
        var items=$('[nctype="item_image"]');
        for(var i=0;i<items.length;i++) {
            items.eq(i).append("<div class='items_index' style='color: red;'>编号："+(parseInt(i)+1)+"</div>");
        }
    };

    var adjust_order = function ()
    {
        var adjust_html = '<div>'
            + '将编号为：<input type="text" id="start">放到：<input type="text" id="target">之前。'
            + '<button type="button" id="handle_target">确定</button>'
            + '</div>';
        $('[nctype="item_content"]').after(adjust_html);
    };

    adjust_order();
    items_number();

    $('#handle_target').on('click',function()
    {
        var startVal=$('#start').val();
        var targetVal=$('#target').val();
        if(startVal == ""||targetVal == "") {
            alert('请输入正确的编号');
        } else {
            move_item(startVal,targetVal,'[nctype="item_content"]');
        }
    })
</script>
