@extends('layouts.app')
@section('title')模板@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.expressPrinting.menu')@endcomponent
        @component('maintenance.expressPrinting.template.menu')@endcomponent
    </span>
    <div class="container-fluid d-none row m-1" id="print-template">
        <div class="col-lg-2 col-sm-3 p-0"  id="part_panel">
            {{--  组件选择面板 --}}
            @include('maintenance.expressPrinting.template._select')
        </div>
        <div class="col-lg-8 col-sm-6 p-0" id="production_panel">
            {{--  模板制作面板 --}}
            @include('maintenance.expressPrinting.template._produce')
        </div>
        <div class="col-lg-2 col-sm-3 p-0" id="compile_panel">
            {{-- 模板编辑页面 --}}
            @include('maintenance.expressPrinting.template._compile')
        </div>
    </div>
@endsection


@section('lastScript')
    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#print-template",
            data:{
                printParts:{!! $printParts !!},
                filterPrintParts:[],
                producePanel:{},              // 背景版
                selectProducePanel:false,              // 是否选中背景版
                productionParts:{
                    printParts:[],                  // 组件s
                    editPart: null,                    // 编辑中的组件
                    editIndex:{},                   // 编辑中组件的下标
                    addPart:{},                     // 添加模板
                },
                partIsSelected:false,               // 表示模块被选中
                selectPrintPart:{},                 // 选中模块
                selectPrintPartPoint:{x:'',y:''},   // 选中模块时模块 point
                mousePointStart:{x:'',y:''},        // 开始拖动时的 point
                mousePointEnd:{x:'',y:''},          // 结束拖动时的 point
                selectPrintPartOffset:{left:'',top:''},     // 选中时的left 和 top
                z_index:10,
            },
            mounted(){
                this.initProductionParts();
                $('.navbar,.nav1,.nav2').hide();
                $('.nav3').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').show();
                });
                $('.body').on('mouseenter', function () {
                    $('.navbar,.nav1,.nav2').hide();
                });
                $("#print-template").removeClass('d-none');
            },
            methods:{
                _addPartToProductionPanel(printPart){
                    let _clone = JSON.parse(JSON.stringify(printPart));
                    let print_part = JSON.parse(_clone.value);
                    print_part.left = 0;
                    print_part.top = 0;
                    print_part.index = this.productionParts.printParts.length;
                    print_part.z_index = this.z_index++;
                    print_part.id = "id"+this.z_index;
                    print_part.text = null;
                    this.productionParts.printParts.push(print_part);
                    if(print_part.type ==="StripeCode"){
                        setTimeout(function(){
                            window.setBarcode("0123456789","#"+print_part.id,2,50,true)
                        },100);
                    }
                },
                _removePartToProductionPanel(editPart){
                    this.productionParts.editPart = null;
                    let index = this.productionParts.printParts.indexOf(editPart);
                    this.productionParts.printParts.splice(index,1);
                },
                _alignContentToProductionPanel(){
                    this.productionParts.printParts.splice(this.productionParts.editIndex,1);
                    this.$forceUpdate();
                },
                _searchPrintPart(event){
                    let value = $(event.target).val();
                    this.filterPrintParts = this.printParts.filter(function(printPart){
                        return printPart.name.includes(value);
                    });
                    if(value===null || value=== '') this.filterPrintParts = JSON.parse(JSON.stringify(this.printParts));
                },
                showSaveModal(){
                    $('#saveModal').modal('show');
                },
                _savePrintTemplate(){
                    tempTip.setDuration(3000);
                    tempTip.setIndex(1999);
                    let printTemplate =JSON.parse(JSON.stringify(this.productionParts.printParts));
                    let bg = {
                        type:'bg',
                        'width':this.producePanel.width,
                        'height':this.producePanel.height,
                    }
                    printTemplate.push(bg);
                    let data = {
                        name:this.productionParts.addPart.name,
                        value:printTemplate
                    };
                    window.axios.post("{{url('apiLocal/maintenance/expressPrinting/template/create')}}",data).then(res=>{
                        if(res.data.success){
                            tempTip.showSuccess('保存成功!');
                            $('#saveModal').modal('hide');
                            return ;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.show(err);
                    });
                },
                initProductionParts(){
                    this.productionParts = {printParts:[], editPart:null, addPart:{}};
                    this.filterPrintParts=JSON.parse(JSON.stringify(this.printParts));
                    let height = (window.innerHeight-120)+'px';
                    $("#production_panel,#part_panel,#compile_panel,#select-panel,#produce-panel").css({height:height});
                    let produce_panel = $("#produce-panel");
                    produce_panel.css({height:height});
                },
                getPrintPartStyle(item){
                    let style = JSON.parse(JSON.stringify(item));
                    style['border-style'] = style.borderStyle;
                    style['border-width'] = style.borderWidth+'px';
                    if(style.borderStyle === 'none'){
                        style['border-style'] = 'dotted';
                        style['border-width'] = '1px';
                    }
                    style.display = 'flex';
                    style['font-size'] = style.fontSize+'px';
                    style['font-weight'] = style.fontWeight;
                    style['justify-content'] = style.justifyContent;
                    style['align-items'] = style.alignItems;
                    style.width+='px';
                    style.height+='px';
                    style.left+='px';
                    style.top+='px';
                    style['white-space'] = 'pre';              // 字体换行
                    return style;
                },
                _dragstart(item,$event){
                    {{--开始拖动元素时触发--}}
                    this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};
                    this.mousePointStart = {x:$event.offsetX, y:$event.offsetY};
                },
                _dragend(item,$event){
                    {{--结束拖动元素时触发--}}
                        this.mousePointEnd =  {x:$event.offsetX, y:$event.offsetY};
                    let left  = item.left - (this.mousePointStart.x - this.mousePointEnd.x);
                    let top = item.top - (this.mousePointStart.y - this.mousePointEnd.y);
                    item.left = left >0 ? left:0;
                    item.top =  top > 0 ? top:0;
                },
                editProducePanel(){
                    this.selectProducePanel =!this.selectProducePanel;
                },
                getProducePanelStyle(){
                    return {
                        width:this.producePanel.width+'px',
                        height:this.producePanel.height+'px',
                    }
                }
            }
        });
    </script>
@endsection