<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>备件手动入库</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <style>
        html{
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form-admin">
    <div class="layui-card md-0">
        <div class="layui-card-body">
            <table class="layui-table ">
                <colgroup>
                    <col width="13%">
                    <col width="13%">
                    <col width="13%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="20%">
                    <col width="10%">
                </colgroup>
                <thead>
                <tr>
                    <th>物料号</th>
                    <th>备件名称</th>
                    <th>备件型号</th>
                    <th>适用机型</th>
                    <th>服务商价格(元)</th>
                    <th>申请数量</th>
                    <th>申请备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="zhijiepaidan">
                <c:forEach items="${list}" var="si">
                    <tr>
                        <td>${si.columns.code}<input type="hidden" name="fittingId" class="fittingId"
                                                     value="${si.columns.id}"></td>
                        <td>${si.columns.name}</td>
                        <td>${si.columns.version}</td>
                        <td>${si.columns.suit_printer}</td>
                        <td>${si.columns.site_price}</td>
                        <td><input type="text" name="amount" class="layui-input amount" autocomplete="off"></td>
                        <td><input type="text" name="remarks" class="layui-input" autocomplete="off"></td>
                        <td>
                            <button class="layui-btn layui-btn-sm " id="delete"><i
                                    class="layui-icon layui-icon-delete"></i>删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="radio" name="siteaddress" value="1" title="默认地址" checked lay-filter="filter">
                    <input type="radio" name="siteaddress" value="2" title="自定义地址" lay-filter="filter">
                </div>
            </div>
            <div class="layui-form-item layui-col-xs12">
                <div class="layui-col-xs2 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>收货人：</label>
                    <div class="layui-input-block">
                        <input type="text" id="receiver" name="receiver" class="layui-input layui-bg-gray"
                               value="${address.columns.receiver}" lay-verify="required" autocomplete="off" readonly>
                    </div>
                </div>
                <div class="layui-col-xs2 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>联系方式：</label>
                    <div class="layui-input-block">
                        <input type="text" id="mobile" name="mobile" class="layui-input layui-bg-gray"
                               value="${address.columns.mobile}" lay-verify="required" autocomplete="off" readonly>
                    </div>
                </div>
                <div class="layui-col-lg8">
                    <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>收货地址：</label>
                        <div class="layui-input-block">
                            <div id="layuidivzidingyi" class="hide">
                                <div class="layui-col-lg2 layui-col-sm3 ">
                                    <select name="province" id="province" lay-verify="required" lay-filter="province"
                                            lay-search>
                                        <option value=""></option>
                                        <c:forEach items="${pros}" var="pro">
                                            <option value="${pro.columns.ProvinceName}"
                                                    <c:if test="${address.columns.province eq pro.columns.ProvinceName}">selected</c:if>
                                                    title="${pro.columns.ProvinceID }">${pro.columns.ProvinceName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="layui-col-lg2 layui-col-sm3 ">
                                    <select name="city" id="city" lay-verify="required" lay-filter="city" lay-search>
                                        <option value="">请选择</option>
                                        <c:forEach items="${citys}" var="city">
                                            <option value="${city.columns.CityName}"
                                                    <c:if test="${address.columns.city eq city.columns.CityName}">selected</c:if>
                                                    title="${city.columns.CityID}">${city.columns.CityName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="layui-col-lg2 layui-col-sm3 ">
                                    <select name="area" id="area" lay-verify="required" lay-filter="aihao" lay-search>
                                        <option value="">请选择</option>
                                        <c:forEach items="${areas}" var="area">
                                            <option value="${area.columns.DistrictName}"
                                                    <c:if test="${address.columns.area eq area.columns.DistrictName}">selected</c:if>
                                                    title="${area.columns.DistrictID}">${area.columns.DistrictName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div id="divmoren">
                                <div class="layui-col-lg2 layui-col-sm3 pr-5">
                                    <input type="text" class="layui-input layui-bg-gray province"
                                           value="${address.columns.province}" readonly>
                                </div>
                                <div class="layui-col-lg2 layui-col-sm3 pr-5">
                                    <input type="text" class="layui-input layui-bg-gray city"
                                           value="${address.columns.city}" readonly>
                                </div>
                                <div class="layui-col-lg2 layui-col-sm3 pr-5">
                                    <input type="text" class="layui-input layui-bg-gray area"
                                           value="${address.columns.area}" readonly>
                                </div>
                            </div>
                            <div class="layui-col-lg6 layui-col-sm3">
                                <input type="text" id="customerAddress" name="customerAddress" lay-verify="required"
                                       placeholder=""
                                       autocomplete="off" class="layui-input layui-col-lg2 layui-bg-gray"
                                       value="${address.columns.address}" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <button type="button" class="layui-btn" id="tijiaoBtn" onclick="addFitting()">保存</button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="cancels()">取消</button>
    </div>
</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var address = "${address.columns.address}";
    var province = "${address.columns.province}";
    var city = "${address.columns.city}";
    var area = "${address.columns.area}";
    var receiver= "${address.columns.receiver}";
    var mobile= "${address.columns.mobile}";
    layui.use(['form', 'jquery','laydate','upload'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , laydate = layui.laydate;


        form.on('radio(filter)', function(data){
            var value = data.value;
            if(value == '1'){
                //默认地址
                $("#customerAddress").val(address).addClass("layui-bg-gray").attr("readonly",true);
                $("#province").val(province);
                $("#city").val(city);
                $("#area").val(area);
                $("#receiver").val(receiver).addClass("layui-bg-gray").attr("readonly",true);
                $("#mobile").val(mobile).addClass("layui-bg-gray").attr("readonly",true);
                $("#divmoren").removeClass("hide");
                $("#layuidivzidingyi").addClass("hide")
            }else if(value=='2'){
                //自定义地址
                $("#customerAddress").val('').removeClass("layui-bg-gray").attr("readonly",false);
                $("#province").val('');
                $("#city").val('');
                $("#area").val('');
                $("#receiver").val('').removeClass("layui-bg-gray").attr("readonly",false);
                $("#mobile").val('').removeClass("layui-bg-gray").attr("readonly",false);
                $("#divmoren").addClass("hide");
                $("#layuidivzidingyi").removeClass("hide")

            }
            noRepeatSub = false;
            form.render('select');
        });
        form.on('select(province)', function(data){
            var province = $(data.elem).find("option:selected").attr("title");
            provinceOrder(province);
        });
        form.on('select(city)', function(data){
            var city = $(data.elem).find("option:selected").attr("title");
            cityOrder(city);

        });

        function provinceOrder(province){
            $("#city").empty();
            $("#area").empty();
            if(isBlank(province)){
                $("#city").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getCitysByProId",
                data:{
                    province:province
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html =" <option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var city = result[i];
                        html =html+ '<option value="'+city.columns.CityName+'" title="'+city.columns.CityID+'">'+city.columns.CityName+'</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                }
            });

        }

        function cityOrder(city,arean){
            $("#area").empty()
            if(isBlank(city)){
                $("#area").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getAreaByCityId",
                data:{
                    city:city
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html ="<option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var area = result[i];
                        html =html+ '<option value="'+area.columns.DistrictName+'" >'+area.columns.DistrictName+'</option>';
                    }
                    $("#area").append(html);
                    if(!isBlank(arean)){
                        $("#area").val(arean)
                    }

                    form.render('select');
                }
            });

        }

    });


    //通过申请
    var noRepeatSub = false;
    function addFitting(){
        if(noRepeatSub){
            return;
        }
        var checkTe = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        var fick = false;
        var data1 = {};

        $("#zhijiepaidan tr").each(function(i){
            var fiId = $(this).find(".fittingId").val();
            var warning = $(this).find(".amount").val();
            var remarks = $(this).find("input[name='remarks']").val();//入库价格
            if(isBlank(warning)){
                layer.msg("请输入第" + (i + 1) + "行的申请数量！", {icon: 5, anim: 6});
                $(this).find(".amount").focus();
                fick = true;
                return;
            }
            if(!checkTe.test(warning)){
                layer.msg("第" + (i + 1) + "行的申请数量格式有误！", {icon: 5, anim: 6});
                $(this).find(".amount").focus();
                check = false;
                return;
            }

            var entity = {};
            entity.fitId = fiId;
            entity.amount = warning;
            entity.remarks = remarks;
            data1[i]=entity;
        });
        if(fick){
            return;
        }
        var data = {};
        data.data1 = JSON.stringify(data1);
        var type = $(' input[type="radio"]:checked').val();
        var pro;
        var cit;
        var are;
        if(type=='1'){
            pro= $(".province").val();
            cit =$(".city").val();
            are = $(".area").val();
        }else{
            pro=$("#province").val();
            cit =$("#city").val();
            are= $("#area").val();
        }
        var addre=  $("#customerAddress").val();
        var rec =  $("#receiver").val();
        var mo=  $("#mobile").val();
        if (data.data1 == "{}") {
            layer.msg("请选择数据");
            return;
        }
        if(isBlank(rec)){
            layer.msg("请输入联系人");
            return;
        }
        if(isBlank(mo)){
            layer.msg("请输入联系方式");
            return;
        }
        if(isBlank(pro)){
            layer.msg("请选择省");
            return;
        }
        if(isBlank(cit)){
            layer.msg("请选择市");
            return;
        }
        if(isBlank(are)){
            layer.msg("请选择区县");
            return;
        }
        if(isBlank(addre)){
            layer.msg("请输入详细地址");
            return;
        }
        data.receiver = rec;
        data.mobile = mo;
        data.province = pro;
        data.city = cit;
        data.area = are;
        data.address = addre;
        if(!$("#tijiaoBtn").hasClass("layui-btn-disabled")){
            console.log(".removeClass(layui-btn-disabled);")
            $("#tijiaoBtn").addClass("layui-btn-disabled");
        noRepeatSub = true;
        $.ajax({
            url: '${ctx}/site/fitting/fittingApplySave',
            type: 'post',
            data: data,
            success: function(result) {

                if(result.code=="200"){
                    layer.msg("保存成功！",{time:1000},function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layerIFrameReload(index);
                        parent.layer.close(index);//再执行关闭
                        layer.closeAll();
                        $("#tijiaoBtn").removeClass("layui-btn-disabled");
                    });
                }else if(result.data=="401"){
                    layer.msg("保存失败，请选择数据！");
                }else if(result.errMsg=="402"){
                    layer.msg("保存失败，请设置收货地址！");
                }else{
                    console.log(result);
                    layer.msg("保存失败！");
                }
            },
            complete:function(){
                noRepeatSub = false;
            }
        });
        }

    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function cancels(){
        parent.layer.closeAll();
    }


</script>
</body>
</html>