@extends('layouts.app')
@section('title')组件创建@endsection

@section('content')
    <span class="nav">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.expressPrinting.menu')@endcomponent
        @component('maintenance.expressPrinting.part.menu')@endcomponent
    </span>
    <div class="container-fluid d-none" id="create-print-part">
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-header">
                        基础设置
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="template-width">宽</label>
                            <input type="number" id="template-width" v-model="template.width" class="form form-control">
                        </div>
                        <div class="form-group">
                            <label for=template-height>高</label>
                            <input type="number" id="template-height" v-model="template.height" class="form form-control">
                        </div>
                        <div class="form-group">
                            <label for="template-border-type">边框类型</label>
                            <select class="form-control" id="template-border-type" v-model="template.borderStyle">
                                <option v-for="style in borderStyles" :value="style.value">@{{ style.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="template-border-weight">边框大小</label>
                            <input type="number" id="template-border-weight" v-model="template.borderWidth" class="form form-control">
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-success" @click="show">保存当前模板</button>
                    </div>
                </div>
            </div>
            <div class="col-6 justify-content-center align-items-center flex-fill" >
                {{-- 模板展示--}}
                <div v-if="template.type==='text'" :style="getStyle()">
                    <span >@{{ template.text }}</span>
                </div>
                {{-- 二维码展示 --}}
                <svg v-show="template.type!=='text'" :style="{width:template.width,height:template.height}" id="barcodeDiv1">
                </svg>
            </div>
            <div class="col-3">
                {{-- 属性 --}}
                <div class="card">
                    <div class="card-header">
                        设置
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="template-type">组件类型</label>
                            <select class="form-control" v-model="template.type" @change="setContent">
                                <option v-for="type in types" :value="type.value">@{{ type.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="template-text">内容</label>
                            <textarea id="template-text" class="form-text form-control" cols="5" rows="5" v-model="template.text"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="template-text-align">文本对齐方式</label>
                            <select name="" id="template-text-align" v-model="template.justifyContent" class="form form-control">
                                <option v-for="justifyContent in justifyContents" :value="justifyContent.value">@{{ justifyContent.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="template-text-align">文本垂直对齐</label>
                            <select name="" id="template-text-align" v-model="template.alignItems" class="form form-control">
                                <option v-for="alignItem in alignItems" :value="alignItem.value">@{{  alignItem.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="template-font-size">字体大小</label>
                            <input type="text" id="template-font-size" v-model="template.fontSize" class="form form-control">
                        </div>
                        <div class="form-group">
                            <label for="template-font-weight">字体宽</label>
                            <select id="template-font-weight" v-model="template.fontWeight" class="form-control">
                                <option v-for="fontWeight in fontWeights" :value="fontWeight.value" >@{{ fontWeight.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="saveModalLabel">保存组件</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">组件名称</label>
                                <input type="text" id="recipient-name" class="form-control" v-model="printPart.name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" >关闭</button>
                        <button type="button" class="btn btn-success" @click="create">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>

    <script>
        let vue = new Vue({
            el:"#create-print-part",
            data:{
                printPart:{name:'',value:''},
                template:{
                    type:'text',
                    width:200,
                    height:100,
                    borderStyle:'solid',
                    borderWidth:1,
                    fontSize:12,
                    text:'',
                    fontWeight:'normal',   //normal lighter bold
                    justifyContent:'',     //文字水平对齐方式
                    alignItems:'center',         //文字垂直对齐
                },
                types:[
                    {name:"文本框",value:"text"},
                    {name:"条纹码",value:"StripeCode"},
                ],
                fontWeights:[
                    {name:"正常",value:"normal"},
                    {name:"细体",value:"lighter"},
                    {name:"粗体",value:"bold"},
                ],
                justifyContents:[
                    {name:"左对齐",value:""},
                    {name:"居中",value:"center"},
                    {name:"右对齐",value:"flex-end"},
                ],
                alignItems:[
                    {name:"顶部",value:""},
                    {name:"居中",value:"center"},
                    {name:"底部",value:"flex-end"},
                ],
                borderStyles:[
                    {name:"默认边框",value:"solid"},
                    {name:"无边框",value:"none"},
                    {name:"虚线边框",value:"dashed"},
                ]
            },
            mounted() {
                $("#create-print-part").removeClass('d-none');
            },
            methods:{
                show(){
                    $('#saveModal').modal('show');
                },
                getStyle(){
                    return {
                        'display':'flex',
                        'width':this.template.width+'px',
                        'height':this.template.height+'px',
                        'border-style':this.template.borderStyle,
                        'border-width':this.template.borderWidth+'px',
                        'font-size':this.template.fontSize+'px',
                        'font-weight':this.template.fontWeight,
                        'justify-content':this.template.justifyContent,
                        'align-items':this.template.alignItems,
                    };
                },
                create(){
                    tempTip.setDuration(3000);
                    tempTip.setIndex(2000);
                    let value = JSON.stringify(this.template);
                    let data = {name:this.printPart.name,value:value};
                    window.axios.post('{{url('apiLocal/maintenance/expressPrinting/part/create')}}',data).then(res=>{
                        if(res.data.success){
                            tempTip.showSuccess(res.data.data);
                            $('#saveModal').modal('hide');
                            return;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.show('网络异常:'+err);
                    });
                },
                setContent(){
                    if(this.template.type === "text")return;
                    this.template.borderStyle = 'none';
                    let div = $("#barcodeDiv1");
                    window.setBarcode("0123456789","#barcodeDiv1",2,50,true)
                    this.template.width = div.width();
                    this.template.height = div.height();
                }
            }
        });
    </script>
@endsection