@extends('layouts.app')
@section('title')查询-作业类型@endsection

@section('content')
    <div class="container-fluid card" id="container">
        @if(Session::has('successTip'))
            <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
        @endif
        <table class="table table-hover table-striped text-nowrap card-body mt-2">
            <tr>
                <th>序号</th>
                <th>类型</th>
                <th>单价</th>
                <th>单位</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(method,i) in methods"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                <td>@{{ i+1 }}</td>
                <td>@{{ method.name }}</td>
                <td>@{{ method.unit_price }}</td>
                <td>@{{ method.unit_name }}</td>
                <td>@{{ method.created_at }}</td>
                <td>
                    @can("作业类型-编辑")<a :href="'{{url('maintenance/processMethod')}}/'+method.id+'/edit'"><button class="btn btn-sm btn-outline-info">改</button></a>@endcan
                    @can("作业类型-删除")<button class="btn btn-sm btn-outline-danger" @click="destroy(method.id,i,method.name)">删</button>@endcan
                </td>
            </tr>
        </table>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                methods : [
                    @foreach($methods as $method)
                    {
                        id:"{{$method->id}}",
                        name:"{{$method->name}}",
                        unit_price:"{{$method->unit_price}}",
                        unit_name:"{{$method->unit ? $method->unit->name : ''}}",
                        created_at:"{{$method->created_at}}",
                    },
                    @endforeach
                ],
                selectTr:0
            },
            methods:{
                destroy(id,index,name){
                    window.tempTip.confirm("确定要删除"+name+"吗？",()=>{
                        window.axios.delete("{{url('maintenance/processMethod')}}/"+id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.methods,index);
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("删除"+name+"成功");
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    })
                }
            },
        });
    </script>
@stop