<apex:page lightningStylesheets="true" controller="SampleInventoryController" showHeader="false" sidebar="false" id="Page" action="{!init}" title="样本盘点">
    <apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery183minjs)}"/>
    <apex:includeScript value="{!URLFOR($Resource.PleaseWaitDialog)}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jquerysuggestcss)}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquerysuggestjs)}"/>
    <apex:includeScript value="{!URLFOR($Resource.connection20)}"/>
    <apex:includeScript value="{!URLFOR($Resource.apex20)}"/>
    <apex:stylesheet value="{!URLFOR($Resource.StyleUtilCss)}"/>
    <style type="text/css">
        .pure-table {
            /* border-collapse: collapse; */
            /* border-spacing: 0; */
            empty-cells: show;
            border: 1px solid #cbcbcb;
            width: 100%;
        }
        th {
            font-weight: inherit;
            text-align: left;
            font-weight: bold;
            white-space: nowrap;
        }
        
 
        .pure-table caption {
            color: #000;
            font: italic 85%/1 arial,sans-serif;
        /* padding: 1em 0;*/
            text-align: center;
        }
        
        .pure-table td,.pure-table th {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: .5em 1em;
        }
        
        .pure-table thead {
            background-color: #c3bfbf;
            color: #000;
            text-align: center;
            vertical-align: bottom;
        }
        
        .pure-table td {
            background-color: transparent; 
        }

        .pure-table-horizontal th,.pure-table-horizontal td {
            border-width: 0 0 1px 0;
            border-bottom: 1px solid #cbcbcb;
        }

        .pure-table-horizontal tbody>tr:last-child>td {
            border-bottom-width: 0;
        }
        
        .waves{
            position:relative;
            cursor:pointer;
            display:inline-block;
            overflow:hidden;
            text-align: center;
            -webkit-tap-highlight-color:transparent;
            z-index:1;
        }
        .waves .waves-animation{
            position:absolute;
            border-radius:50%;
            width:25px;
            height:25px;
            opacity:0;
            background:rgba(255,255,255,0.3);
            transition:all 0.7s ease-out;
            transition-property:transform, opacity, -webkit-transform;
            -webkit-transform:scale(0);
            transform:scale(0);
            pointer-events:none
        }
        .ts-btn{
            width: 150px;
            padding: 8px;
            height: 35px;
            line-height: 20px;
            background: #1684e3;
            color: #fff;
            border-radius: 5px;
            float: right;
            margin-right: 10px;
            margin-top: 5px;
        }
    </style>
    <script type="text/javascript">
        //文本框输入值,复选框自动打勾
        function ComputePrice(j) {
            var size = {!SISize};
            for(var i = 0; i < size; i++){
                var InventoryCheck = document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value;
                var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
                if(InventoryCheck != null && InventoryCheck != 0 && InventoryCheck != ''){
                    checklist[0].checked = true;
                }else{
                    checklist[0].checked = false;
                }
            }
        }
        //全选功能
        function selectAll() {
            var size = {!SISize};
            var all = j$(escapeVfId("Page:allForm:checkAll"));
            if (all[0].checked) {
                for(var i = 0; i < size; i++){
                    var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
                    checklist[0].checked = true;
                }
            } else {
                for(var i = 0; i < size; i++){
                    var checklist = j$("input[name='Page:allForm:records:"+ i +":checklist']");
                    checklist[0].checked = false;
                }
            }
        }
        //报错之后盘点数量为0的置为空
        function InventoryToNull() {
            var size = {!SISize};
            for(var i = 0; i < size; i++){
                if(document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value / 1 == 0){
                    j$(escapeVfId('Page:allForm:records:' + i + ':Inventory_Check')).attr('value',"");
                }
            }
        }
        //盘点确认
        function InventoryConfirmJS() {
            var size = {!SISize};
            var Inventoryflag = false;
            var Inflag = false;
            var lastflag = true;
            for(var i = 0; i < size; i++){
                //盘点库存大于发货数量的时候进行拦截
                var EffectiveInventory = (document.getElementById("Page:allForm:records:"+ i +":EffectiveInventory").innerText / 1);
                var Inventory = document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value / 1 ;
                if(Inventory > EffectiveInventory){
                    alert('输入的数量只可以小于等于有效库存!');
                    document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
                    Inventoryflag = false;
                    lastflag = false;
                    break;
                }
                //文本框输入非数字进行拦截
                if(isNaN(Inventory)){
                    alert('请输入数字!');
                    document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
                    Inventoryflag = false;
                    lastflag = false;
                    break;
                }
            }  
            if(lastflag){
                for(var i = 0; i < size; i++){
                    //如果没有勾选盘点,并且盘点库存没有值
                    if(document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value == ''
                        && document.getElementById("Page:allForm:records:"+ i +":checklist").checked == false){
                        Inventoryflag = false;
                        Inflag = true;
                    } else{
                        Inflag = false;
                        for(var i = 0; i < size; i++){
                            if(document.getElementById("Page:allForm:records:"+ i +":checklist").checked == true
                                && document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value == ''){    
                                alert('盘点库存不能为空!');
                                document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
                                Inventoryflag = false;
                                break;
                            } else if (document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value != ''
                                && document.getElementById("Page:allForm:records:"+ i +":checklist").checked == false){
                                alert('请选择要盘点的样本!');
                                document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
                                Inventoryflag = false;
                                break;
                            } else if(document.getElementById("Page:allForm:records:"+ i +":checklist").checked == true
                                && document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").value - 0 < 0){
                                alert('盘点库存不能为负数!');
                                document.getElementById("Page:allForm:records:"+ i +":Inventory_Check").focus();
                                Inventoryflag = false;
                                break;
                            } else{
                                Inventoryflag = true;
                            }
                        }
                        if(!Inventoryflag){
                            break;
                        }
                    } 
                }
            }
            //蒙层+后台保存方法
            if(Inventoryflag){
                blockme();
                InventoryConfirm();
            }
            if(Inflag){
                alert('至少选择一个样本才能进行盘点确认!');
            }
        }
        //按钮水波纹效果
        document.addEventListener('DOMContentLoaded',function(){
            var duration = 750;
            // 样式string拼凑
            var forStyle = function(position){
            var cssStr = '';
            for( var key in position){
                if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
            };
            return cssStr;
            }
            // 获取鼠标点击位置
            var forRect = function(target){
            var position = {
                top:0,
                left:0
            }, ele = document.documentElement;
            'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
            return {
                top: position.top + window.pageYOffset - ele.clientTop,
                left: position.left + window.pageXOffset - ele.clientLeft
            }
            }
            var show = function(event){
            var pDiv = event.target,
                cDiv = document.createElement('div');
            pDiv.appendChild(cDiv);
            var rectObj = forRect(pDiv),
                _height = event.pageY - rectObj.top,
                _left = event.pageX - rectObj.left,
                _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
            var position = {
                top: _height+'px',
                left: _left+'px'
            };
            cDiv.className = cDiv.className + " waves-animation",
            cDiv.setAttribute("style", forStyle(position)),
            position["-webkit-transform"] = _scale,
            position["-moz-transform"] = _scale,
            position["-ms-transform"] = _scale,
            position["-o-transform"] = _scale,
            position.transform = _scale,
            position.opacity = "1",
            position["-webkit-transition-duration"] = duration + "ms",
            position["-moz-transition-duration"] = duration + "ms",
            position["-o-transition-duration"] = duration + "ms",
            position["transition-duration"] = duration + "ms",
            position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            cDiv.setAttribute("style", forStyle(position));
            var finishStyle = {
                opacity: 0,
                "-webkit-transition-duration": duration + "ms",
                "-moz-transition-duration": duration + "ms",
                "-o-transition-duration": duration + "ms",
                "transition-duration": duration + "ms",
                "-webkit-transform" : _scale,
                "-moz-transform" : _scale,
                "-ms-transform" : _scale,
                "-o-transform" : _scale,
                top: _height + "px",
                left: _left + "px",
            };
            setTimeout(function(){
                cDiv.setAttribute("style", forStyle(finishStyle));
                setTimeout(function(){
                pDiv.removeChild(cDiv);
                },duration);
            },100)
            }
            document.querySelector('.waves').addEventListener('click',function(e){
            show(e);
            },!1);
            },!1);
    </script>
    
    <apex:form id="allForm">
        <!-- 后台报错信息显示 -->
        <apex:outputPanel id="message">
            <apex:pageMessages ></apex:pageMessages>
        </apex:outputPanel>
        <h1 style ="font-size: 30px; margin-left: 45%;">样本盘点</h1>
        <!-- 后台盘点确认方法之后执行 -->
        <apex:actionFunction name="InventoryConfirm" action="{!InventoryConfirm}" rerender="allForm,allPanel,records" oncomplete="InventoryToNull();unblockUI();">
        </apex:actionFunction>
        <apex:outputPanel id="allPanel">
            <div style="width:1000px; height:100%; margin:auto; overflow:auto;">
            <input type="hidden" id="hasError" value="{!hasError}"/>
            <table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list">
                <!-- 统一设置列宽度 -->
                <colgroup>
                    <col width="100px"/>
                    <col width="150px"/>
                    <col width="300px"/>
                    <col width="50px"/>
                    <col width="100px"/>
                    <col width="100px"/>
                    <col width="200px"/>
                </colgroup>
                <tr style="background-color:#f2f3f3;">
                    <th style="align:left" width="105px">
                        <apex:inputCheckbox id="checkAll" onclick="selectAll()" style="text-align:left;"/>是否盘点
                    </th>
                    <th style="text-align:left">
                        资料编码
                    </th>
                    <th style="text-align:left">
                        资料名称
                    </th>
                    <th style="text-align:left">
                        规格
                    </th>
                    <th style="text-align:left">
                        有效期内库存
                    </th>
                    <th style="text-align:left">
                        过期库存
                    </th>
                    <th style="text-align:left">
                        有效盘点库存(最小单位)
                    </th>
                </tr>
            </table>
            
            <table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list" style="width: 100%">
                <colgroup>
                    <col width="100px"/>
                    <col width="150px"/>
                    <col width="300px"/>
                    <col width="50px"/>
                    <col width="100px"/>
                    <col width="100px"/>
                    <col width="200px"/>
                </colgroup>
                <apex:repeat value="{!SIInfo}" var="SIfo" id="records">
                <tr>
                    <td align="left">
                        <apex:inputCheckbox style="text-align:left;" id="checklist" value="{!SIfo.IFCount}" />
                    </td>
                    <td align="left">
                        <apex:outputText id="OTCode" value="{!SIfo.OTCode}"/>
                    </td>
                    <td align="left">
                        <apex:outputText id="Samplename" value="{!SIfo.ProductName}"/>
                    </td>
                    <td align="left">
                        <apex:outputText id="Specs" value="{!SIfo.ProductSpecs}"/>    
                    </td>
                    <td align="center">
                        <apex:outputText id="EffectiveInventory" value="{!SIfo.EffectiveInventory}"/>
                    </td>
                    <td align="center">
                        <apex:outputText id="ExpiredInventory" value="{!SIfo.ExpiredInventory}"/> 
                    </td>
                    <td align="center">
                        <apex:inputText onblur="ComputePrice(this)" style="text-align:left;" id="Inventory_Check" value="{!SIfo.Check}" />
                    </td>  
                </tr>
                </apex:repeat>
            </table>
            <a class="waves ts-btn" onclick="InventoryConfirmJS()">盘点确认</a>
            </div>
        </apex:outputPanel>
    </apex:form>
</apex:page>