<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="decorator" content="base" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiadmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/common.css">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/style.css">
    <title>产品保修卡</title>
<style>
    button{
        border: none;
    }
    .del{
        width: 40px;
        height: 70px;
        background: rgba(204,0,0,1);
        opacity: 0.7;
        top: 0;
        right: 0;
    }
   .w301{
       width: 301px;
   }
    .w165{
        width:165px;
    }
    .pl-10{
        padding-left: 10px;
    }
    .table2 td:nth-of-type(3){
        border-right:1px solid #FE8116;
    }
</style>
</head>
<body>
<div class="back-ddd">
    <div class="back-fff">
        <!--logo-->
        <div class="logo">
            <img src="${ctxPlugin}/static/img/logo.png" alt="">
        </div>
        <!--bodyEr-->
        <div class="pl-50 pr-50">
            <div class="baoXiuKa mt-20">
                <img src="${ctxPlugin}/static/img/baoxiuka.png" alt="">
            </div>
            <div class="table-1 mt-20">
                <input class="layui-hide" id="orderId" value="">
                <input type="hidden" id="cusId" value="${cusId}">
                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="102">用户姓名</td>
                        <td colspan="16"><input type="text" id="customer_name" class="layui-input" value="${rd.columns.ps_name}"></td>
                    </tr>
                    <tr>
                        <td width="102">联系地址</td>
                        <td colspan="7"><input type="text" class="layui-input" id="location" value="${rd.columns.province}${rd.columns.city}${rd.columns.area}${rd.columns.location}"></td>
                        <td width="102">联系人</td>
                        <td colspan="8"><input type="text" id="contact_name" class="layui-input" value="${rd.columns.contact_name}"></td>
                    </tr>
                    <tr>
                        <td width="102">联系电话</td>
                        <td colspan="7"><input type="text" id="moble_tel" class="layui-input" value="${rd.columns.moble_tel}"></td>
                        <td width="102">并网时间</td>
                        <td colspan="8"><p class="w165"><%--<fmt:formatDate value="${rd.columns.expect_install_date}" pattern="yyyy-MM-dd" />--%>
                            <input type="text" class="layui-input" name="applianceBuyTime" id="applianceBuyTime"   autocomplete="off" class="layui-input" placeholder="yyyy-MM-dd"  value="${time}" >
                        </p></td>
                      <%--  <td colspan="8"><p class="w165">${order.applianceBuyTime}</p></td>--%>
                    </tr>
                    <c:forEach items="${list}" var="rds">
                            <tr  class="feedBack">
                                <td width="102">产品名称</td>
                                <td colspan="15" ><input type="text" class="layui-input deviceName" value="${rds.columns.type_name}"></td>
                                <td rowspan="3" width="40"  class="pos-r">
                                    <button class="del pos-a deleteFeedBack" style="cursor:pointer">
                                        <img src="${ctxPlugin}/static/img/del.png" alt="" >
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td width="102">规格型号</td>
                                <td colspan="15" ><input type="text"  class="layui-input deviceModel" value="${rds.columns.device_model}"></td>
                            </tr>
                            <tr>
                                <td width="102">机身编码</td>
                                <td colspan="15" ><input type="text"  class="layui-input deviceMachineCode" value="${rds.columns.device_pro_sn}"></td>
                            </tr>
                    </c:forEach>
                 <%--   <tr>
                        <td>产品名称</td>
                        <td colspan="5"></td>

                    </tr>
                    <tr>
                        <td>规格型号</td>
                        <td colspan="5"></td>

                    </tr>
                    <tr>
                        <td>机身编码</td>
                        <td colspan="5"></td>

                    </tr>--%>
                    <tr>
                        <td width="102">发票号码</td>
                        <td colspan="16"><input type="text" class="layui-input" id="invoice"></td>

                    </tr>
                    <tr>
                        <td width="102">销售商</td>
                        <td colspan="16"><input type="text" class="layui-input" id="pleaseReferMall" value="能辉科技有限公司"></td>

                    </tr>
                </table>
            </div>
            <div class="table-2 mt-20">
                <table class="table2" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="102">操作</td>
                        <td width="150">产品名称</td>
                        <td width="150">质保年限</td>
                        <td width="102" colspan="3">质保范围</td>
                    </tr>
                    <tr class="product_name_tr">
                        <td>

                        </td>
                        <td>
                                <input type="text" id="product_name_one" style="width:90px;" value="光伏逆变器">
                        </td>
                        <td>
                            <input type="text" id="inverter_years" style="width:80px; text-align:center;" value="10" >
                        </td>
                        <td rowspan="4" class="product_name_rowspan">
                            <div class="row-p">
                                <p>
                                    1、未经拆修而发生故障，经公司指定单位确认后，可凭本卡为用户免费修检或更换零部件，由于运输不当或未按照使用说明方法操作及不可抗力等原因造成损伤，不在保修范围内。<br>
                                    2、未经生成厂商授权，擅自打开导致损伤者，不予保修。
                                </p>
                            </div>
                        </td>
                    </tr>
                    <tr class="product_name_tr">
                        <td>

                           <span style=" margin-right:5px;" class="delete_product_name"><img src="${ctxPlugin}/static/img/delete.png" alt="" ></span>

                        </td>
                        <td>
                             <input type="text" id="product_name_two" style="width:90px;" value="光伏组件">
                           </td>
                        <td>
                            <input type="text" id="assembly_years" style="width:80px; text-align:center;" value="10" >
                            </td>
                    </tr>
                    <tr class="product_name_tr">
                        <td>
                           <span style=" margin-right:5px;" class="delete_product_name"><img src="${ctxPlugin}/static/img/delete.png" alt="" ></span>
                        </td>
                        <td>
                                <input type="text" id="product_name_three" style="width:90px;" value="通信模块">

                        </td>
                        <!--<td><input type="text" id="bracket_years" style="width:35px;" value="10">年</td>-->
                        <td>
                            <input type="text" id="bracket_years" style="width:80px; text-align:center;" value="5" >
                        </td>
                    </tr>
                    <tr class="product_name_tr">
                        <td>
                                <span style=" margin-right:5px;" class="delete_product_name"><img src="${ctxPlugin}/static/img/delete.png" alt="" ></span>
                        </td>
                        <td>
                            <input type="text" id="product_name_four" style="width:90px;" value="光伏系统">
                        </td>
                        <td>
                            <input type="text" id="system_years" style="width:80px; text-align:center;" value="1" >
                        </td>
                    </tr>
                </table>
            </div>
            <div class="explain mt-20">
                <p class="fot-p">
                    1、如果购买我司整套系统，可享受以上整套产品质保；若只购买系统部分产品，按上述表格内对应产品进行年限质保。
                    2、如果在合同中约定其他保修条款的，按照合同保修条款执行。
                    3、质保起始时间以产品并网发电时间为准。
                    4、来函来电,请使用正楷字体写清楚上表内容，并清楚描述产品故障现象或相关服务，以免贻误时间。谢谢合作！
                    5、保修条款解释权归能辉科技有限公司。
                </p>
            </div>
            <div class="w-700 mt-20">
                <div class="map f-l">
                    <p class="fot-p">
                        地址：中国合肥市高新区习友路1699号（230088)
                        电话：400-958-5888 0551-65327903
                        传真：0551-65323478
                        网址：www.sungrowpower.com
                    </p>
                </div>
                <div class="zu-img f-r">
                    <img src="${ctxPlugin}/static/img/zu3.png" alt="">
                </div>
                <div class="clear"></div>
            </div>

        </div>
            <div class="text-c" >
                <button type="button" class="layui-btn layui-btn-radius" id="saveWarranty">确定生成</button>
                <button type="button" class="layui-btn layui-btn-radius" onclick="cancel()">取消</button>
            </div>
    </div>

