@extends('layouts.base')

@section('content')
@section('title', '车场管理添加模板')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
    .top-box {
        padding: 0 20px;
    }

    .el-tag {
        font-size: 16px;
        cursor: pointer;
    }
</style>
<div id="app">
    <div class="all">
    <div class="vue-head">
        <div class="vue-main-title">
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content">消息模板信息</div>
        </div>
        <el-row>
        <el-col :span="16">
            <div class="top-box">
                <div style="padding: 50px 50px;">
                    <el-form label-position="right" label-width="80px" :model="form">
                        <el-form-item label="模板名称" label-width="100px">
                            <el-input placeholder="小票模板名称，例：订单打印小票" v-model="form.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="打印头部" label-width="100px">
                            <el-input v-model="form.print_head" ></el-input>
                            <span class="help-block">打印头部信息,比如商家名称 建议不超过8个字,会进行加粗处理</span>
                        </el-form-item>
                        <el-form-item label="描述" label-width="100px">
                            <el-input v-model="form.describe" ></el-input>
                            <span class="help-block">为空则不显示</span>
                        </el-form-item>
                        <el-form-item label="是否开启" label-width="100px">
                        <el-radio v-model="form.status" :label=0>关闭</el-radio>
                        <el-radio v-model="form.status" :label=1>开启</el-radio>
                        </el-form-item>                        
                    </el-form>
                </div>
            </div>
        </el-col>
    </el-row>        
    </div>
    <div class="vue-page">
        <div class="vue-center">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="backTo">返回列表</el-button>
        </div>
    </div>
    </div>
</div>

<script language='javascript'>
    let id = "{{ request()-> id }}"
    //vue
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                form: {
                    name:'',
                    print_head:'',
                    status:0,
                    describe:''
                },
                       

            }
        },
        computed: {

        },
        mounted() {
            if (id) {
                this.getTempDetail()
            }
        },
        methods: {
            //返回列表
            backTo() {
                let url =  "{!! yzWebUrl('plugin.printer.admin.parking-temp.index') !!}"
                                  window.location.href=url
            },
            //提交表单
            submit() {
                if (id) {
                    this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.parking-temp.edit') !!}", {
                            temp: {
                                id,
                                ...this.form
                            }
                        }).then((res) => {
                            if (res.data.result) {
                                this.$message.success(res.data.msg)
                                let url =  "{!! yzWebUrl('plugin.printer.admin.parking-temp.index') !!}"
                                  window.location.href=url
                            } else {
                                this.$message.error(res.data.msg);

                            }
                        })

                } else {
                    if (this.form.print_data < 1) {
                        this.$message.error('请添加一个键')
                    } else {
                        this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.parking-temp.add') !!}", {
                            temp: {
                                   ...this.form
                            }
                        }).then((res) => {
                            if (res.data.result) {
                                this.$message.success(res.data.msg)
                                let url =  "{!! yzWebUrl('plugin.printer.admin.parking-temp.index') !!}"
                                  window.location.href=url

                            } else {
                                this.$message.error(res.data.msg);

                            }
                        })
                    }
                }
            },
            //获取模板详情
            getTempDetail() {
                this.$http.post("{!! yzWebFullUrl('plugin.printer.admin.parking-temp.info') !!}", {
                    id
                }).then((res) => {
                    if (res.data.result) {
                        let data = res.data.data
                             this.form.name =data.name
                             this.form.print_head =data.print_head
                             this.form.status =data.status
                             this.form.describe =data.describe
                             
                    } else {
                        this.$message.error(res.data.msg);

                    }
                })
            }
        },
    })
</script>
@endsection