@extends("layouts.app")
@section('title','处理工单')
@section("content")
    <div class="container-fluid d-none" id="list">
        <div id="form_div" style="min-width: 2250px;"></div>
        <table class="table table-striped table-md">
            <thead>
            <tr class="text-center">
                <th>序号</th>
                <th>工单编号</th>
                <th>工单等级</th>
                <th>相关类型</th>
                <th>状态</th>
                <th>创建人</th>
                <th>提交时间</th>
                <th>问题描述</th>
                <th>物流跟踪信息</th>
                <th>审核人</th>
                <th>审核时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="text-center">
            <template v-for="(item,i) in workOrders">
                <tr @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                    <td>@{{i+1}}</td>
                    <td>@{{item.id}}</td>
                    <td>
                        <template v-if="item.status === '已处理'">
                            @{{ item.grad }}
                        </template>
                        <template v-else>
                            <span class="badge badge-light" style="opacity: 0.7"  v-if="item.grad === '一般'">@{{ item.grad }}</span>
                            <span class="badge badge-primary" style="opacity: 0.7" v-if="item.grad === '重要'">@{{ item.grad }}</span>
                            <span class="badge badge-warning" style="opacity: 0.7" v-if="item.grad === '紧急'">@{{ item.grad }}</span>
                            <span class="badge badge-danger" style="opacity: 0.7" v-if="item.grad === '重要且紧急'">@{{ item.grad }}</span>
                        </template>
                    </td>
                    <td>@{{item.type ? item.type.name : '' }} - @{{ item.child_type ? item.child_type.name : '' }}</td>
                    <td>
                        @{{ item.status }}
                    </td>
                    <td>@{{ item.creator.name }}</td>
                    <td>@{{ item.created_at }}</td>
                    <td>@{{ item.remark }}</td>
                    <td>
                        <template v-if="item.review_at">
                            <div v-if="item.order && item.order.packages">
                                <template v-for="package in item.order.packages">
                                    <template v-if="package.transfer_status && package.transfer_status.length > 0">
                                        <div v-if="selectOrderPackage === package.id">
                                            <template v-for="transfer in package.transfer_status">
                                                <p>@{{ transfer['accept_time']+':'+transfer['accept_address'] }}</p>
                                            </template>
                                        </div>
                                        <div v-else>
                                            @{{ package.transfer_status[0]['accept_time']+':'+package.transfer_status[0]['accept_address'] }}
                                        </div>
                                        <button class="btn btn-sm btn-outline-primary" v-if="selectOrderPackage !== package.id" @click="selectOrderPackage = package.id">展开</button>
                                        <button class="btn btn-sm btn-outline-primary" v-else @click="selectOrderPackage = null">收起</button>
                                    </template>
                                </template>
                            </div>
                        </template>
                    </td>
                    <td>@{{ item.reviewer ? item.reviewer.name : ''}}</td>
                    <td>@{{ item.review_at }}</td>
                    <td>
                        @can('订单管理-工单处理-审核')
                            <button class="btn btn-sm btn-outline-primary" v-if="item.status !== '已处理'"
                                    @click="reviewWorkOrder(item,i)">审核
                            </button>
                        @endcan()
                    </td>
                </tr>
            </template>
            </tbody>
            {{ $workOrders->withQueryString()->links() }}
        </table>
    </div>
@endsection()

@section("lastScript")
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        let list = new Vue({
            el: "#list",
            data: {
                workOrders: {!! $workOrders->toJson() !!}['data'],
                selectTr: null,
                form:null,
                selectOrderPackage:null,
            },
            mounted() {
                let data = [[
                    {name: 'created_at_start', type: 'time', tip:['工单创建开始日期','时间']},
                    {name: 'created_at_end', type: 'time', tip:['工单创建结束日期','时间']},
                    {name: 'review_at_start', type: 'time', tip:['工单审核开始日期','时间']},
                    {name: 'review_at_end', type: 'time', tip:['工单审核结束日期','时间']},
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                    appendDom: "btn",
                    paginations: [50, 100, 200, 500, 1000, 20],
                })
                this.form.init();
                $("#list").removeClass("d-none");
            },
            created() {
                let self = this;
                $.each(this.workOrders, function (index, workOrder) {
                    if (!workOrder.order) return ;
                    if (!workOrder.order.packages) return ;
                    self.sortOrder(workOrder);
                });
            },
            methods: {
                sortOrder(workOrder){
                    let self = this;
                    if (!workOrder.order) return ;
                    if (!workOrder.order.packages) return ;
                    $.each(workOrder.order.packages,function(i,item){
                        self.sortTransfer(item);
                    })
                },
                sortTransfer(item){
                    if (!("transfer_status"  in item))return ;
                    if (item.transfer_status == null ||  !(item.transfer_status instanceof Array)) return ;
                    item.transfer_status.sort(function (item1, item2) {
                        let date1 = new Date(item1['accept_time']);
                        let date2 = new Date(item2['accept_time']);
                        if (date1 - date2 > 0) return -1;
                        if (date1 - date2 < 0) return 1;
                        return 0;
                    });
                },
                // todo 审核工单
                reviewWorkOrder(item, i) {
                    let url = '{{url('apiLocal/workOrder/review')}}';
                    let data = {id: item.id};
                    window.axios.post(url, data).then(res => {
                        if (res.data.success) {
                            this.$set(this.workOrders, i, res.data.data);
                            this.sortOrder(res.data.data);
                            window.tempTip.showSuccess("审核完成");
                        } else {
                            window.tempTip.show(res.data.message ?  res.data.message : '审核异常');
                        }
                    }).catch(err => {
                        window.tempTip.show(err)
                    })
                },
            },
        });
    </script>
@endsection