@extends('layouts.app')
@section('title')问题件-录入@endsection

@section('content')
    @component("order.issue.menu")@endcomponent
    <div id="issue_create_div" class="d-none">
        <div class="container-fluid">
            <div class="card col-md-8 offset-md-2">
                <div class="card-header">订单问题件录入</div>
                <div class="card-body">
                    <form action="{{url('order/issue/store')}}" method="post">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="rejected_bill_id" :value='rejectedBill.id'>
                        <input type="hidden" name="order_id" :value='order.id'>
                        <input type="hidden" name="second_order_id" :value='second_order_id'>
                        <div class="form-group row">
                            <label for="logistic_number_return" class="col-2 col-form-label text-right ">退回单号</label>
                            <div class="col-8 ">
                                <input type="text" name="logistic_number_return" id="logistic_number_return"
                                       class="form-control col-lg-5 @error('logistic_number_return') is-invalid @enderror"
                                       v-model="logistic_number_return"
                                       @blur="checkLogisticNumberReturn()"
                                       value="@if(old('logistic_number_return')){{old('logistic_number_return')}}@endif">
                                @error('logistic_number_return')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始WMS订单号</label>
                            <div class="col-8">
                                <input type="text" name="wms_order_no" id="wms_order_no"
                                       class="form-control col-lg-5 @error('wms_order_no') is-invalid @enderror"
                                       @blur="checkWMSOrderNo($event)"
                                       v-model="wms_order_no"
                                       value="@if(old('wms_order_no')){{old('wms_order_no')}}@endif">
                                @error('wms_order_no')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="order_issue_type_id" class="col-2 col-form-label text-right text-primary"><span class="text-danger">*</span>问题类别</label>
                            <div class="col-8">
                                <select name="order_issue_type_id" id="order_issue_type_id"
                                        class="form-control @error('order_issue_type_id') is-invalid @enderror" v-model="order_issue_type_id">
                                    <option value></option>
                                    <option v-for="type in types " :value="type.id">@{{ type.name }}</option>
                                </select>
                                @error('order_issue_type_id')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right">原始商品详情</label>
                            <div class="col-8" id="">
                                <div class="alert alert-success" role="alert" v-if="order.packages">
                                    商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    原始商品详情通过原始订单号或退回单号输入进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="order.packages">
                                    <tr>
                                        <th>条码</th>
                                        <th>商品名</th>
                                        <th>数量</th>
                                    </tr>
                                    <tr v-for="packages in order.packages">
                                        <template v-for="items in packages.commodities">
                                            <td>@{{ items.commodity.sku }}</td>
                                            <td>@{{ items.commodity.name }}</td>
                                            <td>@{{ items.amount }}</td>
                                        </template>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">退回单商品详情</label>
                            <div class="col-8" id="">
                                <div class="alert alert-success" role="alert" v-if="rejectedBill.items">
                                    商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    退回单商品详情通过原始订单号或退回单号输入进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="rejectedBill.items">
                                    <tr>
                                        <th>条码</th>
                                        <th>商品名</th>
                                        <th>数量</th>
                                        <th>是否正品</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr v-for="item in rejectedBill.items">
                                        <td>@{{ item.barcode_goods }}</td>
                                        <td>@{{ item.name_goods }}</td>
                                        <td>@{{ item.amount }}</td>
                                        <td>@{{ item.validity_at }}</td>
                                        <td>@{{ item.remark }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right text-primary"><span class="text-danger">*</span>货主</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-5">
                                    <select class="form-control @error('owner_id') is-invalid @enderror" name="owner_id" v-model="order.owner_id" >
                                        <option value></option>
                                        <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                                    </select>
                                    @error('owner_id')
                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始承运商</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-5">
                                    <select class="form-control " name="logistic_id" v-model="order.logistic_id">
                                        <option value></option>
                                        <option v-for="logistic in logistics" :value="logistic.id">@{{ logistic.name
                                            }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人名称</label>
                            <div class="col-8">
                                <input type="text" name="consignee_name " class="form-control"
                                       v-model="order.consignee_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人号码</label>
                            <div class="col-8">
                                <input type="text" name="consignee_phone" class="form-control"
                                       v-model="order.consignee_phone">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label text-right ">收货人地址</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-4">
                                    <input type="text" name="province" class="form-control" placeholder="省"
                                           v-model="order.province"></div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="city" class="form-control" placeholder="市"
                                           v-model="order.city"></div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="district" class="form-control" placeholder="区"
                                           v-model="order.district"></div>
                            </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="address" class="form-control " v-model="order.address">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="second_order_no" class="col-2 col-form-label text-right">二次订单编号</label>
                            <div class="col-8">
                                <input type="text" name="second_order_no" id="second_order_no" class="form-control"
                                       value="@if(old('second_order_no')){{old('second_order_no')}}@endif"
                                       @blur="verifySecondOrder($event)"
                                       v-model="secondOrderNo">
                                <div class="valid-feedback" style="display: none" id="secondOrderNo_feedback"></div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="second_order_no" class="col-2 col-form-label text-right">二次承运商</label>
                            <div class="col-8">
                                <select class="form-control" v-model="secondOrder.logistic_id">
                                    <option></option>
                                    <option v-for="logistic in logistics" :value="logistic.id">@{{ logistic.name }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right">二次订单商品明细</label>
                            <div class="col-8" id="">
                                <div class="alert alert-success" role="alert" v-if="secondOrder.packages">
                                    商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    商品明细通过二次订单编号进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="secondOrder.packages">
                                    <tr>
                                        <th>条码</th>
                                        <th>商品名</th>
                                        <th>数量</th>
                                    </tr>
                                    <tr v-for="packages in secondOrder.packages">
                                        <template v-for="items in packages.commodities">
                                            <td>@{{ items.commodity.sku }}</td>
                                            <td>@{{ items.commodity.name }}</td>
                                            <td>@{{ items.amount }}</td>
                                        </template>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="order_issue_type_id" class="col-2 col-form-label text-right ">最终状态</label>
                            <div class="col-8">
                                <select name="final_status" id="final_status" class="form-control"
                                        v-model="finalStatus">
                                    <option value></option>
                                    <option v-for="type in final_status " :value="type">@{{ type }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">处理结果说明</label>
                            <div class="col-8">
                                <textarea name="result_explain" class="form-control"></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logistic_indemnity_money"
                                   class="col-2 col-form-label text-right ">承运商赔偿金额</label>
                            <div class="col-8">
                                <input type="text" name="logistic_indemnity_money" id="logistic_indemnity_money"
                                       class="form-control"
                                       value="@if(old('logistic_indemnity_money')){{old('logistic_indemnity_money')}}@endif">
                                @error('logistic_indemnity_money')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logistic_express_remission"
                                   class="col-2 col-form-label text-right ">承运商快递减免</label>
                            <div class="col-8">
                                <select name="logistic_express_remission" id="logistic_express_remission"
                                        class="form-control"
                                        v-model='logistic_express_remission'>
                                    <option value></option>
                                    <option v-for="remission in Remission " :value="remission">@{{ remission }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="baoshi_indemnity_money"
                                   class="col-2 col-form-label text-right ">宝时赔偿金额</label>
                            <div class="col-8">
                                <input type="text" name="baoshi_indemnity_money" id="baoshi_indemnity_money"
                                       class="form-control"
                                       value="@if(old('baoshi_indemnity_money')){{old('baoshi_indemnity_money')}}@endif">
                                @error('baoshi_indemnity_money')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="baoshi_express_remission"
                                   class="col-2 col-form-label text-right ">宝时快递减免</label>
                            <div class="col-8">
                                <select name="baoshi_express_remission" id="baoshi_express_remission"
                                        class="form-control" v-model="baoshi_express_remission">
                                    <option value></option>
                                    <option v-for="remission in Remission " :value="remission">@{{ remission }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_workgroup_id"
                                   class="col-2 col-form-label text-right ">事故责任方</label>
                            <div class="col-8">
                                <select name="user_workgroup_id" id="user_workgroup_id" class="form-control"
                                        v-model="userWorkgroupId">
                                    <option value></option>
                                    <option v-for="wrokGroup in userWorkGroup " :value="wrokGroup.id">@{{ wrokGroup.name }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-8 offset-2">
                                <button type="submit" class="btn btn-success form-control" :disabled="!isSubmit">提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('lastScript')
    <script type="text/javascript">
        let crete_vue = new Vue({
                el: '#issue_create_div',
            data: {
                logistic_number_return: @if(old('logistic_number_return'))"{{old('logistic_number_return')}}"
                @else''@endif,
                wms_order_no: @if(old('wms_order_no'))"{{old('wms_order_no')}}"
                @else''@endif,
                second_order_id: @if(old('second_order_id'))"{{old('second_order_id')}}"
                @else''@endif,
                secondOrderNo: @if(old('secondOrderNo'))"{{old('secondOrderNo')}}"
                @else''@endif,
                order_issue_type_id: @if(old('order_issue_type_id'))"{{old('order_issue_type_id')}}"
                @else''@endif,
                owners:{!! $owners !!},
                logistics:{!! $logistic !!},
                types:{!! $types !!},
                userWorkGroup:{!! $userWorkGroup !!},
                rejectedBill: '',// 退回单信息
                order_id: @if(old('order_id')){{old('order_id')}}@else''@endif,
                isSubmit: false,
                // 原始订单信息
                order: {
                    orderno: '',
                    logstic_number: '',
                    address: '',
                    province: '',
                    city: '',
                    district: '',
                    consignee_name: '',
                    consignee_phone: '',
                    carrierid: '',
                    owner_id: @if(old('owner_id')){{old('owner_id')}}@else '' @endif,
                    ownerName: '',
                    order_id: '',
                },
                // 二次订单
                secondOrder: {
                    logistic_id: '', code: '',
                },
                final_status: ['已解决', '已解决', '待退回', '退回中'],
                Remission: ['原单减免', '部分减免', '全部减免'],
                order_issue_type_id: @if(old('order_issue_type_id')){{old('order_issue_type_id')}}@else''@endif,
                finalStatus: @if(old('final_status')){{old('final_status')}}@else''@endif,
                logistic_express_remission: @if(old('logistic_express_remission')){{old('logistic_express_remission')}}@else''@endif,
                baoshi_express_remission: @if(old('baoshi_express_remission')){{old('baoshi_express_remission')}}@else''@endif,
                userWorkgroupId: @if(old('user_workgroup_id')){{old('user_workgroup_id')}}@else''@endif,
            },
            mounted: function () {
                $("#issue_create_div").removeClass('d-none');
                if (this.wms_order_no) {
                    this.checkWMSOrderNo();
                }
                if (this.secondOrderNo) {
                    this.verifySecondOrder();
                }
                if (this.logistic_number_return) {
                    this.logistic_number_return= this.logistic_number_return;
                    this.checkLogisticNumberReturn();
                }
            },
            watch: {
                order_issue_type_id: {
                    handler: function (value) {
                        if (value == null || value == '') {
                            this.isSubmit = false;
                        }
                    },
                    immediate: true
                },
                order:function(value){
                    if(value){

                    }

                },
                logistic_number_return: {
                    handler: function (value) {
                        $("#wms_order_no").attr('disabled', !(value === ''));
                        $("#logistic_number").attr('disabled', !(value === ''));
                    },
                    immediate: true
                },
                wms_order_no: {
                    handler: function (value) {
                        $("#logistic_number_return").attr('disabled', !(value === ''));
                        $("#logistic_number").attr('disabled', !(value === ''));
                    },
                    immediate: true
                },
                secondOrder: function (order) {
                    if (order) {
                        this.second_order_id = order.id;
                    } else {
                        this.second_order_id = '';
                    }
                },
                rejectedBill:function(value){
                    if(value){
                        this.logistic_number_return = value.logistic_number_return;
                    }else{
                        this.logistic_number_return = '';
                    }
                }
            },
            methods: {
                checkLogisticNumberReturn: function () {
// 校验退回单号是否存在及是否存在退回单是否已有对应的问题件
                    if (this.logistic_number_return == null || this.logistic_number_return == '') {
                        return;
                    }
                    let _this = this;
                    let data = {type: 'RejectedBill', id: this.logistic_number_return};
                    axios.post("{{url('apiLocal/order/issue/orderIssueHasCreate')}}", data).then(function (res) {
                        if (res.data.success) {
                            if(res.data.data){
                                if (res.data.data.order) {
                                    _this.order = res.data.data.order;
                                }
                                if (res.data.data.rejectedBill) {
                                    _this.rejectedBill = res.data.data.rejectedBill;
                                }
                            }
                            if(res.data.fail_info){
                                tempTip.setDuration(3000);
                                tempTip.showSuccess(res.data.fail_info);
                            }
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;

                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                    });
                },
                checkWMSOrderNo() {
                    if (this.wms_order_no == '' || this.wms_order_no == null) {
                        return;
                    }
                    let _this = this;
                    let data = {type: 'WMSOrderNo', id: this.wms_order_no};
                    axios.post("{{url('apiLocal/order/issue/orderIssueHasCreate')}}", data).then(function (res) {
                        if (res.data.success) {
                            if (res.data.data.order) {
                                _this.order = res.data.data.order;
                            }
                            if (res.data.data.rejectedBill) {
                                _this.rejectedBill = res.data.data.rejectedBill;
                                if (res.data.data.rejectedBill.items) {
                                    _this.rejectedBillItems = res.data.data.rejectedBill.items;
                                }
                            }
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                    });
                },
                verifySecondOrder: function () {
                    if (this.secondOrderNo == '' || this.secondOrderNo == null) {
                        return;
                    }
                    let _this = this;
                    let data = {type: 'WMSOrderNo', WMSOrderNo: this.secondOrderNo};
                    axios.post("{{url('apiLocal/order/issue/getOrderInfoByWMSOrderNo')}}", data).then(function (res) {
                        if (res.data.success) {
                            _this.secondOrder = res.data.data;
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                    });
                },
            }
        })

    </script>

@endsection