@extends('layouts.app')
@section('title')问题件-编辑@endsection

@section('content')
    @component("order.issue.menu")
    @endcomponent
    <div class="container-fluid d-none" id="editOrderIssue">
        <div class="card col-md-8 offset-md-2 ">
            <div class="card-header">问题件修改</div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="name" class="col-2 col-form-label text-right">原始客户订单号</label>
                    <div class="col-8">
                        <input type="text" class="form-control" name="client_code" v-model="order.client_code" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">问题类别</label>
                    <div class="col-8">
                        <select name="order_issue_type_id" class="form-control" id="order_issue_type_id" v-model="orderIssues.order_issue_type_id">
                            <option value></option>
                            <option v-for="type in orderIssueType" :value="type.id">@{{ type.name }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">客户</label>
                    <div class="col-8">
                        <select name="owner_id" class="form-control" id="owner_id" v-model="order.owner_id">
                            <option value></option>
                            <option v-for="type in owners" :value="type.id">@{{ type.name }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">承运商</label>
                    <div class="col-8">
                        <select name="logistic_id" class="form-control" id="logistic_id" v-model="order.logistic_id">
                            <option value></option>
                            <option v-for="type in logistics" :value="type.id">@{{ type.name }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">退回单号</label>
                    <div class="col-8">
                        <input type="text" class="form-control" name="logistic_number" v-model="orderIssues.logistic_number_return">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">二次客户订单号</label>
                    <div class="col-8">
                        <input type="text" name="second_order_id" class="form-control" v-model="orderIssues.second_client_no" @change="getSecondOrder($event)" id="order_id">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">二次订单商品详情</label>
                    <div class="col-8" >
                        <div class="alert alert-success" v-if="secondOrder">二次订单商品详情已填充</div>
                        <div class="alert alert-secondary" v-else>二次订单商品详情</div>
                        <div v-if="secondOrder">
                            <table class="table" v-if="secondOrder.packages">
                                <tr><th>条码</th><th>商品名</th><th>数量</th></tr>
                                <template v-for="package in secondOrder.packages">
                                    <tr v-for="commodity in package.commodities">
                                        <td>@{{ commodity.commodity.sku }}</td>
                                        <td>@{{ commodity.commodity.name }}</td>
                                        <td>@{{ commodity.amount }}</td>
                                    </tr>
                                </template>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">情况说明</label>
                    <div class="col-8">
                        <textarea name="result_explain" class="form-control" v-model="orderIssues.result_explain"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">最终状态</label>
                    <div class="col-8">
                        <select name="final_status" class="form-control" v-model="orderIssues.final_status" id="final_status">
                            <option></option>
                            <option v-for="value in final_status" :value="value">@{{ value }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">承运商赔偿金额</label>
                    <div class="col-8">
                        <input type="number" name="logistic_indemnity_money" class="form-control" id="logistic_indemnity_money"
                               v-model="orderIssues.logistic_indemnity_money">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">承运商快递减免</label>
                    <div class="col-8">
                        <select name="logistic_express_remission" class="form-control"
                                v-model="orderIssues.logistic_express_remission">
                            <option value></option>
                            <option v-for="remission in logisticExpressRemission" :value="remission">@{{ remission }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">宝时赔偿金额</label>
                    <div class="col-8">
                        <input type="number" name="baoshi_indemnity_money" class="form-control" id="baoshi_indemnity_money"
                               v-model="orderIssues.baoshi_indemnity_money">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">宝时快递减免</label>
                    <div class="col-8">
                        <select name="baoshi_express_remission" class="form-control" id="baoshi_express_remission"
                                v-model="orderIssues.baoshi_express_remission">
                            <option value></option>
                            <option v-for="remission in baoShiExpressRemission" :value="remission">@{{ remission }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">事故责任方</label>
                    <div class="col-8">
                        <select name="user_workgroup_id" class="form-control" id="user_workgroup_id"
                                v-model="orderIssues.user_workgroup_id">
                            <option value></option>
                            <option v-for="workgroup in userWorkgroup" :value="workgroup.id">@{{ workgroup.name }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right"></label>
                    <div class="col-8">
                        <button type="submit" class="btn btn-success form-control" @click="submitFake" :disabled="isSubmit">提交修改
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript">
        let editVue = new Vue({
            el: '#editOrderIssue',
            data: {
                orderIssues: {!! $orderIssue!!},
                order: @if($order){!! $order !!}@else {id:null,owner_id:null}@endif,
                secondOrder: @if($secondOrder){!! $secondOrder !!}@else null @endif,
                rejectedBill: @if($rejectedBill){!! $rejectedBill !!}@else {logistic_number_return:''}@endif,
                create_RejectedBill:'',
                owners:{!! $owners  !!},
                logistics:{!! $logistics !!},
                userWorkgroup: {!! $userWorkgroup !!},
                shops:{!! $shops !!},
                orderIssueType:{!! $orderIssueType !!},
                rejectingStatus: ['无', '未退回', '全部退回', '部分退回', '差异退回', '超量退回'],
                final_status: ['已解决', '待退回', '退回中',],
                logisticExpressRemission: ['原单减免', '补发减免', '全部减免'],
                baoShiExpressRemission: ['原单减免', '补发减免', '全部减免'],
                logistic_number:@if($rejectedBill)'{!! $rejectedBill->logistic_number_return !!}'@else ''@endif,
                isSubmit:false
            },
            mounted: function () {
                $("#editOrderIssue").removeClass('d-none');
            },
            methods: {
                submitFake(){
                    let _this = this;
                    let p= new Promise(function (resolve) {
                        let client_code = _this.orderIssues.second_client_no;
                        if(client_code){
                            let data = {clientNo:client_code};
                            tempTip.setDuration(99999);
                            tempTip.waitingTip('提交中');
                            axios.post("{{url('apiLocal/order/issue/getOrderInfoByClientNo')}}",data).then(function(res){
                                tempTip.setDuration(2000);
                                tempTip.cancelWaitingTip();
                                if(res.data.success){
                                    _this.secondOrder = res.data.data;
                                    resolve();
                                } else {
                                    tempTip.setDuration(4000);
                                    tempTip.show('查询订单信息出现异常:' + res.data.fail_info);
                                }
                            }).catch(function(err){
                                tempTip.cancelWaitingTip();
                                tempTip.setDuration(4000);
                                tempTip.show('网络异常:' + err);
                            });
                        }else{
                            resolve();
                        }
                    })
                    p.then(this.orderIssueUpdate);
                },
                orderIssueUpdate() {
                     let arr = {
                         '问题类别':'order_issue_type_id',
                         '处理状态':'handle_status',
                         '处理结果说明':'result_explain',
                         '承运商赔偿金额':'logistic_indemnity_money',
                         '承运商快递减免':'logistic_express_remission',
                         '宝时赔偿金额':'baoshi_indemnity_money',
                         '宝时快递减免':'baoshi_express_remission',
                         '退回单号':'logistic_number_return',
                         '退回单号货主':'id_owner',
                         '退回单号承运商':'id_logistic_return',
                     }
                    axios.post('{{url("apiLocal/order/issue/update")}}',this.orderIssues).then(function (response) {
                        if(response.data.success){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('修改成功正在返回查询页面');
                            window.location.href = "{{url("order/issue/index")}}";
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show(response.data.errors[0][0]);
                            response.data.errors.forEach(function(item){
                                let target = $('#'+arr[item[1]]);
                                target.addClass('is-invalid').change(function(){
                                    target.removeClass('is-invalid');
                                });
                            })
                        }
                    }).catch(function(error){
                        tempTip.setDuration(3000)
                        tempTip.show('修改出现异常:'+error);
                    })
                },
                getSecondOrder(){
                    let _this = this;
                    let client_code = this.orderIssues.second_client_no;
                    if(!client_code){
                        _this.secondOrder = '';
                        _this.orderIssues.second_order_id = null;
                        return ;
                    }
                    if(client_code){
                        let data = {clientNo:client_code};
                        axios.post("{{url('apiLocal/order/issue/getOrderInfoByClientNo')}}",data).then(function(res){
                            if(res.data.success){
                                if(res.data.message){
                                    tempTip.setDuration(2000);
                                    tempTip.okWindow(res.data.message,'确认')
                                    _this.secondOrder = null;
                                }else{
                                    _this.secondOrder = res.data.data;
                                }
                            } else {
                                tempTip.setDuration(4000);
                                tempTip.show('查询订单信息出现异常:' + res.data.fail_info);
                            }
                        }).catch(function(err){
                            tempTip.setDuration(4000);
                            tempTip.show('网络异常:' + err);
                        });
                    }
                },
                backOrderIssueIndex(){
                    window.location.href="javascript:history.go(-1)";
                },
            }
        });
        $('.is-invalid').change(function(){
            $(this).removeClass('is-invalid');
        })
    </script>

@endsection