@extends('layouts.app')
@section('title')仓储-计费模型@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.priceModel.storage.menu')@endcomponent
    </div>
    <div class="container-fluid mt-2" 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">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>计费类型</th>
                <th>用仓类型</th>
                <th>最低起租面积</th>
                <th>项目</th>
                <th>单价</th>
                <th>减免类型</th>
                <th>减免值</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(model,i) in models"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                <td>@{{ i+1 }}</td>
                <td>@{{ model.name }}</td>
                <td>@{{ model.counting_type }}</td>
                <td>@{{ model.using_type }}</td>
                <td>@{{ model.minimum_area }}</td>
                <td>
                    <small v-for="owner in model.owners">@{{ owner.name }}<br></small>
                </td>
                <td>@{{ model.price }}/@{{ model.unit_name }}/@{{ model.time_unit_name }}</td>
                <td>@{{ model.discount_type }}</td>
                <td>@{{ model.discount_value }}</td>
                <td>@{{ model.created_at }}</td>
                <td>
                    @can("计费模型-仓储-编辑")<a :href="'{{url('maintenance/priceModel/storage')}}/'+model.id+'/edit'"><button class="btn btn-sm btn-outline-info">改</button></a>@endcan
                    @can("计费模型-仓储-删除")<button class="btn btn-sm btn-outline-danger" @click="destroy(model.id,i)">删</button>@endcan
                </td>
            </tr>
        </table>
        {{$models->links()}}
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                models : [
                    @foreach($models as $model)
                    {
                        id : "{{$model->id}}",
                        name : "{{$model->name}}",
                        counting_type : "{{$model->counting_type}}",
                        using_type : "{{$model->using_type}}",
                        minimum_area : "{{$model->minimum_area}}",
                        price : "{{$model->price}}",
                        discount_type : "{{$model->discount_type}}",
                        discount_value : "{{$model->discount_value}}",
                        unit_name : "{{$model->unit ? $model->unit->name : ''}}",
                        time_unit_name : "{{$model->timeUnit ? $model->timeUnit->name : ''}}",
                        created_at : "{{$model->created_at}}",
                        owners:{!! $model->owners !!},
                    },
                    @endforeach
                ],
                selectTr:0
            },
            methods:{
                destroy(id,index){
                    window.tempTip.confirm("确定要删除该仓储计费吗？",()=>{
                        window.axios.delete("{{url('maintenance/priceModel/storage')}}/"+id)
                            .then(res=>{
                                if (res.data.success){
                                    this.$delete(this.models,index);
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("删除成功");
                                    return;
                                }
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    })
                }
            },
        });
    </script>
@stop