{include file="public/seller_top" /}

<div class="seller_main w1200">
    {include file="public/seller_left" /}
    <div class="seller_right clearfix">
        <div class="seller_items">
            {include file="public/seller_items" /}
        </div>

        <div class="alert alert-block mt10">
            <ul class="mt5">
                <li>1、勾选需要打印的项目，勾选后可以用鼠标拖动确定项目的位置、宽度和高度，也可以点击项目后边的微调按钮手工录入</li>
                <li>2、设置完成后点击提交按钮完成设计</li>
            </ul>
        </div>
        <div class="dssc-form-default">
            <dl>
                <dt>选择打印项：</dt>
                <dd>
                    <form id="design_form" action="{:url('Sellerwaybill/waybill_design_save')}" method="post" onsubmit="ajaxpost('design_form', '', '', 'onerror');return false;">
                        <input type="hidden" name="waybill_id" value="{$waybill_info.waybill_id}">
                        <ul id="waybill_item_list" class="dssc-form-checkbox-list">
                            {if $waybill_item_list}
                            {foreach name="waybill_item_list" item="value"}
                            <li>
                                <input id="check_{$key}" class="checkbox" type="checkbox" name="waybill_data[{$key}][check]" data-waybill-name="{$key}" data-waybill-text="{$value.item_text}" {$value.check}>
                                <label for="check_{$key}" class="label">{$value.item_text}</label>
                                <i nctype="btn_item_edit" data-item-name="{$key}" title="微调" class="icon-edit"></i>
                                <input id="left_{$key}" type="hidden" name="waybill_data[{$key}][left]" value="{$value.left}">
                                <input id="top_{$key}" type="hidden" name="waybill_data[{$key}][top]" value="{$value.top}">
                                <input id="width_{$key}" type="hidden" name="waybill_data[{$key}][width]" value="{$value.width}">
                                <input id="height_{$key}" type="hidden" name="waybill_data[{$key}][height]" value="{$value.height}">
                            </li>
                            {/foreach}
                            {/if}
                        </ul>
                    </form>
                </dd>
            </dl>
            <dl>
                <dt>打印项偏移校正：</dt></dl>
            <div>
                <div class="waybill_area">
                    <div class="waybill_back"> <img src="{$waybill_info.waybill_image_url}" alt=""> </div>
                    <div class="waybill_design">
                        {if $waybill_info_data}
                        {volist name="waybill_info_data" id="data" k="key"}
                        {if $data.check}
                        <div id="div_{$k}" data-item-name="{$k}" class="waybill_item" style="position: absolute;width:{$data.width}px;height:{$data.height}px;left:{$data.left}px;top:{$data.top}px;">{$data.item_text}</div>
                        {/if}
                        {/volist}
                        {/if}
                    </div>
                </div>
            </div>
            <div class="bottom"><label class="submit-border"><input id="submit"  type="submit" class="submit" value="{$Think.lang.ds_submit}"></label></div>
        </div>
        <div id="dialog_item_edit" class="eject_con" style="display:none;">
            <input id="dialog_item_name" type="hidden">
            <dl>
                <dt>左偏移量：</dt>
                <dd>
                    <input id="dialog_left" class="w60 text" type="text" value=""><em class="add-on">mm</em>
                </dd>
            </dl>
            <dl>
                <dt>上偏移量：</dt>
                <dd>
                    <input id="dialog_top" class="w60 text" type="text" value=""><em class="add-on">mm</em>
                </dd>
            </dl>
            <dl>
                <dt>宽：</dt>
                <dd>
                    <input id="dialog_width" class="w60 text" type="text" value=""><em class="add-on">mm</em>
                </dd>
            </dl>
            <dl>
                <dt>高：</dt>
                <dd>
                    <input id="dialog_height" class="w60 text" type="text" value=""><em class="add-on">mm</em>
                </dd>
            </dl>
            <div class="bottom pt10 pb10"><a id="btn_dialog_submit" class="dssc-btn dssc-btn-green" href="javascript:;">确认</a> <a id="btn_dialog_cancel" class="dssc-btn" href="javascript:;">取消</a></div> </div>

    </div>
</div>
{include file="public/mall_footer" /}
<script type="text/javascript">
    $(document).ready(function() {
       /* var draggable_event = {
            stop: function(event, ui) {
                var item_name = ui.helper.attr('data-item-name');
                var position = ui.helper.position();
                $('#left_' + item_name).val(position.left);
                $('#top_' + item_name).val(position.top);
            }
        };

        var resizeable_event = {
            stop: function(event, ui) {
                var item_name = ui.helper.attr('data-item-name');
                $('#width_' + item_name).val(ui.size.width);
                $('#height_' + item_name).val(ui.size.height);
            }
        };

        $('.waybill_item').draggable(draggable_event);
        $('.waybill_item').resizable(resizeable_event);

        $('#waybill_item_list input:checkbox').on('click', function() {
            var item_name = $(this).attr('data-waybill-name');
            var div_name = 'div_' + item_name;
            if($(this).prop('checked')) {
                var item_text = $(this).attr('data-waybill-text');
                var waybill_item = '<div id="' + div_name + '" data-item-name="' + item_name + '" class="waybill_item">' + item_text + '</div>';
                $('.waybill_design').append(waybill_item);
                $('#' + div_name).draggable(draggable_event);
                $('#' + div_name).resizable(resizeable_event);
                $('#left_' + item_name).val('0');
                $('#top_' + item_name).val('0');
                $('#width_' + item_name).val('100');
                $('#height_' + item_name).val('20');
            } else {
                $('#' + div_name).remove();
            }
        });

        $('.waybill_design').on('click', '.waybill_item', function() {
            console.log($(this).position());
        });

        //微调弹出窗口
        $('[nctype="btn_item_edit"]').on('click', function() {
            var item_name = $(this).attr('data-item-name');
            $('#dialog_item_name').val(item_name);
            $('#dialog_left').val($('#left_' + item_name).val());
            $('#dialog_top').val($('#top_' + item_name).val());
            $('#dialog_width').val($('#width_' + item_name).val());
            $('#dialog_height').val($('#height_' + item_name).val());
            $('#dialog_item_edit').nc_show_dialog({title:'微调'});
        });*/

        //微调保存
        $('#btn_dialog_submit').on('click', function() {
            var item_name = $('#dialog_item_name').val();
            $('#div_' + item_name).css('left', $('#dialog_left').val() + 'px');
            $('#div_' + item_name).css('top', $('#dialog_top').val() + 'px');
            $('#div_' + item_name).css('width', $('#dialog_width').val() + 'px');
            $('#div_' + item_name).css('height', $('#dialog_height').val() + 'px');
            $('#left_' + item_name).val($('#dialog_left').val());
            $('#top_' + item_name).val($('#dialog_top').val());
            $('#width_' + item_name).val($('#dialog_width').val());
            $('#height_' + item_name).val($('#dialog_height').val());
            $('#dialog_item_edit').hide();
        });

        //微调取消
        $('#btn_dialog_cancel').on('click', function() {
            $('#dialog_item_edit').hide();
        });

        $('#submit').on('click', function() {
            $('#design_form').submit();

        });
    });
</script>