@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;
    }
</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/supplierClearList' title="刷新"><i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
    </div>
    <div class="x-body">
        <from action="" class="layui-form-item flexWarp layui-form" style="padding: 0 20px">
            <div class="layui-input-inline">
                <select name="supplier" lay-verify="required" lay-filter="supplier" lay-search class="layui-select" style="width: 100%;height: 30px">
                    <option value="">请选择供应商</option>
                    @foreach($data['supplier'] as $k=>$vo)
                    <option @if(isset($req['supplier']) && $req['supplier'] == $k) selected @endif value="{{$k}}">{{$k}}</option>
                    @endforeach
                </select>
            </div>
            <div class="layui-input-inline flexWarper">
                <label class="layui-form-label" style="width: 40%;text-align: center">预付款金额:</label>
                <input type="text" class="layui-input " value="{{$data['yck'] or ''}}" readonly style="width: 46%">
            </div>
            <div class="layui-input-inline flexWarper">
                <label class="layui-form-label" style="width: 40%;text-align: center">入库未对账金额:</label>
                <input type="text" class="layui-input" value="" readonly style="width: 46%">
            </div>
            <div class="layui-input-inline flexWarper">
                <label class="layui-form-label" style="width: 40%;text-align: center">应付金额:</label>
                <input type="text" class="layui-input" value="{{$data['sy_money'] or ''}}" readonly style="width: 46%">
            </div>
            <div class="layui-input-inline flexWarper">
                <label class="layui-form-label" style="width: 40%;text-align: center">未付金额:</label>
                <input type="text" class="layui-input" value="{{$data['wf_money'] or ''}}" readonly style="width: 46%">
            </div>
            <div style="text-align: center">
                <a  class="layui-btn" onclick="x_admin_show('应付款单','/admin/payableList{{ isset($req['supplier']) ? "?supplier_id=".($data['supplier'][$req['supplier']]) : "" }}')"  style="margin: 0">前往处理改供应商应付</a>
            </div>
        </from>
    <form class="layui-form layui-col-md12 x-so table-x-img" action="">
        <input type="button" value="入库对账" onclick="putOrOut('入库')" class="layui-btn ">
        <input type="button" value="出库对账" onclick="putOrOut('出库')" class="layui-btn ">
        <div style="margin-top: 10px"></div>
        <div class="put">
            <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>
                    <th>仓库</th>
                    <th>关联单据</th>
                </tr>
                </thead>
            </table>
            <div id="x-img2" style="height: 300px;">
                <table class="layui-table putTable clickTrParent" lay-size="sm">
                    <tbody>
                    @if(!empty($list['in']))
                    @foreach($list['in'] as $key => $vo)
                        <tr class="info_tr" data-id="{{$vo->id}}">
                            <td></td>
                            <td>{{$key+1}}</td>
                            <td class="supplier">{{$vo->supplier}}</td>
                            <td>{{$vo->godown_num}}</td>
                            <td>{{$vo->name}}</td>
                            <td>{{$vo->number}}</td>
                            <td>{{$vo->godown_time}}</td>
                            <td>{{$vo->num}}</td>
                            <td>{{$vo->hx}}</td>
                            <td>{{round($vo->num - $vo->hx,2)}}</td>
                            <td>{{$vo->warehouse}}</td>
                            <td>{{$vo->relevance}}</td>
                        </tr>
                    @endforeach
                    @endif
                    </tbody>
                </table>
            </div>

            @if(!empty($list['in']))
                <div class="page">
                    <div>
                        {{$list['in']->appends($req)->links()}}
                    </div>
                </div>
            @endif

        </div>
        <div class="out" style="display: none">
            <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>
                    <th>仓库</th>
                    <th>关联单据</th>
                </tr>
                </thead>
            </table>
            <div id="x-img2" style="height: 300px;">
                <table class="layui-table outTable clickTrParent" lay-size="sm">
                    <tbody>
                    @if(!empty($list['out']))
                    @foreach($list['out'] as $key => $vo)
                        <tr class="info_tr" data-id="{{$vo->id}}">
                            <td></td>
                            <td>{{$key+1}}</td>
                            <td class="supplier">{{$vo->supplier}}</td>
                            <td>{{$vo->out_num}}</td>
                            <td>{{$vo->name}}</td>
                            <td>{{$vo->number}}</td>
                            <td>{{$vo->out_time}}</td>
                            <td>{{$vo->num}}</td>
                            <td>{{$vo->hx}}</td>
                            <td>{{round($vo->num - $vo->hx,2)}}</td>
                            <td>{{$vo->warehouse}}</td>
                            <td>{{$vo->relevance}}</td>
                        </tr>
                    @endforeach
                    @endif
                    </tbody>
                </table>
            </div>

            @if(!empty($list['out']))
                <div class="page">
                    <div>
                        {{$list['out']->appends($req)->links()}}
                    </div>
                </div>
            @endif

        </div>
    </form>
    <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 class="put">
        <div id="store_order" style="display: none " class="store_order">
            {{-- 双击订单存放的          --}}
            <table class="layui-table" lay-size="sm">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="select" lay-skin="primary" class="checkAll">
                        </th>
                        <th>序号</th>
                        <th>供应商</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 class="out">
        <div id="store_order2" style="display: none" class="store_order" >
            {{-- 双击订单存放的          --}}
            <table class="layui-table" lay-size="sm">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="select" lay-skin="primary" class="checkAll">
                    </th>
                    <th>序号</th>
                    <th>供应商</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>
