<%@ 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>
<body>
<div class="big_box">
    <div class="left_div">
        <form class="layui-form">
            <p>
                车间
            </p>
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <select class="select" name="plantName">
                        <option value="彩印通">彩印通</option>
                    </select>
                </div>
            </div>
            <p>产品</p>
            <div class="layui-form-item">
                <select name="proTypeValue" id="proTypeValue" lay-filter="proTypeValue" class="select" lay-search>
                    <option value="卡片">卡片</option>
                    <option value="不干胶">不干胶</option>
                </select>
            </div>
            <p>
                材质
            </p>
            <div class="layui-form-item">
                <select name="kind" id="kind" lay-filter="kind" class="select" lay-search>
                    <option value="300克双铜纸">300克双铜纸</option>
                    <option value="300克单铜白卡">300克单铜白卡</option>
                    <option value="300克冰白卡纸">300克冰白卡纸</option>
                    <option value="300克荷兰白卡">300克荷兰白卡</option>
                    <option value="330克超白草香纸">330克超白草香纸</option>
                    <option value="350克雅柔纸">350克雅柔纸</option>
                    <option value="350克冰白卡纸">350克冰白卡纸</option>
                    <option value="350克荷兰白卡">350克荷兰白卡</option>
                    <option value="350克布纹">350克布纹</option>
                    <option value="350克蛋壳纹">350克蛋壳纹</option>
                    <option value="350克安格纹">350克安格纹</option>
                    <option value="350克刚古纹">350克刚古纹</option>
                    <option value="350克米黄刚古纹">350克米黄刚古纹</option>
                    <option value="350克米黄冰白">350克米黄冰白</option>
                    <option value="350克超白超感纸">350克超白超感纸</option>
                    <option value="雅柔毯纹超白">雅柔毯纹超白</option>
                </select>
            </div>
            <p>
                尺寸(CM/厘米) <span style="font-size:14px;color:red">输入格式: 长 * 宽 </span>
            </p>
            <span class="ui_zdy_size">
                    <input type="text" id="size" name="size" placeholder="格式:长*宽" class="layui-input" autocomplete="off">
                </span>
            <p>
                数量(个)
            </p>
            <div class="layui-form-item">
                <input type="text" placeholder="请输入整数" autocomplete="off" name="count" class="layui-input" id="count">
            </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>
            <p>
                工艺
            </p>
            <div class="layui-form-item" id='card_craft'>
                <div class="layui-input-block">
                    覆膜工艺：
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="哑膜" title="哑膜" checked>
                </div>
                <div class="layui-input-block">
                    裁切工艺：
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="直角裁切" title="直角裁切" checked>
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="模切" title="模切">
                </div>
            </div>
            <div class="layui-form-item" id='sticker_craft'>
                <div class="layui-input-block">
                    覆膜工艺：
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="哑膜" title="哑膜" checked>
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="亮膜" title="亮膜">
                </div>
                <div class="layui-input-block">
                    裁切工艺：
                    <input type="checkbox" name="craft" lay-filter="ui_craft" value="模切" title="模切" checked>
                </div>
            </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>
            <div>
                <table class="layui-hide" id="priceTable" lay-filter="priceTable"></table>
            </div>
        </form>
    </div>
    <div class="right_div" style="margin-left:50px;">
        <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;

        $("#sticker_craft").hide();
        $("#sticker_craft input").attr("disabled", true);
        $("#sticker_craft select").attr("disabled", true);

        form.on('select(proTypeValue)', function (data) {
            let html = `<option value="300克双铜纸">300克双铜纸</option>
                    <option value="300克单铜白卡">300克单铜白卡</option>
                    <option value="300克冰白卡纸">300克冰白卡纸</option>
                    <option value="300克荷兰白卡">300克荷兰白卡</option>
                    <option value="330克超白草香纸">330克超白草香纸</option>
                    <option value="350克雅柔纸">350克雅柔纸</option>
                    <option value="350克冰白卡纸">350克冰白卡纸</option>
                    <option value="350克荷兰白卡">350克荷兰白卡</option>
                    <option value="350克布纹">350克布纹</option>
                    <option value="350克蛋壳纹">350克蛋壳纹</option>
                    <option value="350克安格纹">350克安格纹</option>
                    <option value="350克刚古纹">350克刚古纹</option>
                    <option value="350克米黄刚古纹">350克米黄刚古纹</option>
                    <option value="350克米黄冰白">350克米黄冰白</option>
                    <option value="350克超白超感纸">350克超白超感纸</option>
                    <option value="雅柔毯纹超白">雅柔毯纹超白</option>`;
            $("#sticker_craft").hide();
            $("#sticker_craft input").attr("disabled", true);
            $("#sticker_craft select").attr("disabled", true);
            $("#card_craft").hide();
            $("#card_craft input").attr("disabled", true);
            $("#card_craft select").attr("disabled", true);
            if (data.value == '卡片') {

                $("#card_craft").show();
                $("#card_craft input").attr("disabled", false);
                $("#card_craft select").attr("disabled", false);
            }
            if (data.value == '不干胶') {
                $("#sticker_craft").show();
                $("#sticker_craft input").attr("disabled", false);
                $("#sticker_craft select").attr("disabled", false);

                html = `<option value='加厚铜版纸不干胶'>加厚铜版纸不干胶</option>
                        <option value='铜板可移不干胶'>铜板可移不干胶</option>
                        <option value='透明不干胶'>透明不干胶</option>
                        <option value='亚银不干胶'>亚银不干胶</option>
                        <option value='PVC不干胶'>PVC不干胶</option>
                        <option value='pp合成纸不干胶'>pp合成纸不干胶</option>
                        <option value='素面银镭射'>素面银镭射</option>
                        <option value='拉丝银'>拉丝银</option>
                        <option value='拉丝金'>拉丝金</option>
                        <option value='亮银'>亮银</option>
                        <option value='亮金'>亮金</option>
                        <option value='哑金'>哑金</option>
                        <option value='牛皮纸'>牛皮纸</option>
                        <option value='书写纸'>书写纸</option>
                        <option value='易碎纸'>易碎纸</option>
                        <option value='大红洒金'>大红洒金</option>
                        <option value='白底洒金'>白底洒金</option>
                        <option value='白美纹'>白美纹</option>
                        <option value='白美纹洒金'>白美纹洒金</option>
                        <option value='洒金宣纸(白色)'>洒金宣纸(白色)</option>
                        <option value='水纹洒金'>水纹洒金</option>
                        <option value='刚古水纹纸(白色)'>刚古水纹纸（白色)</option>
                        <option value='大地纸(白草香)'>大地纸(白草香)</option>
                        <option value='米色七彩(树纹)'>米色七彩(树纹)</option>
                        <option value='白布纹纸'>白布纹纸</option>
                        <option value='珠光冰白'>珠光冰白</option>
                        `
            }
            $("select[name='kind']").empty().append(html);
            form.render()
        })

        // 点击计算，计算价格
        form.on('submit(acount_btn)', function (data) {
            var number = $("#number").val();
            var size = $("#size").val();
            var count = $("#count").val();
            var proTypeValue = $("#proTypeValue").val();
            var kind = $("select[name='kind'] option:selected").text();

            var craft = [];
            $("input:checkbox[name='craft']:checked").each(function (i) {
                // 没有被禁用的工艺加到arr中
                if (!$(this).is(':disabled')) {
                    craft.push($(this).val());
                }
            });

            $.ajax({
                url: "${path}/getProductCastPrice",
                type: "POST",
                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;


                    var span_result = proTypeValue + ' - ' + kind;

                    span_result += "-" + size + ' CM\n';
                    span_result += "工艺：" + craft + '\n';
                    for (let i = 0; i < data.length; i++) {
                        span_result += number + '款 各' + data[i].count + "张，共" + data[i].price + "元" + '\n'
                        data[i].number = number;
                        let providePrices = data[i].providePrices;
                        if (providePrices && providePrices.length > 0) {
                            for (let item in providePrices) {
                                span_result += providePrices[item].name + "：" + providePrices[item].price + "元。共" + Number(data[i].price + providePrices[item].price).toFixed(2) + '\n'
                            }
                        }

                    }

                    $("#span_result").val(span_result);

                    //计算完自动复制文本
                    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: '21%',
                                align: "center",
                                title: '重量（kg）'
                            }
                        ]],
                        done: function () {
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</html>