</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/static/js/orderCommon.js"></script>
<script>
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','laydate', 'layedit'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#applianceBuyTime'
            ,value: '${time}'
            ,format: 'yyyy-MM-dd' //可任意组合
            ,trigger: 'click'
        });

     var saveFlag=false;
       $("#saveWarranty").on('click',function(){
            if(saveFlag){
                return ;
            }
            var orderId=$("#orderId").val();
            var customer_name = $("#customer_name").val();
           var location = $("#location").val();
           var contact_name = $("#contact_name").val();
           var moble_tel = $("#moble_tel").val();
           var invoice = $("#invoice").val();
           var pleaseReferMall = $("#pleaseReferMall").val();
           var applianceBuyTime = $("#applianceBuyTime").val();
           var cusId = $("#cusId").val();
           var inverter_years = $("#inverter_years").val();
           var assembly_years = $("#assembly_years").val();
           var bracket_years = $("#bracket_years").val();
           var system_years = $("#system_years").val();

           var product_name_one = $("#product_name_one").val();
           var product_name_two = $("#product_name_two").val();
           var product_name_three = $("#product_name_three").val();
           var product_name_four = $("#product_name_four").val();

           if(isBlank(customer_name)){
               layer.msg("请输入用户姓名！",{icon:"2"});
               return ;
           }
           if(isBlank(location)){
               layer.msg("请输入地址！",{icon:"2"});
               return ;
           }
           if(isBlank(contact_name)){
               layer.msg("请输入联系人！",{icon:"2"});
               return ;
           }
           if(isBlank(moble_tel)){
               layer.msg("请输入联系电话！",{icon:"2"});
               return ;
           }
           if(isBlank(pleaseReferMall)){
               layer.msg("请输入销售商！",{icon:"2"});
               return ;
           }

           if ($("#product_name_one").length > 0 && isBlank(product_name_one) ) {
               layer.msg("请输入产品名称！",{icon:"2"});
               return ;
           }
           if ($("#product_name_two").length > 0 && isBlank(product_name_two) ) {
               layer.msg("请输入产品名称！",{icon:"2"});
               return ;
           }
           if ($("#product_name_three").length > 0 && isBlank(product_name_three) ) {
               layer.msg("请输入产品名称！",{icon:"2"});
               return ;
           }
           if ($("#product_name_four").length > 0 && isBlank(product_name_four) ) {
               layer.msg("请输入产品名称！",{icon:"2"});
               return ;
           }

           if(!isBlank(product_name_one) && isBlank(inverter_years)){
               layer.msg("请输入"+product_name_one+"保质年限！",{icon:"2"});
               return ;
           }
           if(!isBlank(product_name_two) && isBlank(assembly_years)){
               layer.msg("请输入"+product_name_two+"保质年限！",{icon:"2"});
               return ;
           }
           if(!isBlank(product_name_three) && isBlank(bracket_years)){
               layer.msg("请输入"+product_name_three+"保质年限！",{icon:"2"});
               return ;
           }
           if(!isBlank(product_name_four) && isBlank(system_years)){
               layer.msg("请输入"+product_name_four+"保质年限！",{icon:"2"});
               return ;
           }
           var rowspan = $(".product_name_tr").length;

            var list = [];
            $(".feedBack").each(function(index){
                var deviceName=$(this).find("td").eq(1).find(".deviceName").val();
                var deviceModel=$(this).next("tr").find("td").eq(1).find(".deviceModel").val();
                var deviceMachineCode=$(this).next("tr").next("tr").find("td").eq(1).find(".deviceMachineCode").val();
                  var feedBack={
                      orderId:orderId,
                      deviceName:deviceName,
                      deviceModel:deviceModel,
                      deviceMachineCode:deviceMachineCode
                  }
                  list.push(feedBack);
            })
            saveFlag=true;
            $.ajax({
                url:"${ctx}/customer/savaWarrantyCard",
                type:"POST",
               // contentType : "application/json;charsetset=UTF-8",
                data:{
                    list:JSON.stringify(list),
                    customerName:customer_name,
                    customerAddress:location,
                    contactName:contact_name,
                    customerMobile:moble_tel,
                    invoice:invoice,
                    pleaseReferMall:pleaseReferMall,
                    customerId:cusId,
                    applianceBuyTime:applianceBuyTime,
                    inverterYears:inverter_years,
                    assemblyYears:assembly_years,
                    bracketYears:bracket_years,
                    systemYears:system_years,
                    productNameOne:product_name_one,
                    productNameTwo:product_name_two,
                    productNameThree:product_name_three,
                    productNameFour:product_name_four,
                    rowspan:rowspan
                }
                ,success:function(result){
                    console.log(result)
                    if(result.code=="200"){
                        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
                     layer.msg("保存成功",{icon:1,time:1000},function(){
                            parent.layer.close(index);//关闭弹出层
                         window.parent.layer.closeAll();
                         window.parent.searchOrder();

                        })
                    }else if(result.code=="202"){
                        layer.msg("保存失败,已添加过保修卡",{icon:2});
                    }else{
                        layer.msg("保存失败",{icon:2});
                    }
                    saveFlag=false;
                },error:function () {
                    layer.msg("生成失败",{icon:2});
                    saveFlag=false;
                }
            })
        })

        $(".deleteFeedBack").click(function(){
           var arr=$(".deleteFeedBack");
           if(arr.length==1){
               layer.msg("这是最后一组生成保修卡的产品信息！",{icon:2});
               return ;
           }
            $(this).parent().parent().next().remove();
            $(this).parent().parent().next().remove();
            $(this).parent().parent().remove();

        })


        $(".delete_product_name").click(function (){
            $(this).parents("tr").remove();
            var length = $(".product_name_tr").length
            $(".product_name_rowspan").attr("rowspan",length)
        })

    })
    function cancel(){
        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
        parent.layer.close(index);//关闭弹出层
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>

</html>
