@extends('layouts.father')
@section('style')
    <style>
        body{
            position: relative;
        }
        /*.layui-form-item{*/
        /*clear: none!important;*/
        /*}*/

        .info_tr a{
            text-decoration: underline!important;
        }
        .info_tr a:hover{
            color: red!important;
        }
        .layui-btn-warm{
            width: 60px;
            height: 10px;
        }
        #store_order{
            overflow-y: scroll;
            height:200px;
            display: block;
        }
        #store_order::-webkit-scrollbar{
            display:none;
        }
    </style>
@endsection
@section('title', '出库单列表')
@section('body')
    <div class="wrap">
        <div class="x-nav">
      <span class="layui-breadcrumb">
        <a onclick="goindex()">首页</a>
        <a href="#">财务管理</a>
        <a>
          <cite>应收款单列表</cite></a>
      </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
               onclick="location.reload();" title="刷新"><i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
        </div>
        <div class="x-body">
            <form action="" class="layui-form-item layui-form" style="height: 100%;position: relative;width: 100%;">
                {{csrf_field()}}
                <div class="layui-form">
                    <div class="layui-form-item">
                        {{--<div class="buttonIndex" style="margin-left: 15px">
                            <a class="indexAbottonHref" title="新建应付款单"  onclick="x_admin_show('新建应付款单','/admin/receiptAdd')" href="javascript:;">新建应付款单</a>
                        </div>--}}
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="number" value="{{$req['number'] or ''}}" placeholder="请输入应收款单编号" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="relevance" value="{{$req['relevance'] or ''}}" placeholder="请输入关联单据" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <select name="client_id" lay-search>
                                    <option value="">客户名称</option>
                                    @foreach($client as $k => $c)
                                        <option @if(isset($req['client_id']) && $req['client_id']==$k) selected @endif value="{{$k}}">{{$c}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="bus_cate">
                                    <option value="">业务类型</option>
                                    @foreach( $cateArr as $vo)
                                        @if(isset($vo['child']))
                                            <option @if(isset($req['bus_cate']) && $req['bus_cate'] == $vo['id'])) selected @endif value="{{$vo['id']}}">{{$vo['name']}}</option>
                                            @foreach($vo['child'] as $v)
                                                <option @if(isset($req['bus_cate']) && $req['bus_cate'] == $v['id'])) selected @endif value="{{$v['id']}}"> - {{$v['name']}}</option>
                                            @endforeach
                                        @else
                                            <option @if(isset($req['bus_cate']) && $req['bus_cate'] == $vo['id'])) selected @endif value="{{$vo['id']}}">{{$vo['name']}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">审核状态</option>
                                    <option @if(isset($req['status']) && $req['status']=='已审核') selected @endif>已审核</option>
                                    <option @if(isset($req['status']) && $req['status']=='未审核') selected @endif>未审核</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="money_status">
                                    <option value="">应收款状态</option>
                                    @foreach($receiptType as $r)
                                        <option @if(isset($req['money_status']) && $req['money_status']==$r) selected @endif>{{$r}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button class="layui-btn" style="margin: 0" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <div>
                        </div>
                    </div>
                </div>
            </form>
            <form class="layui-form" action="" style="height: 550px">
                <div id="table">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr class="tr_head">
                            <th>序号</th>
                            <th>应收款单编号</th>
                            <th>客户名称</th>
                            <th>关联单据</th>
                            <th>收款类型</th>
                            <th>审核状态</th>
                            <th>应收款</th>
                            <th>剩余应收</th>
                            {{--<th>实收款</th>--}}
                            <th>应收款状态</th>
                            <th>备注</th>
                            <th class="tdEnd">操作</th>
                        </tr>
                        </thead>
                    </table>
                    <table class="layui-table" lay-size="sm" style="margin-bottom: 50px">
                        <tbody id="x-img" style="height: 350px">
                        @foreach($res as $key=>$v)
                            <tr class="info_tr" data-id="{{$v->id}}">
                                <td>{{ $key + 1 }}</td>
                                <td>
                                    <a class="shopIdTd" title="应收款单"  onclick="x_admin_show('应收款单','/admin/receiptAdd?id={{ $v->id }}')" href="javascript:;">{{ $v->rec_num }}</a>
                                </td>
                                <td>
                                    <a href="javascript:;" onclick="x_admin_show('编辑' , '/admin/clientAdd?id={{ $v->client_id }}')">{{ $v->client_name }}</a>
                                </td>
                                <td class="relevance"><a href="javascript:;" onclick="x_admin_show('关联单据' , '/admin/orderDetail/{{ $v->relevance }}')">{{ $v->relevance }}</a></td>
                                <td>{{ $bus_type[$v->bus_cate] or ''}}</td>
                                <td>{{ $v->status }}</td>
                                <td>{{ $v->rec_money }}</td>
                                <td>{{ $v->act_money }}</td>
                                {{--<td>{{ $v->rec_money - $v->act_money }}</td>--}}
                                <td>{{ $v->money_status }}</td>
                                <td>{{ $v->remark }}</td>
                                <td class="tdEnd">
                                    @if( $v->status == '已审核')
                                    <a class="layui-btn layui-btn-xs" onclick="x_admin_show('创建收款单','/admin/gatheringAdd?rid={{ $v->id }}');" href="javascript:;">创建收款单</a>
                                    @endif
                                    <a class="layui-btn layui-btn-warm layui-btn-xs" onclick="x_admin_show('日志详情','/admin/historyInfo/{{$v->rec_num}}')" href="javascript:;">查看日志</a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <div class="page">
                        <div>
                            {{$res->appends($req)->links()}}
                        </div>
                    </div>
                    <div class="layui-btn" id="changeStoreOrderBtn" style="margin-bottom: 10px">收缩</div>
                    <div class="layui-btn" id="remove" style="margin-bottom: 10px">删除选中</div>
                    <div class="layui-btn" id="generate" style="margin-bottom: 10px">生成收款</div>



                </div>{{--列表模式--}}
            </form>
            <div id="store_order" style="display: none">
                {{--       双击订单存放的          --}}
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="select" lay-skin="primary" id="checkAll">
                        </th>
                        <th>序号</th>
                        <th>应收款单编号</th>
                        <th>客户名称</th>
                        <th>关联单据</th>
                        <th>收款类型</th>
                        <th>审核状态</th>
                        <th>应收款</th>
                        <th>剩余应收</th>
                        <th>应收款状态</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>



        </div>
    </div>
    <script>
        layui.use('form', function(){
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();
        });
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6'
                ,range: '~'
            });
        });

        $("#changeStoreOrderBtn").click(function(){
            //伸缩展开 按钮的作用
            if($(this).html() === "收缩"){
                $(this).html("展开")
                $("#store_order").hide()
                $("#x-img").css({
                    height:"500px"
                })
            }else{
                $(this).html("收缩")
                $("#store_order").show()
                $("#x-img").css({
                    height:"350px"
                })
            }

        })



        let trStoreArr =  JSON.parse(window.localStorage.getItem("trStoreArr")) || []//用来存放订单的数组
        if(trStoreArr.length > 0){
            $("#store_order").show()
            $("#x-img").css({
                height:"350px"
            })
        }else{
            $("#x-img").css({
                height:"500px"
            })
        }
        // 临时存放订单 table
        function init() {
            let htmlStr = '' //html字符串
            trStoreArr.forEach((item , index)=>{
                htmlStr += `<tr><td class="checkboxId"><input type="checkbox" name="select" lay-skin="primary" class="labelPrint"></td>`
                htmlStr += `<td>${index + 1}</td>`
                for(let key in item){
                    if(key === 'id'){
                        continue
                    }
                    htmlStr += `<td>${item[key]}</td>`
                }
                htmlStr += `</tr>`
            })
            $("#store_order").find("tbody").html(htmlStr)
            window.localStorage.setItem("trStoreArr" , JSON.stringify(trStoreArr))
        }
        init(); // 初始化


        $("#x-img").find("tr").dblclick(function(){
            //双击保存
            let storeList = $(this).find("td") //订单列表
            let id = $(this).data('id');
            let orderObj = {
                sotreNumber:storeList[1].innerText,//应收款单编号
                customerName : storeList[2].innerText,//客户名称
                relatedDocuments : storeList[3].innerText,//关联单据
                collectionType : storeList[4].innerText,//收款类型
                aditStatus: storeList[5].innerText, //审核状态
                receivables : storeList[6].innerText, //应收款
                PaidIn : storeList[7].innerText,//实收款
                receivablesStatus:storeList[8].innerText,//应收款状态
                id:id,//应收款id
            }

            if(orderObj.aditStatus != '已审核') {
                layer.alert("应收款单的未审核")
                return;
            }
            if(trStoreArr.length !== 0){

                if(trStoreArr[0].customerName !== orderObj.customerName) {
                    layer.alert("应收款单的客户名称不一致")
                    return;
                }
                if(trStoreArr[0].collectionType !== orderObj.collectionType) {
                    layer.alert("应收款单的收款类型不一致")
                    return;
                }
                let result = true //默认可以添加
                trStoreArr.forEach(item=>{
                    if(item.sotreNumber === orderObj.sotreNumber){
                        result = false
                        return;
                    }
                })
                if(!result){
                    layer.alert("请勿重复添加相同的订单")
                    return;
                }
            }

            trStoreArr.push(orderObj)
            $("#x-img").css({
                height:"350px"
            })
            $("#changeStoreOrderBtn").html("收缩")
            $("#store_order").slideDown()

            init();

        })

        $("#remove").click(function(){
            let indexArr = []
            $("#store_order").find(".checkboxId input[type=checkbox]").each(function(index, el){
                if($(this).prop("checked")){
                    indexArr.push(index)
                }
            })
            indexArr.forEach(item=>{
                delete trStoreArr[item]
            })
            trStoreArr = trStoreArr.filter(item =>{
                return typeof item !== 'undefined'
            })

            init(); // 初始化

            if(trStoreArr.length === 0){
                new Promise(res =>{
                    $("#store_order").hide()
                    res()
                }).then(res =>{
                    $("#changeStoreOrderBtn").html("展开")
                    $("#x-img").css({
                        height:"500px"
                    })
                })

                return
            }
        })

        $("#store_order").find(".checkboxId input[type=checkbox]").on("click",function(){ //小按钮监听全选是否选中
            if($("#store_order").find(".checkboxId input[type=checkbox]:checked").length
                ===
                $("#store_order").find(".checkboxId input[type=checkbox]").length){
                //这就说明需要全选了
                $("#checkAll").prop("checked",true)
            }else{
                $("#checkAll").prop("checked",false)
            }
        })

        $("#checkAll").click(function () {
            //全选
            let checked = $(this).prop("checked")
            $("#store_order").find(".checkboxId input[type=checkbox]").prop("checked" , checked)
        })

        $("#generate").click(function () {
            //生成收款
            let idArr = [] //存放 获取的id 的数组
            $("#store_order").find(".checkboxId input[type=checkbox]").each(function(index, el){
                if($(this).prop("checked")){
                    idArr.push(trStoreArr[index].id)
                    delete trStoreArr[index]
                }
            })
            trStoreArr = trStoreArr.filter(item =>{
                return item !== undefined
            })

            let idStr = idArr.join(",") // 将 存放 id 的数组 转化为 带逗号的字符串
            window.localStorage.getItem("trStoreArr",trStoreArr)
            init()
            x_admin_show('创建收款单','/admin/gatheringAdd?rid='+idStr);
        })


    </script>
    <script type="text/javascript" src="/js/tableContentRoll.js"></script>
    <script type="text/javascript" src="/js/outboundPrint.js"></script>
    <link rel="stylesheet" href="/css/tableContentRoll.css">
@endsection