@extends('layouts.app')
@section('title','单据详情')

@section('content')
<span id="nav2">
    @component('process.menu')
    <li class="nav-item">
        <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('process',1)}">单据</a>
    </li>
    @endcomponent
</span>
<div id="body" class="d-none  card card-body container-fluid text-nowrap">
    <div class="row">
        <div class="col-sm-3">
            <label class="text-muted col-3" for="code">任务号：</label>
            <span class="col-8 offset-1" id="code">@{{ process.code }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-muted col-3" for="owner_name">客户名称：</label>
            <span id="owner_name" class="col-8 offset-1">@{{ process.owner_name }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-muted col-3" for="status">状态：</label>
            <span id="status" class="col-8 offset-1">@{{ process.status }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-muted col-3" for="created_at">建单日期：</label>
            <span id="created_at" class="col-8 offset-1">@{{ process.created_at }}</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <label class="text-primary col-3" for="process_method_name">加工类型：</label>
            <span id="process_method_name" class="col-8 offset-1 text-danger font-weight-bold">@{{ process.process_method_name }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-primary col-3" for="amount">预期数量：</label>
            <span id="amount" class="col-8 offset-1">@{{ process.amount }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-primary col-3" for="completed_amount">完成数量：</label>
            <span id="completed_amount" class="col-8 offset-1  text-dark font-weight-bold">@{{ process.completed_amount }}</span>
        </div>
        <div class="col-sm-3">
            <label class="text-primary col-3" for="unit_price">单价：</label>
            <span id="unit_price" class="col-8 offset-1">@{{ process.unit_price }}</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12  ">
            <label class="col-3 text-dark" for="remark">备注：</label>
            <span id="remark" class="col-10 offset-1" style="white-space: normal;">@{{ process.remark }}</span>
        </div>
    </div>
    <div class="col-sm row  w-100" >
        <table class="table table-sm table-bordered table-bordered w-100" style="background-color: #efe3d9;">
            <tr>
                <th>类型</th>
                <th>单据号<span class="badge badge-sm badge-pill bg-warning small">原料单</span></th>
                <th>数量</th>
                <th>商品条码</th>
                <th>商品名称</th>
            </tr>
            <tr v-for="content in process.processes_contents" v-if="content.type=='原料单'">
                <td>@{{ content.bill_type }}</td>
                <td>@{{ content.wms_code }}</td>
                <td>@{{ content.amount }}</td>
                <td>
                    <span v-if="content.sign_commodity_barcode_mark">@{{ content.sign_commodity_barcode_mark }}</span>
                    <ul class="p-0 m-0 list-unstyled list-inline" v-if="content.commodity && !content.sign_commodity_barcode_mark">
                        <li v-for="barcode in content.commodity.barcodes"><small style="white-space: normal">@{{ barcode.code }}</small></li>
                    </ul>
                </td>
                <td class="text-muted tooltipTarget">
                    <div style="white-space: normal">@{{ content.sign_commodity_name_mark?content.sign_commodity_name_mark:content.commodity_name }}</div></td>
            </tr>
        </table>
        <table class="table table-sm table-bordered table-bordered w-100" style="background-color: #ccd7dc;">
            <tr>
                <th>类型</th>
                <th>单据号<span class="badge badge-sm bg-warning small">成品单</span></th>
                <th>数量</th>
                <th>商品条码</th>
                <th>商品名称</th>
            </tr>
            <tr v-for="content in process.processes_contents" v-if="content.type=='成品单'">
                <td>@{{ content.bill_type }}</td>
                <td>@{{ content.wms_code }}</td>
                <td>@{{ content.amount }}</td>
                <td>
                    <span v-if="content.sign_commodity_barcode_mark">@{{ content.sign_commodity_barcode_mark }}</span>
                    <ul class="p-0 m-0 list-unstyled list-inline" v-if="content.commodity && !content.sign_commodity_barcode_mark">
                        <li v-for="barcode in content.commodity.barcodes"><small style="white-space: normal">@{{ barcode.code }}</small></li>
                    </ul>
                </td>
                <td class="text-muted tooltipTarget">
                    <div style="white-space: normal">@{{ content.sign_commodity_name_mark?content.sign_commodity_name_mark:content.commodity_name }}</div></td>
            </tr>
        </table>
    </div>
    <div class="col  row">
        <label class="col-2 text-dark" for="tutorials">教程：</label>
        <span class="col-8  font-weight-bold" v-if="process.tutorials.length<1">暂无</span>
        <div v-else id="tutorials" class="col-8  text-muted" style="white-space: normal">
            <b @click="tutorialShow(tutorial.id)" style="cursor: pointer;text-decoration:underline" class="text-primary" v-for="tutorial in process.tutorials">@{{ tutorial.name }}<br></b>
        </div>
    </div>
</div>
@stop

@section('lastScript')
    <script>
        new Vue({
            el:"#body",
            data:{
                process:{!! $process !!},
            },
            mounted:function(){
                $('#body').removeClass('d-none');
            },
            methods:{
                tutorialShow(id){
                    window.open('{{url('maintenance/tutorial')}}/'+id);
                }
            },
        });
    </script>
@stop