<%@ 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>
.layui-input{
	display:inline-block;
}
</style>

<body>
	<div class="big_box">
		<div class="left_div">
			<h1 class="h1">房卡套</h1> <span style="color:red;font-weight:700;"></span>
			<hr class="layui-bg-red">
			<form class="layui-form">
				<div class="layui-input-block">
					<input type="radio" name="k" class="k" lay-filter="k" value="0" title="常规卡套"> 
					<!--<input type="radio" name="k" class="k" lay-filter="k" value="1" title="自定义卡套">--> 
				</div>
			</form>
			<form class="layui-form" id="roomCardForm">
				<input type="hidden" name="proTypeValue" id="proTypeValue" class="layui-input" value="7" >
				<div class="cg" style="display: none">
					<%@include file="roomCardCG.jsp"%>
				</div>
				<div class="zdy" style="display: none">
					<%@include file="roomCardZDY.jsp"%>
				</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>
				<input type="checkbox" name="craft" class="tangjin" lay-filter="switch" value="单面局部烫金" title="单面局部烫金">
				<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>
				<hr>
				<div class="layui-form-item">
					<button class="layui-btn" lay-submit="" lay-filter="acount_btn" id="queryCondBtn">计算</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="../acountExpressFeeTooWeight.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;
	
 	// 监听回车键，如果敲了回车，调用点击‘计算’
    $(document).keydown(function (e) {
    	if (e.keyCode === 13) {
    		$("#queryCondBtn").trigger("click");
    	}
    });
    
	//建造实例
     ins = carousel.render({});
	
	// 选择是常规还是自定义
	form.on('radio(k)', function(data){
		// $("#roomCardForm")[0].reset();
        var level = data.value;//被点击的radio的value值
        // 常规
        if(level == 0){
        	form.on('select(kindValue)', function (data){ 
        		var html   = " ";
    			var remark = " ";
    			// 清空轮播图
    			$("#carousel").empty();
    			$("#remark").empty();
    			$.ajax({
    				url:"${pageContext.request.contextPath}/getImgs",
    				type:"GET",
    				data:{
    					proTypeValue : $("#proTypeValue").val(),
    					kindValue 	 : $("#kindValue").val()
    					//$(".big_box form").serialize(),
    				},
    				//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
				            });
						}
    				}
    			});
        	})
	        $(".cg").show();
	        $(".zdy").hide();
	        $(".zdy").find(":input").attr("disabled", true);  
	        $(".cg").find(":input").attr("disabled", false);  
        }else{
        	$(".cg").hide();
	        $(".zdy").show();
	        $(".zdy").find(":input").attr("disabled", false);  
	        $(".cg").find(":input").attr("disabled", true);  
        }

		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) {
			var number= $("#number").val();
			// 自定义尺寸
			if(level == 1){
				var lengthSize = $(".lengthSize").val();
				var widthSize  = $(".widthSize").val();
				var heightSize = $(".heightSize").val();
				if(lengthSize == "" || widthSize == "" || heightSize == ""){
					layer.msg("请填写正确的长宽高！",{offset:['300px','300px']},function(){});
					return false;
				}	
				var count =$("#count").val();
				if(!count){
					layer.msg('请输入数量！',{offset:['300px','300px']},function(){});
					return false;
				}
			}
			
			var arr = [];
			$("input:checkbox[name='craft']:checked").each(function(i) {
				// 没有被禁用的工艺加到arr中
				if(!$(this).is(':disabled')){
					if ($(this).val() == "抠图") {
						arr.push($(this).val() + $("input[name='cropNumber']").val());
						return;
					}
					arr.push($(this).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(level == 0){
						var kindData={
							0 :"对折式成品6.2*9.7CM",	
							1 :"直角口袋式成品6.2*9.5CM",
							2 :"异形口袋式成品6.2*9.5CM"
						};		
						var kind = kindData[$("#kindValue").val()];
						var span_result ='房卡套 - ' + "250克白卡纸 - 单面覆哑膜" +'\n规格 :'+ kind +' -(同款内容)\n' + '工艺： ' + arr + '\n';
					}else{
						var kindData={
							0 :"双面覆膜",
							1 :"不覆膜"
						};	
						var kind = kindData[$('input[name="kind2Value"]:checked').val()];
						var size = "长" + lengthSize+ " 宽" + widthSize+ " 舌头" + heightSize
						var span_result ='房卡套 - ' + "300克铜版纸 - " + kind +'\n规格 :'+ size +' CM -(同款内容)\n' + '工艺： ' + arr + '\n';
					}
					
					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 size = "";
					var count = "";
					if(level == 0){
						var index = kind.indexOf("品");
						size = kind.substring(index+1, kind.length);
						size = size.replace("CM", "");
						count = $("#count1 option:selected").val();
					}else{
						size = lengthSize + "*" + widthSize + "*" + heightSize;
						count = $("#count").val();
					}
					
					var craft = "单面覆哑膜" + arr;
					getRemark("房卡套", size, count+"个", "250克白卡纸", number, craft, "");
					//计算完自动复制文本
					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>