<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <%@include file="/views/common.jsp" %>
</head>
<!-- 特种纸名片 -->
<style>
    #tang_type .layui-form-select .layui-edge {
        right: 20px;
    }

    #dama .layui-form-select .layui-edge {
        right: 20px;
    }

    #ccolor_type .layui-form-select .layui-edge {
        right: 20px;
    }

    #leishe_type .layui-form-select .layui-edge {
        right: 20px;
    }
</style>
<body>
<div class="big_box">
    <div class="left_div">
        <h1 class="h1">特种纸名片</h1>
        <hr>
        <form class="layui-form">
            <input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="特种纸名片">
            <p>材料</p>
            <div class="layui-form-item">
                <select name="kindValue" lay-filter="kindValueSelect" class="select kindValueSelect">
                    <option value=""></option>
                    <option value="岚蝶">岚蝶</option>
                    <option value="皙贝">皙贝</option>
                    <option value="琮纹">琮纹</option>
                    <option value="睿狐">睿狐</option>
                    <option value="溪雪">溪雪(珠光)</option>
                    <%--                    <option value="300克布纹纸">300克布纹纸</option>--%>
                    <option value="玉蕊">玉蕊</option>
                    <option value="萱姿">萱姿(雅柔)</option>
                    <option value="金绒">金绒</option>
                    <%--                    <option value="300克灵感纸">300克灵感纸</option>--%>
                    <option value="芳怡">芳怡(草香)</option>
                    <%--						<option value="300克米黄漂金">300克米黄漂金</option>--%>
                    <!--<option value="500克黑卡双面印金/银">500克黑卡双面印金/银</option>-->
                    <%--						<option value="300克冰白纸彩色印刷">300克冰白纸彩色印刷</option>--%>
                    <%--						<option value="触感咖啡330克印金/银">触感咖啡330克印金/银</option>--%>
                    <%--						<option value="采石白色600克彩色印刷">采石白色600克彩色印刷</option>--%>
                    <!--<option value="优质绵米色600克">优质绵米色600克</option>-->
                    <%--                    <option value="500克拉丝闪银">500克拉丝闪银卡</option>--%>
                    <%--                    <option value="500克拉丝闪金">500克拉丝闪金卡</option>--%>
                    <option value="素芸">素芸</option>
                </select>
            </div>
            <div class="suyun" style="display: none">
                <p>材质</p>
                <div class="layui-form-item">
                    <input type="radio" name="kind" lay-filter="kindSelect" title="500克" value="500克" checked/>
                    <input type="radio" name="kind" lay-filter="kindSelect" title="300克" value="300克"/>
                </div>
            </div>
            <p>
                尺寸(CM/厘米) <span style="font-size: 14px; color: red">输入格式: 长 * 宽</span>
            </p>
            <div class="layui-form-item" id="ui_size">
                <input type="text" name="size" placeholder="格式:长*宽"
                       class="layui-input sizeSpecialCard" autocomplete="off">
            </div>
            <div id="ui_ls" style="display:none;">
                <input type="radio" name="ls_size" value="9*5.4" title="9*5.4cm" checked="checked">
            </div>
            <p>数量（张）
                <span class="cardCount" style="display:none"><input type="checkbox" class="switchCardCount"
                                                                    name="switchCardCount" lay-filter="switchCardCount"
                                                                    title="自定义数量"></span>
            </p>
            <div id="noCraft">
                <div class="diyCardCount" style="display: none">
                    <div class="layui-form-item">
                        <input type="text" name="count" id="cardCount" placeholder="请输入整数" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="notDiyCardCount">
                    <div class="layui-form-item">
                        <select name="count" class="select" id="count1">
                            <option value="200">200</option>
                            <option value="500">500</option>
                            <option value="1000">1000</option>
                            <option value="2000">2000</option>
                            <option value="5000">5000</option>
                            <option value="10000">10000</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="hasCraft" style="display: none;">
                <div class="layui-form-item">
                    <select name="count" class="select" id="count2">
                        <option value="200">200</option>
                        <option value="500">500</option>
                        <option value="600">600</option>
                        <option value="800">800</option>
                        <option value="1000">1000</option>
                    </select>
                </div>
            </div>
            <div id="ui_ls_count" style="display: none;">
                <div class="layui-form-item">
                    <select name="count" class="select" id="count3">
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="2000">2000</option>
                        <option value="5000">5000</option>
                        <option value="10000">10000</option>
                    </select>
                </div>
            </div>
            <div id="ui_mk_count" style="display: none;">
                <div class="layui-form-item">
                    <select name="count" class="select" id="count4">
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="400">400</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="2000">2000</option>
                        <option value="3000">3000</option>
                        <option value="5000">5000</option>
                        <option value="10000">10000</option>
                    </select>
                </div>
            </div>
            <p>款数</p>
            <div class="layui-form-item">
                <input type="text" placeholder="请输入整数" autocomplete="off"
                       name="number" value="1" id="number" class="layui-input"
                       lay-verify="number">
            </div>
            <div class="layui-form-item" id="ui_des" style="display:none;">
                <p>
                    设计内容
                </p>
                <select name="p" lay-filter="desType" id="desType" class="select" lay-search>
                    <option value=""></option>
                    <option value="1">改序号</option>
                    <option value="2">改名字</option>
                    <option value="3">改二维码</option>
                    <option value="4">改图片</option>
                    <option value="5">改内容模板相同</option>
                    <option value="6" selected>改内容模板完全不同</option>
                </select>
            </div>
            <p>
                客户旺旺
            </p>
            <div class="layui-form-item">
                <input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
                       class="layui-input">
            </div>
            <p>工艺</p>
            <div id="craft_layout">
                <input type="checkbox" name="craft" lay-filter="switch" id="dakong" value="打孔" title="打孔"
                       class="niupikaNoMQCraft">
                <input type="checkbox" name="craft" lay-filter="switch" id="craft_mo" value="异形模切" title="异形模切"
                       class="niupikaCraft ">
                <span class="newCraft">
                    <input type="checkbox" name="craft" lay-filter="switch" id="craft_yuanjiao" value="圆角" title="圆角"
                           class="noCraft">
                    <input type="checkbox" name="craft" lay-filter="switch" id="craft_dianxian" value="打点线" title="打点线"
                           class="">
                </span>
                <input type="checkbox" name="craft" lay-filter="switch" value="压痕" title="压痕">
                <span class="craft_liusu">
                    <input type="checkbox" name="craft" lay-filter="switch" value="配流苏" title="配流苏"
                           class="noCraft">
                    <input type="checkbox" name="craft" lay-filter="switch" value="穿流苏" title="穿流苏"
                           class="">
                </span>
            </div>
            <div id="mianka" style="display: none">
                <div id="ccolor_type" class="layui-inline" style="display: flex;align-items: center">
                    <div style="flex-shrink: 0">纸张颜色：</div>
                    <select name="craft" class="select">
                        <option value="黑色" selected>黑色</option>
                        <option value="军绿色">军绿色</option>
                        <option value="砖红色">砖红色</option>
                        <option value="深咖">深咖</option>
                        <option value="浅棕色">浅棕色</option>
                        <option value="白色">白色</option>
                    </select>
                    <span class="printColor" style="display: none;align-items: center;">
                        <input type="checkbox" name="craft" lay-filter="mianka" value="印刷颜色" title="印刷颜色" checked disabled>
                        <select name="co_number" class="layui-select">
                            <option value="1">单色印刷</option>
                            <option value="2">彩色印刷</option>
                        </select>
                    </span>
                </div>
                <div class="layui-inline">
                    裁切方式：
                    <input type="checkbox" name="craft" lay-filter="mianka" value="直角裁切" title="直角裁切" checked disabled>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="圆角" title="圆角" disabled>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="异形模切" title="异形模切" disabled>
                </div>
                <div class="layui-inline-block">
                    印面：
                    <input type="checkbox" name="craft" lay-filter="mianka" value="单面" title="单面" checked disabled>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="双面" title="双面" disabled>
                </div>
                <div class="layui-inline">
                    特殊工艺：
                    <input type="checkbox" name="craft" lay-filter="mianka" value="击凸" title="击凸" disabled>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="压凹" title="压凹" disabled>
                    <div id="color_type" class="layui-inline" style="display: none;width: 200px">
                        <select name="craft" class="select" disabled>
                            <option value="无色" selected>无色</option>
                            <option value="有色">有色</option>
                            <option value="有色加凹凸">有色加激凸/有色加压凹</option>
                        </select>
                    </div>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="烫镭射银" title="烫镭射银" disabled>
                    <div id="leishe_type" class="layui-inline" style="display: none;width: 200px">
                        <select name="craft" class="select" disabled>
                            <option value="单面烫镭射银" selected>单面烫镭射银</option>
                            <option value="双面烫镭射银">双面烫镭射银
                            <option>
                        </select>
                    </div>
                    <input type="checkbox" name="craft" lay-filter="mianka" value="打点线" title="打点线">
                    <input type="checkbox" name="craft" lay-filter="mianka" value="打孔" title="打孔">
                    <span style="display: none">
                        <input type="checkbox" name="craft" lay-filter="mianka" value="压痕" title="压痕">
                    </span>
                </div>

            </div>
            <br/>
            <input type="checkbox" name="craft" lay-filter="mianka" value="单面烫金" title="单面烫金">
            <input type="checkbox" name="craft" lay-filter="mianka" value="双面烫金" title="双面烫金">
            <div id="tang_type" class="layui-inline" style="display: none;width: 90px">
                <select name="craft" class="select" disabled>
                    <option value="烫金" selected>烫金</option>
                    <option value="烫银">烫银</option>
                    <option value="烫蓝">烫蓝</option>
                    <option value="烫绿">烫绿</option>
                    <option value="烫紫">烫紫</option>
                    <option value="烫玫瑰">烫玫瑰</option>
                </select>
            </div>
            <div class="layui-inline-block">
                常见工艺：
                <input type="checkbox" name="craft" lay-filter="switch" value="打码" title="打码">
                <div id="dama" class="layui-inline" style="display: none;width: 90px">
                    <select name="maxian" class="select">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                    </select>
                </div>

                <div id="baimo" class="layui-inline" style="display: none;width: 90px">
                    <input type="checkbox" name="craft" lay-filter="mianka" value="白墨" title="白墨">
                </div>
            </div>
            <div class="layui-input-block">
                <input type="checkbox" name="craft" lay-filter="ui_craft" value="抠图" title="抠图">
                <div class="layui-inline crop" style="display:none;width: 80px">
                    <input class="layui-input" type="text" name="cropNumber">
                </div>
            </div>
            <!--<input type="checkbox" name="craft" lay-filter="switch" value="烫金/" title="烫金" class="hasCraft ui_ls_craft">
            <input type="checkbox" name="craft" lay-filter="switch" value="击凸" title="击凸" class="hasCraft">
            <input type="checkbox" name="craft" lay-filter="switch" value="凹凸" title="凹凸" class="ui_ls_craft" disabled="disabled">
            <input type="checkbox" name="craft" lay-filter="switch" value="双面" title="双面" class="ui_ls_craft" disabled="disabled">-->
            <hr>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="acount_btn">计算</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <h2>计算结果-
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult"
                        onclick="copyResult()">点击复制
                </button>
            </h2>
            <div>
                <textarea rows="11" cols="75" id="span_result" readonly="readonly"></textarea>
                <%@include file="../acountExpressFee.jsp" %>
            </div>
            <!--<h2>下单备注-<button type="button" class="layui-btn layui-btn-primary layui-btn-sm copyResult" onclick="copyBz()">点击复制</button></h2>
            <div>
                <textarea rows="5" cols="75" id="bz_result" readonly="readonly"></textarea>
            </div>-->
            <div>
                <table class="layui-hide" id="priceTable" lay-filter="priceTable"></table>
            </div>
        </form>
    </div>
    <div class="right_div">
        <div class="layui-carousel" id="test1">
            <div carousel-item id="carousel"></div>
            <br>
            <div id="remark" style="font-size:20px;color:red"></div>
        </div>
    </div>