</div>
<script>
    layui.use(['form'], function() {
        var form = layui.form;
        form.on('select(supplier)', function(data){
            location.href="/admin/supplierClearList?supplier="+data.value;
        });
    });


    function resutlHidden (){
        // true =>  入库表格显示   false => 出库表格显示
        return $(($("table:not(:hidden)")[1])).attr('class').includes('putTable')
    }


    function getTdArray(){
        const flag = resutlHidden();
         const tdArray = (flag ? JSON.parse(window.localStorage.getItem("put_supplier")):JSON.parse(window.localStorage.getItem("out_supplier"))) || [];
         return tdArray

    }

    let flags = resutlHidden()
    function putOrOut(type){ // 决定显示的表格
        if(type === "入库"){
            $(".put").show();
            $('.out').hide();

        }else{
            $('.out').show();
            $('.put').hide();
        }
        flags = resutlHidden()
        const tdArray = getTdArray()
        init(tdArray)
        if(!flags){
            $("#store_order2").find('.checkboxId input[type=checkbox]').on("click", function() {
                if ($("#store_order2").find(".checkboxId input[type=checkbox]:checked").length ===
                    $("#store_order2").find(".checkboxId input[type=checkbox]").length) {
                    $(this).parents('table').find(".checkAll").prop('checked', true)
                } else {
                    $(this).parents('table').find(".checkAll").prop('checked', false)
                }
            })
        }
    }
    $(".clickTrParent").find('tr').dblclick(function(e){
        e = e || window.event;
        const flag = resutlHidden(); // flag 去决定内存中存储哪一个
        const tdArray = getTdArray()
        const id = $(this).data('id'); // 获取 存储在 tr中的 id
        const tdList = $(this).find('td');
        const supplier = tdList[2].innerText; // 供应商
        const number = tdList[3].innerText; // 入库单编号
        const produceName = tdList[4].innerText; //  产品名称
        const atricleNumber = tdList[5].innerText; // 货号
        const wareHouseEntryTime = tdList[6].innerText;//入库时间
        const count = tdList[7].innerText; // 数量
        const cancelAfterVerificationNumber = tdList[8].innerText;//核销数量
        const numberRemaining = tdList[9].innerText;//剩余数量
        const warehouse = tdList[10].innerText;//仓库
        const associatedDocuments = tdList[11].innerText; // 关联单据
        const orderObj = {
            id,
            supplier,
            number,
            produceName,
            atricleNumber,
            wareHouseEntryTime,
            count,
            cancelAfterVerificationNumber,
            numberRemaining,
            warehouse,
            associatedDocuments
        }
        if(tdArray.length > 0){
          if(tdArray[0].supplier !== orderObj.supplier){
            layer.alert("请勿添加不同的供应商")
            return
          }
        }


      let result = true //默认可以添加
        tdArray.forEach(item => {
            if (item.id === orderObj.id) {
                result = false

            }
        })
        if (!result) {
            layer.alert("请勿重复添加相同的单据")
            return;
        }
        tdArray.push(orderObj);
        $("#changeStoreOrderBtn").html("收缩")
        flag ? window.localStorage.setItem("put_supplier" , JSON.stringify(tdArray)) : window.localStorage.setItem("out_supplier" , JSON.stringify(tdArray))
        init(tdArray)
    })

    function init(array){
        let html = ""
        const flag = resutlHidden()
        array.forEach(((item,index) =>{
            html +=`<tr><td class="checkboxId"><input type="checkbox" name="select" lay-skin="primary" class="labelPrint"></td>`
            html += `<td>${index+1}</td>`
            for(const key in item){
                if(key === 'id'){
                    continue // 遇到id就跳过这次循环
                }
                html += `<td>${item[key]}</td>`
            }
            html += `</tr>`
        }))

        const domNode = flag ? $("#store_order").find('tbody') : $("#store_order2").find('tbody')
        domNode.html(html)
        domNode.parents(".store_order").show()
    }


    const tdArray = getTdArray()
    if(tdArray.length > 0){
        init(tdArray)
    }

    $("#changeStoreOrderBtn").click(function(){ //收缩按钮
        const flag = resutlHidden()
        const domNode = flag ? $("#store_order") : $("#store_order2")
        if ($(this).html() === "收缩") {
            $(this).html("展开")
            domNode.hide()
              $("#x-img2").css({
                height:"400px"
              })
            $(".table-x-img").css({
                height: "500px"
            })
        } else {
            $(this).html("收缩")
            domNode.show()
             $("#x-img2").css({
               height:"250px"
             })
            $(".table-x-img").css({
                height: "350px"
            })
        }
    })



    $(".checkAll").click(function() {
        //全选
        let checked = $(this).prop("checked")
        const flag = resutlHidden()
        const domNode = flag ? $("#store_order") : $("#store_order2")
        domNode.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) {
            $(this).parents('table').find(".checkAll").prop('checked', true)
        } else {
            $(this).parents('table').find(".checkAll").prop('checked', false)
        }
    })


