@extends('layouts.base')
@section('title','打印设置')
@section('content')
    <link rel="stylesheet" type="text/css"
          href="{{resource_get('plugins/electronics-bill/src/common/static/css/electronics-bill.css', 1)}}"/>
    <div id="app">
        <div class="electronics-div">
            <span>打印设置</span>
            <div id="install">
                <span>打印控件下载</span>
                <span><a href="{{resource_get('plugins/electronics-bill/src/common/lodop/CLodop_Setup_for_Win32NT.exe', 1)}}">CLodop_Setup_for_Win32NT.exe</a></span>
                <span><a href="{{resource_get('plugins/electronics-bill/src/common/lodop/install_lodop32.exe', 1)}}">install_lodop32.exe(请根据操作系统位数选择下载)</a></span>
                <span><a href="{{resource_get('plugins/electronics-bill/src/common/lodop/install_lodop64.exe', 1)}}">install_lodop64.exe(请根据操作系统位数选择下载)</a></span>
                <span style="color: red">提示：请在连有打印的电脑上安装控件并进行打印</span>
            </div>
            <div class="electronics-table">
                <el-form ref="form" label-width="150px" style="width: 60%">
                    <el-form-item label="本地打印机IP">
                        <el-input v-model="set.ip"></el-input>
                    </el-form-item>
                    <el-form-item label="打印机端口">
                        <el-input v-model="set.port"></el-input>
                    </el-form-item>
                    <el-form-item label="打印机名称">
                        <el-input v-model="set.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="electronics-div" style="padding-bottom: 200px">
            <span>芸签 APIkey</span>
            <div class="electronics-table">
                <el-form ref="form" label-width="150px" style="width: 60%">
                    <el-form-item label="APPID">
                        <el-input v-model="set.apikey"></el-input>
                    </el-form-item>
                    <el-form-item label="APPSecret">
                        <el-input v-model="set.app_secret"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p>接口总数:[[set.yun_form.apiTotalCount]] 单;接口使用总数: [[set.yun_form.statistics]] 单;接口剩余总数:[[set.yun_form.apiTotalCount - set.yun_form.statistics]] 单;到期时间:[[set.yun_form.endDate]]</p>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="confirm-btn">
            <el-button type="primary" @click="submit()">提交</el-button>
        </div>
    </div>
    <script>
        var detail_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.set.detail') !!}';
        var submit_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.set.save') !!}'
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                return {
                    set: {
                        ip: '',
                        port: '',
                        name: '',
                        apikey: '',
                        app_secret: '',
                        yun_form:{
                            apiTotalCount:0,
                            statistics:0,
                            apiTotalPrice:0
                        }
                    }
                }
            },
            created() {

            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.get(detail_url).then(function (res) {
                        if (res.data.result == 1) {
                            if (res.data.data != false) {
                                this.set = res.data.data;
                            }
                        } else {
                            this.$message({message: res.data.msg, type: 'error'});
                        }
                        loading.close();
                    }, function (err) {
                        this.$message({
                            message: err.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    })
                },
                submit() {
                    let that = this;
                    let loading = that.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    let set = {
                        ip: that.set.ip,
                        port: that.set.port,
                        name: that.set.name,
                        apikey: that.set.apikey,
                        app_secret: that.set.app_secret,
                    };
                    that.$http.post(submit_url, {'set': set}).then(function (res) {
                        if (res.data.result == 1) {
                            that.$message({message: res.data.msg, type: 'success'});
                        } else {
                            let tips = '';
                            if (res.data.msg instanceof Object) {
                                for (let key in res.data.msg) {
                                    tips += res.data.msg[key][0];
                                }
                            }
                            that.$message({
                                message: tips ? tips : res.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();
                    }, function (err) {
                        that.$message({
                            message: err.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
            },

        });
    </script>
@endsection