</div>
</body>
<%@include file="/views/copyResult.jsp" %>
<script>
    setNumberOptions();

    function setNumberOptions() {
        let html = '';
        if (window.parent.system_isPdd) {
            html = `<option value=""></option>
                <option value="1">改序号</option>
                <option value="2">改名字</option>
                <option value="3">改二维码</option>
                <option value="4">改图片</option>
                <option value="5">改内容模板相同</option>
                <option value="6" selected>改内容模板完全不同</option>`;
        } else {
            html = `<option value=""></option>
                <option value="1">改序号</option>
                <option value="6" selected>改内容模板完全不同</option>`;
        }
        $("#desType").empty().append(html);
    }

    layui.use(['table', 'form', 'carousel'], function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        var carousel = layui.carousel;
        var table = layui.table;
        let remark_html = ''

        //建造实例
        ins = carousel.render({});

        $("#number").on("input", function (e) {
            var number = e.delegateTarget.value;
            var kind = $("input[name='kind']:checked").val();
            if (number > 1) {
                $("#ui_des").show();
            } else {
                $("#ui_des").hide();
            }
        });

        form.on('select(kindValueSelect)', function (data) {
            // 轮播图
            var html = " ";
            var remark = " ";
            // 清空轮播图
            $("#carousel").empty();
            $("#remark").empty();
            $.ajax({
                url: "${pageContext.request.contextPath}/getImgs",
                type: "GET",
                data: {
                    proTypeValue: "4",
                    kindValue: "6",
                    kind2Value: data.value
                },
                //dataType : "json",
                success: function (result) {
                    for (let i = 0; i < result.length; i++) {
                        // 只留一个remark
                        remark = "";
                        html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
                        remark += '<div><span>' + result[i].remark + '<span/></div>';
                    }
                    $("#carousel").append(html);
                    // 如果没有说明，就不显示null
                    if (remark.indexOf("null") < 0) {
                        remark_html = remark;
                        $("#remark").append(remark);
                    }
                    // 如果没有轮播图就隐藏
                    if (result.length == 0) {
                        document.getElementById("test1").style.display = "none";   //隐藏
                    } else {
                        document.getElementById("test1").style.display = "block";  //显示
                        ins.reload({
                            elem: '#test1',
                            width: result[0].imgWidth,  //设置容器宽度
                            height: result[0].imgHeight
                        });
                    }
                }
            });

            $("#mianka").hide()
            $("#mianka input").attr("disabled", true);
            $("#craft_layout").show()
            $("#craft_layout input").attr("disabled", false);
            $(".craft_liusu").hide()
            $(".craft_liusu input").attr("disabled", true);
            $(".suyun").hide();
            $(".suyun").find(":input").attr("disabled", true);
            if (data.value.length <= 4) {
                $("#noCraft").show();
                $("#hasCraft").hide();
                $("#noCraft").find(":input").attr("disabled", false);
                $("#hasCraft").find(":input").attr("disabled", true);
                $('.noCraft').removeAttr('disabled');
                $('.hasCraft').prop('disabled', 'disabled');

                if (data.value == '珠光纸') {
                    $('input[class = switchCardCount]').prop('checked', false);
                    // 默认禁用自定义的数量
                    $(".diyCardCount").find(":input").attr("disabled", true);
                    //【自定义数量】复选框
                    $(".cardCount").show();
                    $("#ui_ls").hide();
                    $("#ui_size").show();
                    $("#ui_ls").find(":input").attr("disabled", true);
                    $("#ui_size").find(":input").attr("disabled", false);
                    $('.ui_ls_craft').prop('disabled', 'disabled');
                    $('.hasCraft').prop('disabled', 'disabled');
                    $('.noCraft').removeAttr('disabled');
                    $('.niupikaNoMQCraft').removeAttr('disabled');
                    $("#ui_ls_count").hide();
                    $("#ui_ls_count").find(":input").attr("disabled", true);
                    $("#ui_mk_count").hide()
                    $("#ui_mk_count").find(":input").attr("disabled", true);
                    // 自定义少数量
                    form.on('checkbox(switchCardCount)', function (data) {
                        if (data.elem.checked) {
                            $(".diyCardCount").show();
                            $(".notDiyCardCount").hide();
                            $(".diyCardCount").find(":input").attr("disabled", false);
                            $(".notDiyCardCount").find(":input").attr("disabled", true);
                        } else {
                            $(".notDiyCardCount").show();
                            $(".diyCardCount").hide();
                            $(".notDiyCardCount").find(":input").attr("disabled", false);
                            $(".diyCardCount").find(":input").attr("disabled", true);
                        }
                        form.render();
                    })
                } else if (data.value == '拉丝闪银' || data.value == '拉丝闪金') {
                    $("#ui_ls").show();
                    $("#ui_size").hide();
                    $("#ui_ls").find(":input").attr("disabled", false);
                    $("#ui_size").find(":input").attr("disabled", true);
                    $('.hasCraft').prop('disabled', 'disabled');
                    $('.noCraft').prop('disabled', 'disabled');
                    $(".niupikaNoMQCraft").prop('disabled', 'disabled');
                    $('.ui_ls_craft').removeAttr('disabled');
                    $("#ui_ls_count").show();
                    $("#ui_ls_count").find(":input").attr("disabled", false);
                    $("#ui_mk_count").hide()
                    $("#ui_mk_count").find(":input").attr("disabled", true);
                    $(".cardCount").hide();
                    $(".notDiyCardCount").hide();
                    $(".diyCardCount").hide();
                    $(".notDiyCardCount").find(":input").attr("disabled", true);
                    $(".diyCardCount").find(":input").attr("disabled", true);
                } else {
                    //【自定义数量】复选框
                    $(".cardCount").hide();

                    $(".notDiyCardCount").show();
                    $(".diyCardCount").hide();
                    $(".notDiyCardCount").find(":input").attr("disabled", false);
                    $(".diyCardCount").find(":input").attr("disabled", true);
                    $("#ui_ls").hide();
                    $("#ui_size").show();
                    $("#ui_ls").find(":input").attr("disabled", true);
                    $("#ui_size").find(":input").attr("disabled", false);
                    $('.ui_ls_craft').prop('disabled', 'disabled');
                    $('.hasCraft').prop('disabled', 'disabled');
                    $('.noCraft').removeAttr('disabled');
                    $('.niupikaNoMQCraft').removeAttr('disabled');
                    $("#ui_ls_count").hide();
                    $("#ui_ls_count").find(":input").attr("disabled", true);
                    $("#ui_mk_count").hide()
                    $("#ui_mk_count").find(":input").attr("disabled", true);
                }

                // 选中300克牛皮纸的时候，展示【异形模切】工艺，禁用【打孔】工艺
                // if (data.value == '金绒') {
                //     $('.niupikaCraft').removeAttr('disabled');
                // } else {
                //     $('.niupikaCraft').prop('disabled', 'disabled');
                // }
                form.render();
            } else {
                $("#hasCraft").show();
                $("#noCraft").hide();
                $("#hasCraft").find(":input").attr("disabled", false);
                $("#noCraft").find(":input").attr("disabled", true);
                $('.ui_ls_craft').prop('disabled', 'disabled');
                $('.hasCraft').removeAttr('disabled');
                $('.noCraft').prop('disabled', 'disabled');
                $('.niupikaNoMQCraft').removeAttr('disabled');
                $('.newCraft').removeAttr('disabled');
                $("#ui_ls").hide();
                $("#ui_size").show();
                $("#ui_ls").find(":input").attr("disabled", true);
                $("#ui_size").find(":input").attr("disabled", false);
                $("#ui_ls_count").hide();
                $("#ui_ls_count").find(":input").attr("disabled", true);
                $("#ui_mk_count").hide()
                $("#ui_mk_count").find(":input").attr("disabled", true);
                $(".newCraft").show();
                if (data.value == '金绒' || data.value == '500克拉丝闪银' || data.value == '500克拉丝闪金') {
                    $(".newCraft").hide()
                    $(".newCraft input[name='craft']").prop('checked', false);
                }
            }
            let liusuList = ['岚蝶', '皙贝', '琮纹', '睿狐', '溪雪', '玉蕊', '萱姿']
            if (liusuList.includes(data.value)) {
                $(".craft_liusu").show()
                $(".craft_liusu input").attr("disabled", false);
            }

            if (data.value == "素芸") {
                $("#craft_layout").hide()
                $("#craft_layout input").attr("disabled", true);
                $("#mianka").show()
                $("#mianka input").attr("disabled", false);
                $("#ui_mk_count").show()
                $("#ui_mk_count").find(":input").attr("disabled", false);
                $("#noCraft").hide()
                $("#noCraft").find(":input").attr("disabled", true);
                $("#hasCraft").hide()
                $("#hasCraft").find(":input").attr("disabled", true);
                $("#ui_ls_count").hide()
                $("#ui_ls_count").find(":input").attr("disabled", true);
                $(".suyun").show();
                $(".suyun").find(":input").attr("disabled", false);
            }
            $("#baimo").find(":input").attr("disabled", true);
            $("#baimo").hide();
            if (data.value == "金绒") {
                $("#baimo").find(":input").attr("disabled", false);
                $("#baimo").show();
            }
            form.render();
        })

        form.on("radio(kindSelect)", function (data) {
            let colorHtml = `<option value="黑色" selected>黑色</option>
                        <option value="军绿色">军绿色</option>
                        <option value="砖红色">砖红色</option>
                        <option value="深咖">深咖</option>
                        <option value="浅棕色">浅棕色</option>
                        <option value="白色">白色</option>`;
            $("input[name='craft'][value='压凹']").prop("checked", false);
            $("#color_type").hide();
            $("#color_type").find("select").attr("disabled", true);
            $(".printColor").hide()
            $(".printColor").find("input").attr("disabled", true);
            $("#mianka input[name='craft'][value='压痕']").parent().hide();
            $("#mianka input[name='craft'][value='压痕']").attr("disabled", true);

            if (data.value == "300克") {
                colorHtml = `<option value="白色">白色</option>`;
                $(".printColor").css("display", "flex")
                $(".printColor").find("input").attr("disabled", false);
                $("#mianka input[name='craft'][value='压痕']").parent().show();
                $("#mianka input[name='craft'][value='压痕']").attr("disabled", false);
            }

            $("#ccolor_type select[name='craft']").empty();
            $("#ccolor_type select[name='craft']").append(colorHtml);
            form.render();
        })

        form.on("checkbox(mianka)", function (data) {
            let craft_list = [];
            let size = $(".sizeSpecialCard").val();
            let kindValueSelect = $(".kindValueSelect option:checked").text();
            let kindValue = $("input[name='kind']:checked").val();
            if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {

            } else {
                size = $("input[name='ls_size']").val();
            }
            if (kindValueSelect == '素芸') {
                size = $("input[name='size']").val();
            }
            $("input[name='craft']:checked").each(function () {
                    if (!$(this).is(':disabled')) {
                        craft_list.push($(this).val());
                    }
                }
            );
            const requiredCrafts = ["击凸", "压凹", "单面烫金", "双面烫金", "烫镭射银"];
            const allExist = requiredCrafts.filter(craft => craft_list.includes(craft));
            if (allExist.length > 1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("击凸 - 压凹 - 单面烫金 - 双面烫金 - 烫镭射银不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            const baimoCrafts = ["白墨", "单面烫金", "双面烫金"];
            const baimoExist = baimoCrafts.filter(craft => craft_list.includes(craft));
            if (baimoExist.length > 1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("白墨 - 烫金不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            const caiqie = ["圆角", "异形模切", "直角裁切"];
            const caiqieExist = caiqie.filter(craft => craft_list.includes(craft));
            if (caiqieExist.length > 1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("裁切方式不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            const yinmian = ["单面", "双面"];
            const yinmianExist = yinmian.filter(craft => craft_list.includes(craft));
            if (yinmianExist.length > 1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("印面工艺不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            if (craft_list.indexOf("打码") > -1 && craft_list.indexOf("异形模切") > -1) {
                if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
                    $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                    $(data.elem).prop("checked", false);
                    layer.msg("9*5.4 打码 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
            }
            if (craft_list.indexOf("印刷颜色") == -1 && kindValueSelect == "素芸" && kindValue == "300克") {
                $(data.elem).prop("checked", true);
                layer.msg("印刷颜色无法取消", {offset: ['300px', '300px']}, function () {
                });
                form.render();
                return false;
            }
            // if (kindValue == "300克" && craft_list.indexOf("压凹") > -1) {
            //     $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
            //     $(data.elem).prop("checked", false);
            //     layer.msg("素芸300克无法选择压凹工艺", {offset: ['300px', '300px']}, function () {
            //     });
            //     return false;
            // }
            if (craft_list.indexOf("击凸") > -1 || craft_list.indexOf("压凹") > -1) {
                if (craft_list.indexOf("击凸") > -1) {
                    $("#color_type select").empty().append(` <option value="无色" selected>无色</option>
                    <option value="有色">有色</option>
                    <option value="有色加激凸">有色加激凸</option>`)
                }
                if (craft_list.indexOf("压凹") > -1) {
                    $("#color_type select").empty().append(` <option value="无色" selected>无色</option>
                    <option value="有色">有色</option>
                    <option value="有色加压凹">有色加压凹</option>`)
                }
                $("#color_type").show();
                $("#color_type").find("select").attr("disabled", false);
            } else {
                $("#color_type").hide();
                $("#color_type").find("select").attr("disabled", true);
            }
            if (craft_list.indexOf("双面烫金") > -1 || craft_list.indexOf("单面烫金") > -1) {
                $("#tang_type").show();
                $("#tang_type").find("select").attr("disabled", false);
            } else {
                $("#tang_type").hide();
                $("#tang_type").find("select").attr("disabled", true);
            }
            if (craft_list.indexOf("烫镭射银") > -1) {
                $("#leishe_type").show();
                $("#leishe_type").find("select").attr("disabled", false);
            } else {
                $("#leishe_type").hide();
                $("#leishe_type").find("select").attr("disabled", true);
            }

            form.render();
        })
        // 监听工艺
        form.on('checkbox(switch)', function (data) {
            // if (data.value == '异形模切') {
            //     // 选中【异形模切】的时候，把【打孔】工艺禁用
            //     if (data.elem.checked) {
            //         $('.niupikaNoMQCraft').prop('disabled', 'disabled');
            //     } else {
            //         $('.niupikaNoMQCraft').removeAttr('disabled');
            //     }
            // }
            let size = $(".sizeSpecialCard").val();
            let kindValueSelect = $(".kindValueSelect option:checked").text();
            if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {

            } else {
                size = $("input[name='ls_size']").val();
            }
            if (kindValueSelect == '素芸') {
                size = $("input[name='size']").val();
            }

            let craft_list = [];
            $("input[name='craft']:checked").each(function () {
                    if (!$(this).is(':disabled')) {
                        craft_list.push($(this).val());
                    }
                }
            );
            let kindValue = $("select[name='kindValue'] option:selected").val();
            if (craft_list.indexOf("打码") > -1 && craft_list.indexOf("异形模切") > -1) {
                if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
                    $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                    $(data.elem).prop("checked", false);
                    layer.msg("9*5.4 打码 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
            }
            if (craft_list.indexOf("压痕") > -1 && craft_list.indexOf("异形模切") > -1) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("压痕 - 异形模切不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            if (craft_list.includes("配流苏") && craft_list.includes("穿流苏")) {
                $(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
                $(data.elem).prop("checked", false);
                layer.msg("配流苏 - 穿流苏不能同时选择", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            if (kindValue != "素芸") {
                $("#dakong").removeAttr('disabled');
                $("#craft_mo").removeAttr('disabled');
                $(".newCraft").children().removeAttr('disabled');
            }
            if ($("#dakong")[0].checked || $("#craft_yuanjiao")[0].checked) {
                $("#craft_dianxian").prop('disabled', 'disabled');
                $("#craft_mo").prop('disabled', 'disabled');
            }
            if ($("#craft_dianxian")[0].checked) {
                $("#dakong").prop('disabled', 'disabled');
                $("#craft_yuanjiao").prop('disabled', 'disabled');
                $("#craft_mo").prop('disabled', 'disabled');
            }
            if ($("#craft_mo")[0].checked) {
                $("#dakong").prop('disabled', 'disabled');
                $("#craft_yuanjiao").prop('disabled', 'disabled');
                $("#craft_dianxian").prop('disabled', 'disabled');
            }
            if (craft_list.indexOf("打码") > -1) {
                $("#dama").show();
                $("#dama").find("select").attr("disabled", false);
            } else {
                $("#dama").hide();
                // $("#dama").find("select").attr("disabled", true);
            }

            form.render();
            setRemark()
        })

        function setRemark() {
            let craft_list = [];
            $("input[name='craft']:checked").not("disabled").each(function () {
                    craft_list.push($(this).val());
                }
            );
            $("#remark").empty();
            let html = '';

            if (craft_list.indexOf('异形模切') == -1) {
                html = remark_html
            } else {
                html = remark_html
                html = html.replaceAll('2-3', '3-4');
            }

            $("#remark").append('<div><span>' + html + '<span/></div>');

            // 清空轮播图
            $("#carousel").empty();
            let data = {
                proTypeValue: "4",
                kindValue: "6"
            }
            if (craft_list.indexOf('异形模切') > -1) {
                data.craftValue = "异形模切"
            }
            if (craft_list.indexOf('打点线') > -1) {
                data.craftValue = "打点线"
            }
            if (craft_list.indexOf('圆角') > -1) {
                data.craftValue = "圆角"
            }
            if (craft_list.indexOf('打孔') > -1) {
                data.craftValue = "打孔"
            }
            html = ''
            $.ajax({
                url: "${pageContext.request.contextPath}/getImgs",
                type: "GET",
                data,
                //dataType : "json",
                success: function (result) {
                    for (let i = 0; i < result.length; i++) {
                        // 只留一个remark
                        html += '<div><img style="width:' + result[0].imgWidth + 'px" src="' + result[i].imgUrl + '"></div>';
                    }
                    $("#carousel").append(html);
                    // 如果没有说明，就不显示null

                    // 如果没有轮播图就隐藏
                    if (result.length == 0) {
                        document.getElementById("test1").style.display = "none";   //隐藏
                    } else {
                        document.getElementById("test1").style.display = "block";  //显示
                        ins.reload({
                            elem: '#test1',
                            width: result[0].imgWidth,  //设置容器宽度
                            height: result[0].imgHeight
                        });
                    }
                }
            });

        }

        form.on('checkbox(ui_craft)', function (data) {
            let craft_list = [];
            let kindValue = $('input[name="kindValue"]:checked').val();
            craft_list.push($("select[name='craft'] option:selected").val());
            $("input[name='craft']:checked").each(function () {
                if (!$(this).is(':disabled')) {
                    craft_list.push($(this).val());
                }
            });

            if (data.value == '抠图') {
                $(".crop").hide();
                $(".crop").find("input").prop("disabled", true)
                if (data.elem.checked) {
                    $(".crop").show();
                    $(".crop").find("input").prop("disabled", false)
                }
            }
            form.render();
        })
        // 点击计算，计算价格
        form.on('submit(acount_btn)', function (data) {
            if ($('input[name="switchCardCount"]:checked').length != 0) {
                if ($("#cardCount").val() > 200) {
                    layer.msg("特种纸名片 - 珠光纸自定义数量最大不超过200", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
            }
            // 特种纸名片材料
            var kindValueSelect = $(".kindValueSelect option:checked").text();
            let kindValue = $("input[name='kind']:checked").val();
            var size = $(".sizeSpecialCard").val();
            var number = $("#number").val();
            if (kindValueSelect != "500克拉丝闪银卡" && kindValueSelect != "500克拉丝闪金卡" && kindValueSelect != '素芸') {
                if ((size.split("*")[0] < 5 || size.split("*")[1] < 4.5) && (size.split("*")[0] < 4.5 || size.split("*")[1] < 5)) {
                    layer.msg("【特种纸名片】尺寸不能小于5*4.5 cm", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
            } else {
                size = $("input[name='ls_size']").val();
            }
            if (kindValueSelect == '素芸') {
                size = $("input[name='size']").val();
            }
            if ((size.split("*")[0] > 42 || size.split("*")[1] > 28.5) && (size.split("*")[0] > 28.5 || size.split("*")[1] > 42)) {
                layer.msg("【特种纸名片】尺寸不能大于42*28.5 cm", {offset: ['300px', '300px']}, function () {
                });
                return false;
            }
            if (kindValueSelect == '素芸') {
                if ((size.split("*")[0] < 3.5 || size.split("*")[1] < 3.5)) {
                    layer.msg("【特种纸名片-素芸】尺寸不能小于3.5*3.5 cm", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
                if (kindValue == '500克') {
                    if ((size.split("*")[0] > 21 || size.split("*")[1] > 15) && (size.split("*")[0] > 15 || size.split("*")[1] > 21)) {
                        layer.msg("【特种纸名片-500克素芸】尺寸不能大于21*15 cm", {offset: ['300px', '300px']}, function () {
                        });
                        return false;
                    }
                }
                if (kindValue == '300克') {
                    if ((size.split("*")[0] > 20 || size.split("*")[1] > 15) && (size.split("*")[0] > 15 || size.split("*")[1] > 20)) {
                        layer.msg("【特种纸名片-300克素芸】尺寸不能大于20*15 cm", {offset: ['300px', '300px']}, function () {
                        });
                        return false;
                    }
                }
            }
            var arr = []
            let ma_num = $("select[name='maxian'] option:selected").val();
            let is_dama = false;
            let arrs = [];
            $("input:checkbox[name='craft']:checked").each(function (i) {
                if (!$(this).is(':disabled')) {
                    arr.push($(this).val());
                    if ($(this).val() != "双面覆哑膜") {
                        if ($(this).val() == "单面烫金" || $(this).val() == "双面烫金") {
                            let tangColor = $("#tang_type select[name='craft'] option:selected").val();
                            arrs.push($(this).val().replace("烫金", "") + tangColor);
                        } else if ($(this).val() == "烫镭射银") {
                            let tangColor = $("#leishe_type select[name='craft'] option:selected").val();
                            arrs.push(tangColor);
                        } else if ($(this).val() == "打码") {
                            is_dama = true;
                            arrs.push($(this).val() + ma_num + "个");
                        } else if ($(this).val() == "单面" || $(this).val() == "双面") {
                            arrs.push($(this).val() + "印刷");
                        } else if ($(this).val() == "压凹" || $(this).val() == "击凸") {
                            arrs.push($("#color_type select option:selected").val() + $(this).val());
                        } else if ($(this).val() == "印刷颜色") {
                            arrs.push($(".printColor select[name='co_number'] option:selected").text());
                        } else if ($(this).val() == "抠图") {
                            arr.push($(this).val() + $("input[name='cropNumber']").val());
                            return;
                        } else {
                            arrs.push($(this).val());
                        }
                    }
                }
            });
            if (is_dama) {
                if ((size.split("*")[0] < 9 || size.split("*")[1] < 5.4) && (size.split("*")[0] < 5.4 || size.split("*")[1] < 9)) {
                    layer.msg("打码尺寸不能小于9*5.4 cm", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
                if (ma_num > 1) {
                    if ((size.split("*")[0] < 13 || size.split("*")[1] < 4.5) && (size.split("*")[0] < 4.5 || size.split("*")[1] < 13)) {
                        layer.msg("打码尺寸小于13*4.5 cm不能打多个码", {offset: ['300px', '300px']}, function () {
                        });
                        return false;
                    }
                }
            }
            if (kindValueSelect == '素芸') {
                const caiqie = ["圆角", "异形模切", "直角裁切"];
                const caiqieExist = caiqie.filter(craft => arr.includes(craft));
                if (caiqieExist.length == 0) {
                    layer.msg("素芸-请选择裁切工艺", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
                const yinmian = ["单面", "双面"];
                const yinmianExist = yinmian.filter(craft => arr.includes(craft));
                if (yinmianExist.length == 0) {
                    layer.msg("素芸-请选择印面工艺", {offset: ['300px', '300px']}, function () {
                    });
                    return false;
                }
                let color = $("select[name='craft']:not(:disabled) option:selected").val()
                if (color) {
                    arr.push(color);
                }
            }
            $.ajax({
                url: "${path}/getThanSum",
                type: "GET",
                data: $(".big_box form").serialize(),
                success: function (result) {
                    if (result.code == 100) {
                        layer.msg(result.msg, {offset: ['300px', '300px']}, function () {
                        });
                        return false;
                    }
                    var data = result.data.proList;
                    arr = arrs;
                    let kindValueSelectText = kindValueSelect;
                    if (kindValueSelectText == "素芸") {
                        kindValueSelectText = kindValue + kindValueSelectText;
                    }
                    var span_result = '特种纸名片' + "-" + kindValueSelectText + "-" + size
                        + "厘米-(同款内容) \n" + "工艺 :" + arr + "\n"
                    if (number > 1) {
                        if (window.parent.system_isPdd) {
                            let numberType = $("#desType option:selected").text();
                            span_result += "款数：" + number + "-" + numberType + "\n";
                        }
                        for (let i = 0; i < data.length; i++) {
                            span_result += number + '款 各' + data[i].count + "张，共" + data[i].price + "元" + '\n'
                            data[i].number = number;
                        }
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            span_result += number + '款 ' + data[i].count + "张，共" + data[i].price + "元" + '\n'
                            data[i].number = number;
                        }
                    }
                    span_result += '包邮，免费设计呢~（偏远地区需补邮费）'
                    if (window.parent.system_isGai) {
                        span_result += "\n\n亲 现在下单可以参加淘宝活动8.5折折扣哦!"
                    }
                    addLog(span_result);
                    $("#span_result").val(span_result);

                    var count = "";
                    var display = $("#noCraft").css("display");
                    var cardCount = [];
                    $("input:checkbox[name='switchCardCount']:checked").each(function (i) {
                        if (!$(this).is(':disabled')) {
                            cardCount.push($(this).val());
                        }
                    });

                    if (display != "none") {
                        count = $("#count1 option:selected").text();
                        if ($('.cardCount').css('display') != 'none') {
                            if (cardCount[0] == "on") {
                                count = $("#cardCount").val();
                            }
                        }
                    } else {
                        count = $("#count2 option:selected").text();
                    }

                    getRemark($("#proTypeValue").val(), size, count + "张", kindValueSelect, number, arr, "");
                    //计算完自动复制文本
                    var e = document.getElementById("span_result");//对象是content
                    if (e.value != "") {
                        e.select();//选择对象
                        document.execCommand("Copy");//执行浏览器复制命令
                    }

                    //生成表格
                    table.render({
                        elem: '#priceTable',
                        even: true, //隔行变色
                        data: data, // 赋值已知数据
                        width: 500,
                        cols: [[
                            {
                                field: 'number',
                                width: '12%',
                                align: "center",
                                title: '款数'
                            }, {
                                field: 'count',
                                width: '16%',
                                align: "center",
                                title: '数量'
                            }, {
                                field: 'price',
                                width: '16%',
                                align: "center",
                                title: '报价'
                            }, {
                                field: 'wangwang',
                                align: "center",
                                width: '16%',
                                title: '折扣价'
                            }, {
                                field: 'wangwang',
                                align: "center",
                                width: '19%',
                                title: '跳楼价'
                            }, {
                                field: 'weight',
                                width: '25%',
                                align: "center",
                                title: '重量约（kg）'
                            }
                        ]],
                        done: function () {
                        }
                    });
                }
            });
            return false;
        });
    });

</script>
</html>