@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;*/
        /*}*/

        .flexWarp {
            display: flex;
            align-items: center;
        }

        .flexWarp > div {
            flex: 1;
        }

        .flexWarper {
            display: flex;
            justify-content: space-around;
        }

        .layui-table thead th,
        .layui-table tbody td {
            text-align: center;
        }

        #x-img2 {
            width: 100%;
            overflow-y: scroll;
            display: block;
        }

        #x-img2::-webkit-scrollbar {
            display: none;
        }

        .wamp {
            margin-top: 20px;
            width: 200px;
            display: flex;
            justify-content: space-evenly;
        }
    </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"
               href='/admin/payableList' title="刷新"><i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
        </div>
        <div class="wamp">
            <a href="/admin/payableList?date=week">最近一周</a>
            <a href="/admin/payableList?date=month">最近三月</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="layui-input-inline">
                            <select name="supplier_id" lay-search class="layui-select" style="width: 100%;height: 30px">
                                <option value="">请选择供应商</option>
                                @foreach($data['supplier'] as $key => $vo)
                                    <option @if(isset($req['supplier_id']) && $req['supplier_id'] == $key) selected
                                            @endif value="{{$key}}">{{$vo}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="status" class="layui-select" style="width: 100%;height: 30px">
                                <option value="">请选择付款状态</option>
                                <option @if(isset($req['status']) && $req['status'] == '未审核') selected @endif value="未审核">未审核</option>
                                <option @if(isset($req['status']) && $req['status'] == '已审核') selected @endif value="已审核">已审核</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="number" value="{{$req['number'] or ''}}" class="layui-input" placeholder="付款单编号" style="width: 180px;">
                        </div>

                        <div class="layui-inline">
                            <button class="layui-btn" style="margin: 0" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </div>
                </div>
            </form>
            <table class="layui-table" lay-size="sm">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>应付单编号</th>
                    <th>审核状态</th>
                    <th>供应商</th>
                    <th>应付总额</th>
                    <th>已付金额</th>
                    <th>剩余应付</th>
                    <th>关联单据</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
            <div id="x-img2" style="height: 300px;">
                <table class="layui-table" lay-size="sm">
                    <tbody>
                    @foreach($list as $key => $vo)
                        <tr class="info_tr" data-id="{{$vo->id}}">
                            <td>{{$key+1}}</td>
                            <td><a title="应付款单"  onclick="x_admin_show('应付款单','/admin/payableInfo?id={{ $vo->id }}')" href="javascript:;">{{ $vo->payable_num }}</a></td>
                            <td>{{$vo->status}}</td>
                            <td class="supplier">{{$vo->supplier}}</td>
                            <td>{{$vo->rec_money}}</td>
                            <td>{{$vo->act_money}}</td>
                            <td>{{round($vo->rec_money - $vo->act_money,2)}}</td>
                            <td>{{$vo->relevance}}</td>
                            <td>{{$vo->created_at}}</td>
                            <td>
                                @if( $vo->status == '已审核')
                                    <a class="layui-btn layui-btn-xs" onclick="x_admin_show('创建付款单','/admin/paymentNewInfo?pid={{ $vo->id }}');" href="javascript:;">创建付款单</a>
                                @endif
                                <a class="layui-btn layui-btn-warm layui-btn-xs" onclick="x_admin_show('日志详情','/admin/historyInfo/{{$vo->payable_num}}')" href="javascript:;">查看日志</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <div class="page">
                <div>
                    {{$list->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 id="store_order" style="display: none">
                {{-- 双击订单存放的          --}}
                <table class="layui-table" lay-size="sm">
                    <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>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        layui.use('form', () => {
            var form = layui.form
        })
        layui.use('form', function () {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6',
                range: '~'
            });
        });

        function aorflase() {
            let a = ''
            return (a === false)
        }

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

        })
        let trStoreArr = JSON.parse(window.localStorage.getItem("storage_payable")) || [] //用来存放订单的数组
        if (trStoreArr.length > 0) {
            $("#store_order").show()
            $("#x-img").css({
                height: "350px"
            })
        } else {
            $("#x-img").css({
                height: "500px"
            })
        }

        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("storage_payable", JSON.stringify(trStoreArr))
        }

        init();
        $("#x-img2").find("tr").dblclick(function () {
            //双击保存
            let storeList = $(this).find("td") //订单列表
            let id = $(this).data("id");
            let orderObj = {
                payable_num: storeList[1].innerText, // 应付单编号
                supplier: storeList[3].innerText, // 供应商
                rec_money: storeList[4].innerText, // 应付总额
                act_money: storeList[5].innerText, // 已付金额
                sy_money: storeList[6].innerText, // 剩余应付
                relevance: storeList[7].innerText, // 关联单据
                id,
            }

            if (storeList[2].innerText == '未审核') {
                layer.alert("未审核的单据无法添加")
                return;
            }

            if(trStoreArr.length>0){
              if(trStoreArr[0].supplier !== orderObj.supplier){
                layer.alert("不同供应商无法进行添加")
                return;
              }
            }
            let result = true //默认可以添加
            trStoreArr.forEach(item => {
                if (item.payable_num === orderObj.payable_num) {
                    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
            }
        })


        $("#checkAll").click(function () {
            //全选
            let checked = $(this).prop("checked")
            $("#store_order").find(".checkboxId input[type=checkbox]").prop("checked", checked)
        })
        $("#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)
            }
        })

        $("#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.removeItem("storage_payable") // 清空
            init()
            x_admin_show('创建付款单','/admin/paymentNewInfo?pid='+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