@extends('layouts.app')

@section('title','卸货回执单')


@section('content')
    <div id="nav2">
        @component('personnel.menu')@endcomponent
        @component('personnel.discharge.menu')@endcomponent
        @component('personnel.discharge.task.menu')@endcomponent
    </div>
    <div class="card card-body container-fluid text-nowrap d-none mt-5" id="list">
        <div class="row mb-2">
            <div class="col-sm-12 h3 text-center">回执单</div>
        </div>

        <div class="row h4">
            <div class="col-sm-3">客户名称：<span class="text-bold ">@{{ task.owner ? task.owner.name : '' }}</span></div>
            <div class="col-sm-3">作业类型：<span class="text-break ">@{{ task.type }}</span></div>
            <div class="col-sm-3">入库单号：<span class="text-bold ">@{{ task.numbers }}</span></div>
        </div>

        <div class="row h4">
            <div class="col-sm-3">数量：@{{ task.expenditure_amount }}</div>
            <div class="col-sm-3">单位：@{{ task.expenditure_unit }}</div>
            <div class="col-sm-3">单价：@{{ task.expenditure_unit_price }}</div>
            <div class="col-sm-3">费用：@{{ task.expenditure_total_cost }}</div>
        </div>

        <div class="row h4">
            <div class="col-sm-3">装卸队：<span class="text-bold ">@{{ task.facilitator ? task.facilitator.name : '' }}</span></div>
        </div>
        <div class="row h4">
            <div class="col-sm-3 offset-sm-8">签名：</div>
        </div>
        <div class="row h4" >
            <div class="col-sm-3 offset-sm-8">日期：</div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let list = new Vue({
            el:'#list',
            data:{
                task:{!! $task->toJson() !!},
            },
            mounted() {
                $('#list').removeClass('d-none');
            }
        });
    </script>
@endsection
