@extends('layouts.app')

@section('content')
    @component("customer.ownerSundryFee.menu")@endcomponent
    @include('shared._messages')
    @include('shared._error')
    <div id="list" class="d-none">
        <div class="container-fluid">
            <div id="form_div"></div>
            <div class="form-inline" id="btn"></div>
            <table class="table table-striped table-sm text-nowrap table-hover" id="table">
                <tr v-for="(owner_sundry_fee_detail,i) in owner_sundry_fee_details"
                    @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                    :class="selectTr===i+1?'focusing' : ''">
                    <td><input class="checkItem" type="checkbox" :value="owner_sundry_fee_detail.id"></td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ owner_sundry_fee_detail.owner.name }}</td>
                    <td>@{{ owner_sundry_fee_detail.created_at }}</td>
                    <td>@{{ owner_sundry_fee_detail.type }}</td>
                    <td>@{{ owner_sundry_fee_detail.fee_explain }}</td>
                    <td>@{{ owner_sundry_fee_detail.fee }}</td>
                    <td>@{{ owner_sundry_fee_detail.remark }}</td>
                    <td>
                        @can('项目管理-杂项费-编辑')
                            <button @click="edit(owner_sundry_fee_detail.id)" type="button"
                                    class="btn btn-outline-primary btn-sm">改
                            </button>

                            <form :action="targetUrl(owner_sundry_fee_detail.id)" method="post"
                                  style="display: inline-block;"
                                  onsubmit="return confirm('您确定要删除吗？');">
                                {{ csrf_field() }}
                                {{ method_field('DELETE') }}
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="far fa-trash-alt"></i> 删
                                </button>
                            </form>
                        @endcan
                    </td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$owner_sundry_fee_details->count()}}
                /{{$owner_sundry_fee_details->total()}}</div>
            {{$owner_sundry_fee_details->appends($paginateParams)->links()}}
        </div>
        <textarea id="clipboardDiv" style="opacity:0"></textarea>
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                owner_sundry_fee_details: [
                    @foreach($owner_sundry_fee_details as $owner_sundry_fee_detail)
                        {!! $owner_sundry_fee_detail !!},
                    @endforeach
                ],
                owners: [@foreach($owners as $owner){name: '{{ $owner->id }}', value: '{{ $owner->name}}'},@endforeach],
                selectTr: 0,
            },
            created() {
            },
            mounted() {
                $('#list').removeClass('d-none');
                let _this = this;
                $(".up").slideUp();
                let data = [
                    [
                        {
                            name: 'owner_id',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                            placeholder: ['货主', '定位或多选货主'],
                            data: _this.owners
                        },
                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                _this.form.init();
                let column = [
                    {name: 'index', value: '序号', neglect: true},
                    {name: 'owner', value: '货主'},
                    {name: 'created_at', value: '日期'},
                    {name: 'type', value: '作业类型'},
                    {name: 'fee_explain', value: '费用描述'},
                    {name: 'fee', value: '收费金额'},
                    {name: 'remark', value: '备注'},
                    {name: 'operation', value: '操作'},
                ];
                new Header({
                    el: "table",
                    name: "owner_sundry_fee_detail",
                    column: column,
                    data: this.owner_sundry_fee_details,
                    restorationColumn: 'addtime',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                edit(id) {
                    location.href = "{{url('customer/ownerSundryFeeDetails')}}/" + id + "/edit";
                },
                targetUrl(id) {
                    return "{{ url('customer/ownerSundryFeeDetails') }}/" + id;
                }
            },
            filters: {},
        });
    </script>
@endsection