@extends('layouts.home')
@section('title')
@section('style')
    <style>
        .x-body{
            min-height: 500px;
        }
        .input_line{
            border-bottom: 1px solid #000;
            margin-left: 4px;
        }
        .input_line input{
            border:none;
        }
        .x-body .label_wx{
            text-align: left;
        }
        .x-body .layui-form-item .wx_box_input {
                display: block;
                float: none;
                left: -3px;
                width: auto;
                margin: 0 0 0px 96px!important;
            }
        .layui-inpu{
            width: 90% !important;
            margin-left: 20px!important;
            height: 33px!important;
            font-size: 16px!important;
            background: #fff;
            padding-bottom: 7px;
        }
        .tab-title-color{
            color: #a8a8a8;
        }
        .tab-title-color-on{
            color: #000000;
            font-weight: bold;
        }
        .total p{
            color: #000;
        }
        .show-data{
            display: flex;
            align-items: flex-start;
            padding: 4% 0;
            border-bottom: 0.5px solid #000000;
        }
        #con{
            margin-top: 20px;
        }
        .show-data-title{
            width: 30%;
        }
        .show-number{
            color: #2aa8fd;
        }
        .show-data-two-css{
            display: flex;
            align-items: flex-start;
            padding: 5% 0;
            border-bottom: 3px solid #f2f2f0;
        }
        .show-data-two{
            padding: 5% 2%;
            background-color: #f2f2f2;
            margin: 5% 0;
        }
        .show-data-two-top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 3%;
        }
        .show-data-two-color{
            color: #a8a8a8;
            width: 80px;
        }
        .show-data-two-flex{
            display: flex;
        }
        .mobile-flow-bottom{
            width: 100%;
            position: fixed;
            bottom: 0;
            margin-left: -5%;
        }
    </style>
@endsection
@section('body')
    <div class="x-body">
        <div style="height:40px">
            <p style="color: black;font-size:17px;display: flex;justify-content: space-between">
                <span></span>
                <span>流转单</span>
                <span></span>
            </p>
        </div>
        <div>
            <div id="wrap" style="font-size: 14px">
                <div id="tit" style="text-align: center;font-size: 15px">
                    <span class="select tab-title-color" style="margin-right: 20%">流转单信息</span>
                    <span class="tab-title-color">商品详情</span>
                </div>
                <ul id="con">
                    <li class="show">
                        <div class="show-data">
                            <div class="show-data-title">流转单单号</div>
                            <div class="show-data-content show-number">{{$flowcargo->flowcargo_num}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">调入仓库</div>
                            <div class="show-data-content">{{$flowcargo->flowcargo_in}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">调出仓库</div>
                            <div class="show-data-content">{{$flowcargo->flowcargo_out}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">备注</div>
                            <div class="show-data-content">{{$flowcargo->remark}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">状态</div>
                            <div class="show-data-content">{{$flowcargo->status}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">收货状态</div>
                            <div class="show-data-content">{{$flowcargo->deliver}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">创建人</div>
                            <div class="show-data-content">{{$flowcargo->creater}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">创建时间</div>
                            <div class="show-data-content">{{$flowcargo->created_at}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">经办人</div>
                            <div class="show-data-content">{{urldecode($flowcargo->arranger)}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">经办时间</div>
                            <div class="show-data-content">{{$flowcargo->affirm_time}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">收货人</div>
                            <div class="show-data-content">{{urldecode($flowcargo->deliver_people)}}</div>
                        </div>
                        <div class="show-data-two-css">
                            <div class="show-data-title">收货时间</div>
                            <div class="show-data-content">{{$flowcargo->deliver_time}}</div>
                        </div>
                        <div class="mobile-flow-bottom">
                            <a onclick="do_mobiles({{$flowcargo->id}})" href="javascript:void(0)"><div class="layui-btn layui-btn-warm layui-btn-fluid" style="margin: 0;height: 40px">收货</div></a>
                        </div>
                    </li>
                    <li>
                        <div style="margin-bottom: 100px">
                            @foreach($flowcargo_detail as $f)
                                <div class="show-data-two">
                                    <div class="show-data-two-top">
                                        <div class="show-data-two-name show-data-two-flex">
                                            <div class="show-data-two-color">物品名称</div>
                                            <span>{{$f['name']}}</span>
                                        </div>
                                        <div class="show-data-two-num show-data-two-flex">
                                            <div class="show-data-two-color">数量</div>
                                            <span>{{$f['num']}}</span>
                                        </div>
                                    </div>
                                    <div class="show-data-two-bottom show-data-two-flex">
                                        <div class="show-data-two-color">备注</div>
                                        <span>{{$f['remark']}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mobile-flow-bottom">
                            <a onclick="do_mobile({{$flowcargo->id}})" href="javascript:void(0)"><div class="layui-btn layui-btn-warm layui-btn-fluid" style="margin: 0;height: 40px">立即执行</div></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        {{--<form class="layui-form" action="/home/order" id="buyGoods" method="post" enctype="multipart/form-data" style="">--}}
            {{--<div class="form_box" style="position: relative;height:320px;">--}}
            {{--</div>--}}
        {{--</form>--}}
    </div>
    <script type="text/javascript" src="/js/picker/city.js"></script>
    <script type="text/javascript" src="/js/picker/picker.min.js"></script>
    <script type="text/javascript" src="/js/picker/index.js"></script>
    <script>
        function mytab() {
            $('#tit span').eq(0).addClass('tab-title-color-on')
            $('#con li').eq(0).show().siblings().hide();
            $('#tit span').click(function() {
                var i = $(this).index();//下标第一种写法
                //var i = $('tit').index(this);//下标第二种写法
                $(this).addClass('select').siblings().removeClass('select');
                $(this).addClass('tab-title-color-on').siblings().removeClass('tab-title-color-on');
                $('#con li').eq(i).show().siblings().hide();
            });
        }
        mytab()
        layui.use(['layer','form'], function(){
            $ = layui.jquery;//jquery
            form = layui.form;
            form.verify({
                noChinese: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(/[\u4E00-\u9FA5]/.test(value)){
                        return '批次或卷号请输入数字或英文';
                    }
                }
            });
        });
        function do_mobile(id){
            layer.confirm('确认要执行吗？',function(index){
                location.href = '/home/mobileUrl/'+id;
            });
        }
        function do_mobiles(id){
            layer.confirm('确认要执行吗？',function(index){
                location.href = '/home/mobileUrls/'+id;
            });
        }
    </script>
@endsection