@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" style="min-height: 1500px">
            <span>电子面单编辑</span>
            <div id="install">
                <span><B>快递公司支持情况：</B>顺丰速运、宅急送、圆通速递、百世快递、中通快递、韵达快递、申通快递、德邦快递、优速快递、京东快递、信丰物流、安能快递、国通快递、天天快递、跨越速运、邮政快递包裹、中铁快运、邮政国内标块、远程快运、全一快递、速尔快递、品骏快递
快运公司支持情况： 德邦快运、安能快运、京东快运、龙邦快运</span>
                <span><B>快运公司支持情况：</B> 德邦快运、安能快运、京东快运、龙邦快运</span>
                <span><B>无需申请直接打单：</B>顺丰（SF）、宅急送（ZJS）、中铁快运（ZTKY）、全一快递（UAPEX）</span>
                <span><B>月结账号直接打单：</B>德邦（DBL）</span>
                <span><B>快递鸟后台申请账号：</B>优速（UC）、韵达（YD）、圆通（YTO）、远程（YCWL）、安能（ANE）、百世快递（HTKY）</span>
                <span><B>线下（网点）申请账号</B>EMS（广东省内发件不需要，广东省外EMS发货，需联系当地EMS网点，在85系统里面申请大客户和APP_SECRET）、中通（ZTO）、申通（STO）、德邦（DBL）、京东（JD）、信丰（XFEX）、国通（GTO）、天天快递（HHTT）、速尔快递（SURE）、品骏快递（PJ）</span>
                <span><B>快运电子面单：</B>京东快运（JDKY），安能快运（ANEKEY），德邦快运（DBLKY），龙邦快运（LB）</span>
                <span><B>顺丰、宅急送等直营型的可以直接使用电子面单的账户请求电子面单接口。中通，圆通，申通，百世快递，韵达，优速等加盟型的需要客户去当地物流快递网点申请电子面单账户，将相应的参数传入电子面单接口进行电子面单请求。</B></span>
                <span><B>将订单号、收寄件地址等信息通过电子面单API传递给快递公司，快递公司会通过接口返回物流单号给到用户端，打印在面单上，就是面单上的运单号。加盟快递公司需要预先充值单号，</B></span>
            </div>
            <div class="electronics-table">
                <el-form label-width="180px" style="width: 80%">
                    <el-form-item label="电子面单名称" required>
                        <el-input v-model="form.panel_name"></el-input>
                    </el-form-item>
                    <el-form-item label="电子面单客户账号">
                        <el-input v-model="form.panel_no"></el-input>
                    </el-form-item>
                    <el-form-item label="电子面单密码">
                        <el-input v-model="form.panel_pass"></el-input>
                    </el-form-item>
                    <el-form-item label="快递类型" required>
                        <el-select v-model="form.exhelper_style" clearable filterable placeholder="请选择快递类型">
{{--                            <el-option label="请选择" :value="0" v-if="form.exhelper_style == false"></el-option>--}}
                            <el-option v-for="(item,index) in list" :label="item.name" :value="item.code" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="快递/快运业务类型" required>
                        <el-select v-model="form.exhelper_type" clearable placeholder="请选择快递/快运业务类型">
{{--                            <el-option label="请选择" :value="0" v-if="form.exhelper_type == false"></el-option>--}}
                            <el-option v-for="(item,index) in business_type" :label="item.name" :value="item.value" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板样式">
                        <el-select v-model="form.panel_style" clearable placeholder="请选择模板样式">
                            <el-option label="默认" :value="0" v-if="template_style == false"></el-option>
                            <el-option v-for="(item,index) in template_style" :label="item.name" :value="item.value" :key="index">
                                <span style="float: left;min-width: 100px;margin-right: 20px">[[item.name]]</span>
                                <span v-if="item.des" style="float: left;color: #8492a6;">[[item.des]]</span>
                                <span v-else style="float: left;color: #8492a6;">没有描述</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月结编码">
                        <el-input v-model="form.panel_sign"></el-input>
                    </el-form-item>
                    <el-form-item label="收件网点标识">
                        <el-input v-model="form.panel_code"></el-input>
                    </el-form-item>
                    <el-form-item label="是否为默认模板">
                        <el-switch v-model="form.is_default" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否通知快递员上门揽件">
                        <el-switch v-model="form.is_self" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item label="通知快递员上门揽件时间" v-if="form.is_self">
                        <template>
                            <el-select v-model="form.day" clearable placeholder="请选择时间">
                                <el-option
                                        v-for="item in day_list"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-time-select
                                    placeholder="起始时间"
                                    v-model="form.begin_time"
                                    :picker-options="{
                                      start: '08:00',
                                      step: '01:00',
                                      end: '17:00',
                                      format: 'HH:mm:ss'
                                    }">
                            </el-time-select>
                            至
                            <el-time-select
                                    placeholder="结束时间"
                                    v-model="form.end_time"
                                    :picker-options="{
                                      start: '08:00',
                                      step: '01:00',
                                      end: '17:00',
                                      format: 'HH:mm:ss',
                                      minTime: form.begin_time
                                    }">
                            </el-time-select>
                            <br>
                            <span style="color: red;">按照打印电子面单当天时间计算,不选默认今天</span>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="confirm-btn">
            <el-button type="primary" @click="submit()">提交</el-button>
            <el-button type="primary" @click="goBack()">返回</el-button>
        </div>
    </div>
    <script>
        var detail_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.detail') !!}';
        var submit_url = '{!! yzWebFullUrl('plugin.electronics-bill.admin.bill-manage.save') !!}';
        let id = '{{$id}}';
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                return {
                    form:{
                        panel_name:'',
                        panel_no:'',
                        panel_pass:'',
                        panel_sign:'',
                        panel_code:'',
                        panel_style:'',
                        exhelper_style:'',
                        is_self:0,
                        is_default:0,
                        day:'',
                        exhelper_type:'',
                        begin_time:'',
                        end_time:'',
                    },
                    list:[],
                    business_type:[],
                    template_style:[],
                    day_list:[
                        {
                            name:'今天',
                            value:1
                        },
                        {
                            name:'明天',
                            value:2
                        },
                        {
                            name:'后天',
                            value:3
                        }
                    ]
                }
            },
            watch:{
                'form.exhelper_style':function(code){
                    let that = this;
                    that.list.forEach(function(item,index){
                        if(code == item.code){
                            that.business_type = item.business_type;
                            that.template_style = item.template_style;
                            // that.form.exhelper_type = '';
                            // that.form.panel_style = '';
                            return;
                        }
                    });
                }
            },
            created() {

            },
            mounted() {
                this.getData();
            },
            methods: {
                getData(){
                    let that = this;
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    that.$http.get((detail_url += '&id=' + id)).then(function(res){
                        if(res.data.result == 1){
                            if(res.data.data.list){
                                that.list = res.data.data.list;
                            }
                            if(res.data.data.detail != false){
                                that.form = res.data.data.detail;
                            }
                        }else{
                            that.$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 = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    that.$http.post(submit_url,{
                        'form':that.form
                    }).then(function(res){
                        if (res.data.result == 1) {
                            that.$message({message: res.data.msg, type: 'success'});
                            return this.goBack();
                        } 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();
                    })
                },
                goBack(){
                    history.go(-1);
                }
            },

        });
    </script>
@endsection