$("#remove").click(function() {
        let trStoreArr = getTdArray()
        let indexArr = []
        const flag = resutlHidden()
        const domNode = flag ? $("#store_order") : $("#store_order2")
        domNode.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(trStoreArr); // 初始化
        flag ? window.localStorage.setItem("put_supplier" , JSON.stringify(trStoreArr)) : window.localStorage.setItem("out_supplier" , JSON.stringify(trStoreArr))

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


        }
})

$("#generate").click(function () {
        //生成付款
        let idArr = [] //存放 获取的id 的数组
        let trStoreArr = getTdArray()
        const flag = resutlHidden()
        const domNode = flag ? $("#store_order") : $("#store_order2")
        domNode.find(".checkboxId input[type=checkbox]").each(function(index, el){
            if($(this).prop("checked")){
                idArr.push(trStoreArr[index].id)
                delete trStoreArr[index]
            }
        })

        if(idArr.length == 0){
            layer.alert(flag ? "请勾选入库单编码" : "请勾选出库单编码")
            return;
        }

        trStoreArr = trStoreArr.filter(item =>{
            return item !== undefined
        })

        let idStr = idArr.join(",") // 将 存放 id 的数组 转化为 带逗号的字符串
        flag ? window.localStorage.removeItem("put_supplier") : window.localStorage.removeItem("out_supplier")

        init(trStoreArr)
        x_admin_show('创建应付款单',flag ? '/admin/payableInfo?vid='+idStr : '/admin/payableInfo?oid='+idStr);
    })
    function aorflase() {
        let a = ''
        return (a === false)
    }

</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