<%@ 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>
</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="10">
            <p>
                材质
            </p>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="0"
                           title="白卡纸卡扣杯套300克(90-95口径通用)">
                    <!--<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="1" title="瓦楞纸杯套">-->
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="3"
                           title="300克手柄杯套(90-95口径通用)">
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="4"
                           title="300克异形手柄杯套(不限形状)">
                    <!--<input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="2" title="异形杯套(不限形状)">-->
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="5"
                           title="铜版纸杯套300克">
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="6"
                           title="300克盲盒杯套">
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="7"
                           title="300克白卡三层瓦楞杯套">
                    <input type="radio" lay-filter="kindValue" name="kindValue" class="kindValue" value="8"
                           title="300克单层白卡杯套(90-96口径通用)">
                </div>
            </div>
            <div id="normal">
                <p>
                    尺寸（mm）
                </p>
                <%--					<input type="radio" name="bkz_size" value="262*75mm" title="262*75mm" checked>--%>
                <%--					<input type="radio" name="bkz_size" value="270*75mm" title="270*75mm">--%>
                <input type="radio" name="bkz_size" value="272*78mm" title="272x78mm （高度6CM）" checked>
                <input type="radio" name="bkz_size" value="270*68mm" title="270x68mm （高度5CM）">
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count">
                        <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>
            <div id="normal1">
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count1">
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="3000">3000</option>
                        <option value="5000">5000</option>
                        <option value="10000">10000</option>
                        <option value="20000">20000</option>
                    </select>
                </div>
            </div>
            <div id="normal3">
                <p>
                    尺寸（cm）
                </p>
                <input type="radio" name="s" class="size" value="29*7cm" title="29*7cm" checked id="sSize">
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count2">
                        <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_kind5">
                <p>
                    工艺
                </p>
                <div class="layui-form-item">
                    <input type="checkbox" name="craft" value="异形模切" title="异形模切" lay-filter="craft_btn" checked/>
                    <input type="checkbox" name="craft" value="单面覆膜" title="双面覆哑膜" lay-filter="craft_btn" checked/>
                    <input type="checkbox" name="craftTang" value="粘成品" title="粘成品" lay-filter="craft_btn"/>
                </div>
                <div class="diySize">
                    <p>
                        尺寸（cm）
                    </p>
                    <input type="text" name="size" placeholder="长*宽" id="diySize" class="layui-input">
                </div>
                <div class="fixWidth" style="display: none">

                    <p>
                        长幅
                    </p>
                    <div class="layui-form-item fixedSizeCoupon">
                        <select name="width" id="width" class="select">
                            <option value="26.4">264mm长幅（套常规500或700毫升98口径奶茶杯）</option>
                            <option value="24.7">247mm长幅（套常规500或700毫升90口径奶茶杯）</option>
                            <option value="26.1">261mm长幅（套常规500或700毫升95口径奶茶杯）</option>
                        </select>
                    </div>
                    <p>
                        宽尺寸（cm）<span style="font-size:14px;color:red">输入格式: 宽</span>
                    </p>
                    <div class="layui-form-item">
                        <input type="text" name="length" id="ui_size" placeholder="" class="layui-input">
                    </div>
                </div>

                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count4">
                        <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="alien">
                <p>
                    尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
                </p>
                <div class="layui-form-item">
                    <input type="text" placeholder="格式:长*宽" name="size" id="size" class="layui-input"
                           autocomplete="off">
                </div>
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input"
                           id="count3">
                </div>
            </div>
            <div id="ui_kind6">
                <p>
                    尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽</span>
                </p>
                <div class="layui-form-item">
                    <input type="radio" name="mh_size" value="290*70" title="290*70mm(盲盒手柄杯套)" checked>
                    <input type="radio" name="mh_size" value="262*75" title="262*75mm(盲盒卡扣)" checked>
                </div>
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count4">
                        <option value="5000">5000</option>
                    </select>
                </div>
            </div>
            <div id="ui_kind7">
                <p>
                    尺寸
                </p>
                <div class="layui-form-item">
                    <input type="radio" name="mh_size" value="277*70" title="277*70mm" checked>
                </div>
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count5">
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="2000">2000</option>
                        <option value="3000">3000</option>
                        <option value="4000">4000</option>
                        <option value="5000">5000</option>
                        <option value="6000">6000</option>
                        <option value="7000">7000</option>
                        <option value="8000">8000</option>
                        <option value="9000">9000</option>
                        <option value="10000">10000</option>
                    </select>
                </div>
            </div>
            <div id="ui_kind8">
                <p>
                    尺寸
                </p>
                <div class="layui-form-item">
                    <%--						<input type="radio" name="dc_size" value="262*76" title="262*76mm" checked>--%>
                    <input type="radio" name="dc_size" value="247*71" title="247*71（90口径500-700ml）" checked>
                    <input type="radio" name="dc_size" value="261*73" title="261*73（95口径500-700ml）">
                    <input type="radio" name="dc_size" value="262*76" title="262*76（98口径500-700ml）">
                </div>
                <p>
                    数量（个）
                </p>
                <div class="layui-form-item">
                    <select name="count" class="select" id="count6">
                        <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" id="number" value="1"
                       class="layui-input" lay-verify="number">
            </div>
            <p>
                客户旺旺
            </p>
            <div class="layui-form-item">
                <input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang"
                       class="layui-input">
            </div>
            <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>
    layui.use(['table', 'form', 'carousel'], function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        var carousel = layui.carousel;
        var table = layui.table;

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

        // 默认禁用异形杯套
        $("#alien").hide()
        $("#alien").find(":input").attr("disabled", true);
        $("#normal1").hide()
        $("#normal1").find(":input").attr("disabled", true);
        $("#normal3").hide()
        $("#normal3").find(":input").attr("disabled", true);
        $("#ui_kind5").hide();
        $("#ui_kind5").find(":input").attr("disabled", true);
        $("#ui_kind6").hide();
        $("#ui_kind6").find(":input").attr("disabled", true);
        $("#ui_kind7").hide();
        $("#ui_kind7").find(":input").attr("disabled", true);
        $("#ui_kind8").hide();
        $("#ui_kind8").find(":input").attr("disabled", true);
        /* form.on('checkbox(switchSizeCoupon)', function(data) {
            if(data.elem.checked){
                $('.switchSizeCoupon').val("on")
                $(".ui_zdy_size").show();
                $(".ui_size").hide();
                $(".ui_zdy_size").find(":input").attr("disabled", false);
                $(".ui_size").find(":input").attr("disabled", true);
            } else {
                $('.switchSizeCoupon').val("off")
                $(".ui_size").show();
                $(".ui_zdy_size").hide();
                $(".ui_size").find(":input").attr("disabled", false);
                $(".ui_zdy_size").find(":input").attr("disabled", true);
                // 恢复标准数量的时候会被禁用，加这个解决
                form.render();
            }
        }); */
        form.on("checkbox(craft_btn)", function (data) {
            if (!data.elem.checked && (data.value == "异形模切" || data.value == "单面覆膜")) {
                layer.msg("300克铜版纸模切覆膜工艺必选", {offset: ['300px', '300px']}, function () {
                });
                $("input[name='craft'][value='异形模切']").prop('checked', true);
                form.render('checkbox');
                return false;
            }
            $(".diySize").show();
            $(".diySize").find(":input").attr("disabled", false);
            $(".fixWidth").hide();
            $(".fixWidth").find(":input").attr("disabled", true);
            if ($("input[name='craftTang']").is(":checked")) {
                $(".diySize").hide();
                $(".diySize").find(":input").attr("disabled", true);
                $(".fixWidth").show();
                $(".fixWidth").find(":input").attr("disabled", false);
            }
            form.render();
        })

        form.on('radio(kindValue)', function (data) {
            if (data.value == 0 || data.value == 2) {
                $("#normal").show()
                $("#normal").find(":input").attr("disabled", false);
            } else {
                $("#normal").hide()
                $("#normal").find(":input").attr("disabled", true);
            }

            if (data.value == 1) {
                $("#normal1").show()
                $("#normal1").find(":input").attr("disabled", false);
            } else {
                $("#normal1").hide()
                $("#normal1").find(":input").attr("disabled", true);
            }

            if (data.value == 3 || data.value == 4) {
                $("#normal3").show()
                $("#normal3").find(":input").attr("disabled", false);
            } else {
                $("#normal3").hide()
                $("#normal3").find(":input").attr("disabled", true);
            }

            if (data.value == 5) {
                $("#ui_kind5").show();
                $("#ui_kind5").find(":input").attr("disabled", false);
            } else {
                $("#ui_kind5").hide();
                $("#ui_kind5").find(":input").attr("disabled", true);
            }

            if (data.value == 6) {
                $("#ui_kind6").show();
                $("#ui_kind6").find(":input").attr("disabled", false);
            } else {
                $("#ui_kind6").hide();
                $("#ui_kind6").find(":input").attr("disabled", true);
            }

            if (data.value == 7) {
                $("#ui_kind7").show();
                $("#ui_kind7").find(":input").attr("disabled", false);
            } else {
                $("#ui_kind7").hide();
                $("#ui_kind7").find(":input").attr("disabled", true);
            }

            if (data.value == 8) {
                $("#ui_kind8").show();
                $("#ui_kind8").find(":input").attr("disabled", false);
            } else {
                $("#ui_kind8").hide();
                $("#ui_kind8").find(":input").attr("disabled", true);
            }

            var html = " ";
            var remark = " ";
            // 清空轮播图
            $("#carousel").empty();
            $("#remark").empty();
            if (1) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/getImgs",
                    type: "GET",
                    data: {
                        proTypeValue: $("#proTypeValue").val(),
                        kindValue: $('input[name="kindValue"]:checked').val()
                    },
                    //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").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
                            });
                        }
                    }
                });
            }
        });

        // 点击计算，计算价格
        form.on('submit(acount_btn)', function (data) {
            var kindData = {
                0: "白卡纸卡扣杯套300克(90-95口径通用)",
                1: "300克瓦楞纸杯套",
                2: "300克异形杯套(不限形状)",
                3: "300克手柄杯套(90-95口径通用)",
                4: "300克异形手柄杯套(不限形状)",
                5: "铜版纸杯套300克",
                6: "300克盲盒杯套",
                7: "300克白卡三层瓦楞杯套",
                8: "300克单层白卡杯套(90-98口径通用)"
            };
            var kind = kindData[$('input[name="kindValue"]:checked').val()];
            var number = $("#number").val();
            var size = "";
            if (kind == "300克手柄杯套(90-98口径通用)" || kind == "300克异形手柄杯套(不限形状)") {
                size = $(".size").val();
            } else if (kind == "铜版纸杯套300克") {
                size = $("#ui_size").val();
            }

            $.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;
                    if (kind == "300克异形杯套(不限形状)") {
                        var span_result = '杯套 - ' + kind + ' - ' + size + 'cm\n';
                    } else if (kind == "白卡纸卡扣杯套300克(90-95口径通用)") {
                        size = $("input[name='bkz_size']:checked").val();
                        var span_result = '杯套 - ' + kind + ' - ' + size + '\n';
                    } else if (kind == "300克白卡三层瓦楞杯套") {
                        var span_result = '杯套 - ' + kind + ' - 277*70 mm\n';
                    } else if (kind == "300克单层白卡杯套(90-98口径通用)") {
                        size = $("input[name='dc_size']:checked").attr("title");
                        var span_result = '杯套 - ' + kind + ' - ' + size + ' \n';
                    } else if (kind == "300克盲盒杯套") {
                        var k = "";
                        if ($("input[name='mh_size']:checked").val() == "290*70") {
                            k = kind + '(300克盲盒手柄杯套)';
                        } else {
                            k = kind + '(300克盲盒卡扣)';
                        }
                        var span_result = '杯套 - ' + k + ' - ' + $("input[name='mh_size']:checked").val() + 'mm\n';
                    } else if (kind == "铜版纸杯套300克") {
                        var arr = [];
                        $("input:checkbox[name='craft']:checked").each(function (i) {
                            if (!$(this).is(':disabled')) {
                                if ($(this).val() == "单面覆膜") {
                                    arr.push("双面覆哑膜");
                                } else {
                                    arr.push($(this).val());
                                }
                            }
                        });
                        if ($("input[name='craftTang']:checked").val() != null) {
                            arr.push($("input[name='craftTang']:checked").val());
                        }
                        let size = $("#diySize").val();
                        if ($("input[name='craftTang']").is(":checked")) {
                            size = $("select[name='width'] option:selected").val() + '*' + $("#ui_size").val()
                        }
                        var span_result = '杯套 - ' + kind + '-' + arr + ' - ' + size + 'cm\n';
                    } else {
                        var span_result = '杯套 - ' + kind + ' - ' + [size] + '\n';
                        //var span_result ='杯套 - ' +  kind +'\n';
                    }
                    if (kind == "盲盒杯套") {
                        if (number > 1) {
                            span_result += number + '款 各5个内容' + data[0].count + "个，共" + data[0].price + "元" + '\n';
                        } else {
                            span_result += number + '款5个内容' + data[0].count + "个，共" + data[0].price + "元" + '\n';
                        }
                    } else {
                        if (number > 1) {
                            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 = $("select[name='count'] option:selected").val();
                    var size = "";
                    var type = $('input[name="kindValue"]:checked').val();
                    if (type == 0) {
                        size = $("input[name='bkz_size']").val();
                        count = $("#count").val();
                    } else if (type == 1) {
                        size = "125*55mm";
                        count = $("#count1 option:selected").val();
                    } else if (type == 5) {
                        size = $("#ui_size").val();
                        count = $("#count4 option:selected").val();
                    } else if (type == 7) {
                        size = $("input[mh_size]").val();
                        count = $("#count5 option:selected").val();
                    } else if (type == 8) {
                        size = $("input[dc_size]").val();
                        count = $("#count6 option:selected").val();
                    } else {
                        size = $("#sSize").val();
                        size = size.replace("cm", "");
                        count = $("#count2 option:selected").val();
                    }

                    //getRemark("杯套", size, count+"个", kind, number, "", "");
                    //计算完自动复制文本
                    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>