<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="@@baseUrl">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="/static/weixin/css/public.css">
    <link rel="stylesheet" href="/static/weixin/css/wechat_add_new.css">
    <link rel="stylesheet" href="/static/weixin/css/basic.css">
    <script src="/static/weixin/js/flexible.js"></script>
    <style>
        .hall-booth .hall-booth-content h2 span.name {
             white-space: normal;
        }
    </style>
    <title>展厅展位</title>

</head>
<body id="contain">
<div class="contain lm_contain">
    <div class="bai-head">
        <span>展厅展位</span>
        <a id="goBack" class="left">
            <img src="/static/weixin/images/head-left.png"/>
        </a>
    </div>
    <h1 class="lm_tit">设置展厅及展位后，即可随时查看展位投保情况。</h1>
    <div class="lm_booth_content">
        <%--<div class="hall-booth">--%>
            <%--<div class="hall-booth-content">--%>
                <%--<h2>--%>
                    <%--<span class="name">建筑保险展会A01展厅</span>--%>
                    <%--<span class="zhan">展厅设置</span>--%>
                <%--</h2>--%>
                <%--<div class="hall-add-kong">--%>
                    <%--<div class="add-kong">--%>
                        <%--<span class="add">+添加展位</span>--%>
                        <%--<span class="kong">清空展位</span>--%>
                    <%--</div>--%>
                    <%--<div class="lm_content">--%>
                        <%--<ul>--%>
                            <%--<li>--%>
                                <%--<span>A001</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A002</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A003</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A004</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A005</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A006</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A007</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A008</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A009</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0010</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0011</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0012</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0013</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0014</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0015</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0016</span>--%>
                            <%--</li>--%>
                            <%--<li>--%>
                                <%--<span>A0017</span>--%>
                            <%--</li>--%>
                        <%--</ul>--%>
                    <%--</div>--%>

                    <%--<div class="down-tip">--%>
                        <%--<a href="javascript:;" class="down-show">--%>
                        <%--</a>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="hall-booth">--%>
            <%--<div class="hall-booth-content">--%>
                <%--<h2>--%>
                    <%--<span class="name">建筑保险展会A02展厅</span>--%>
                    <%--<span class="zhan">展厅设置</span>--%>
                <%--</h2>--%>
                <%--<div class="hall-add-kong">--%>
                    <%--<div class="add-kong">--%>
                        <%--<span class="add none_number">+添加展位</span>--%>
                    <%--</div>--%>
                    <%--<div class="lm_content">--%>
                        <%--<ul></ul>--%>
                    <%--</div>--%>
                    <%--<div class="down-tip">--%>
                        <%--<a href="javascript:;" class="down-show">--%>
                        <%--</a>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    </div>
</div>
<div class="pro-steps assigned-steps">
    <div class="steps">
        <button class="xia">+增加展厅</button>
        <button class="save">保存</button>
    </div>
</div>

<!--弹窗-->
<!--展厅设置-->
<div class="exhibition_hall_setting lm_hall_detailed">
    <div class="hall_header">
        <p>展厅设置</p>
        <span><img src="/static/weixin/images/search-error.png"></span>
    </div>
    <div class="hall_content">
        <p>展厅名称</p>
        <input type="text" placeholder="请填写新的展厅名称">
    </div>
    <div class="hall_footer_one">
        <span class="strike_out">删除该展厅</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--新增展厅-->
<div class="new_exhibition_hall lm_hall_detailed">
    <div class="hall_header">
        <p>新增展厅</p>
        <span><img src="/static/weixin/images/search-error.png"></span>
    </div>
    <div class="hall_content">
        <p>展厅名称</p>
        <input type="text" placeholder="请填写展厅名称">
        <p class="red"></p>
    </div>
    <div class="hall_footer_one">
        <span class="cancel">取消</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--添加展位-->
<div class="add_booth lm_hall_detailed">
    <div class="hall_header">
        <p>添加展位</p>
        <span><img src="/static/weixin/images/search-error.png"></span>
    </div>
    <div class="hall_content">
        <%--<h2>填写规范：<br/>展位号标识：大写英文字母或中文组合--%>
            <%--<br/>展位号区间：001-999</h2>--%>
        <p>展位号标识</p>
        <%--<input class="mark" type="text" placeholder="如: A 或 特" onkeyup="value=value.replace(/[^A-Z\u4e00-\u9fa5]/g,'')">--%>
            <input class="mark" type="text" placeholder="如: A 或 特" >
        <p>展位号区间</p>
        <div class="number_identification">
            <input class="start" type="text" placeholder="最小001"  id="number_start" >
            <i>-</i>
            <input class="end" type="text" placeholder="最大999" id="number_end" >
        </div>
        <p class="red"></p>
    </div>
    <div class="hall_footer_one">
        <span class="cancel">取消</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--展位设置-->
<div class="booth_settings lm_hall_detailed">
    <div class="hall_header">
        <p>展位设置</p>
        <span><img src="/static/weixin/images/search-error.png"></span>
    </div>
    <div class="hall_content">
        <p>展位号</p>
        <input type="text" placeholder="请填写要删除的展位号" id="settings_value">
    </div>
    <div class="hall_footer_one">
        <span class="shan">删除该展位号</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--清空展位-->
<div class="empty_booth lm_hall_detailed">
    <div class="hall_content">
        <img src="/static/weixin/images/lm_Promotion-s3.png">
        <p class="clear_prompt_text">清空XXXX展厅的所有展位号，清空可再次设置展位。已投保展位不清空，是否确认清空？</p>
    </div>
    <div class="hall_footer_one">
        <span class="cancel">取消</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--返回提示-->
<div class="go_back_prompt lm_hall_detailed">
    <div class="hall_content">
        <img src="/static/weixin/images/lm_Promotion-s3.png">
        <br><p>返回并放弃本次编辑？</p>
    </div>
    <div class="hall_footer_one">
        <span class="cancel">取消</span>
        <span class="sure">确定</span>
    </div>
</div>

<!--保存展位-->
<div class="save_booth lm_hall_detailed">
    <div class="hall_content">
        <img src="/static/weixin/images/lm_Promotion-s4.png">
        <p class="save_prompt">XXX展厅未添加展位，请添加展位后再提交！</p>
    </div>
    <div class="hall_footer_one hall_footer_two">
        <span class="sure">我知道了</span>
    </div>
</div>

<!--蒙版-->
<div class="mask_block"></div>
<script src="/static/weixin/js/jquery-1.8.3.min.js"></script>
<script src="/static/weixin/common/layer_mobile/layer.js"></script>
<script src="/static/weixin/js/jquery.formHelper.js"></script>
<script src="/static/weixin/js/g.js"></script>
<link rel="stylesheet" href="/static/weixin/common/layer_mobile/need/right.css">
<script>
    $("#number_start").on("keyup",function(){
        limitNum(3,this);
    });
    $("#number_end").on("keyup",function(){
        limitNum(3,this);
    });
    function limitNum(num,obj){
        var  value = $(obj).val();
        value=value.replace(/[^\d]/g,'');
        if(value.length>num){
            value = value.substr(0,value.length-1);
        }
        $(obj).val(value);
    }

    //初始化渲染
    function init(){
        var json  = JSON.parse(sessionStorage.getItem("add_exhibitions"));
        //遍历JSON获得html
        var str = "";
        for(var i in json){
//            json[i]
            str +=
                '<div class="hall-booth">'
                + '	<div class="hall-booth-content">'
                + '		<h2>'
                + '			<span class="name">'+i+'</span>'
                + '			<span class="zhan">展厅设置</span>'
                + '		</h2>'
                + '		<div class="hall-add-kong">'
                + '			<div class="add-kong">'
                + '				<span class="add">+添加展位</span>'
                + '				<span class="kong">清空展位</span>'
                + '			</div>'
                + '			<div class="lm_content">'
                + '				<ul>';
            for(var j in json[i]){
                str+='<li><span>'+json[i][j]+'</span></li>'
            }
            str +=
                '				</ul>'
                + '			</div>'
                + '			<div class="down-tip">'
                + '				<a href="javascript:;" class="down-show">'
                + '				</a>'
                + '			</div>'
                + '		</div>'
                + '	</div>'
                + '</div>';
        }
        $(".lm_booth_content").html(str);
    }(init())

    function bindAllEvent(){
        //点击弹窗上的X或者取消，弹窗与蒙版消失隐藏
        $('.lm_hall_detailed .hall_header span').unbind("click").click(function () {
            $('.mask_block').hide();
            $('.lm_hall_detailed').hide();
            $('.hall-add-kong ul li span').removeClass('active');
        });
        $('.lm_hall_detailed .hall_footer_one .cancel').unbind("click").click(function () {
            $('.mask_block').hide();
            $('.lm_hall_detailed').hide();
        });

        //点击新增展厅，新增展厅弹窗出现
        $('.assigned-steps.pro-steps .xia').unbind("click").click(function () {
            $('.mask_block').show();
            $('.new_exhibition_hall').show();
            $('.new_exhibition_hall span.sure').unbind("click").click(function () {
                input_val = $.trim($('.new_exhibition_hall .hall_content input').val());
                if (input_val !== '') {
                    var str = "";
                    str +='<div class="hall-booth">'
                        + '	<div class="hall-booth-content">'
                        + '		<h2>'
                        + '			<span class="name">'+input_val+'</span>'
                        + '			<span class="zhan">展厅设置</span>'
                        + '		</h2>'
                        + '		<div class="hall-add-kong">'
                        + '			<div class="add-kong">'
                        + '				<span class="add none_number">+添加展位</span>'
                        + '			</div>'
                        + '			<div class="lm_content">'
                        + '				<ul></ul>'
                        + '			</div>'
                        + '			<div class="down-tip">'
                        + '				<a href="javascript:;" class="down-show">'
                        + '				</a>'
                        + '			</div>'
                        + '		</div>'
                        + '	</div>'
                        + '</div>';
                    $('.lm_booth_content').append(str);

                    $('.new_exhibition_hall .hall_content input').val('');
                    $('.new_exhibition_hall p.red').text('');
                    $('.new_exhibition_hall p.red').hide();
                    $('.mask_block').hide();
                    $('.lm_hall_detailed').hide();
                    bindAllEvent()
                }else{
                    $('.new_exhibition_hall p.red').css({"display":'block',"padding-top": '13px'}).text('不能输入空格或不填写');
//                alert('不能输入空格或不填写');
                }

            });
        });

        //点击展位号，展位设置弹窗出现
        $('.hall-add-kong ul li span').unbind("click").click(function () {
            $('.mask_block').show();
            $('.booth_settings').show();
            $('.booth_settings .hall_content input').val($(this).text());
            $('.hall-add-kong ul li span').removeClass('active');
            $(this).addClass('active');
            //点击展位设置弹窗上的删除展位号
            booth_index = $(this).parents('.hall-booth').index();
            li_index = $(this).parent('li').index();
            $('.booth_settings .hall_footer_one span.shan').unbind("click").click(function () {
                if(li_index !== null){
                    $('.lm_booth_content .hall-booth').eq(booth_index).find($('.hall-add-kong ul li')).eq(li_index).remove();
                }
                $('.mask_block').hide();
                $('.booth_settings').hide();
                $('.hall-add-kong ul li span').removeClass('active');
                li_index = null;
            });
            //点击展位设置弹窗上的确定
            $('.booth_settings .hall_footer_one span.sure').unbind("click").click(function () {
                sd_val = $('.booth_settings .hall_content input').val();
                console.log('1234',li_index);
                if(li_index !== null){
                    $('.lm_booth_content .hall-booth').eq(booth_index).find($('.hall-add-kong ul li')).eq(li_index).children('span').text(sd_val);
                }
                $('.mask_block').hide();
                $('.booth_settings').hide();
                $('.hall-add-kong ul li span').removeClass('active');
                li_index = null;
            });
        });

        //点击添加展位，添加展位弹窗出现
        $('.hall-add-kong .add-kong span.add').unbind("click").click(function () {
            $('.mask_block').show();
            $('.add_booth').show();
            $('.add_booth p.red').hide();
            ert_booth_index = $(this).parents('.hall-booth').index();
            $('.add_booth span.sure').unbind("click").click(function () {
                sdf = $.trim($('.add_booth input.mark').val());
                wed_s1 = $.trim($('.add_booth input.start').val());
                wed_s2 = $.trim($('.add_booth input.end').val());
                //如果值大于999报错
                if(sdf === ''){
                    $('.add_booth p.red').css({"display":'block'}).text('展位号标识不能为空'); return;
                }
                // else if(!(/^[\u4e00-\u9fa5A-Z]+$/.test(sdf))){
                //     $('.add_booth p.red').css({"display":'block'}).text('展位号标识需要大写英文字母或中文组合');return;
                // }
                else if(wed_s1 === ''){
                    $('.add_booth p.red').css({"display":'block'}).text('起始展位号不能为空'); return;
                }else if(wed_s2 === ''){
                    $('.add_booth p.red').css({"display":'block'}).text('终止展位号不能为空'); return;
                }else if(parseInt(wed_s1) > parseInt(wed_s2)){
                    $('.add_booth p.red').css({"display":'block'}).text('起始展位号不得大于终止展位号'); return;
                }else{
                    $('.add_booth p.red').css({"display":'none'}).text('');
                    for(var i=parseInt(wed_s1);i<=parseInt(wed_s2);i++){
                        if(i<10){
                            i = '00'+i;
                        }else if(i>=10 && i < 100){
                            i = '0'+i;
                        }
                        $('.lm_booth_content .hall-booth').eq(ert_booth_index).find('.lm_content ul').append("<li>" +
                            "<span>" + sdf + i + "</span>" +
                            "</li>");
                    }
                    testHeight();
                    if($('.lm_booth_content .hall-booth').eq(ert_booth_index).find('.add-kong .add').hasClass('none_number')){
                        $('.lm_booth_content .hall-booth').eq(ert_booth_index).find('.add-kong .add').removeClass('none_number');
                        $('.lm_booth_content .hall-booth').eq(ert_booth_index).find('.add-kong').append('<span class="kong">清空展位</span>');
                    }
                    $('.mask_block').hide();
                    $('.lm_hall_detailed').hide();
                    $('.add_booth input.mark').val('');
                    $('.add_booth input.start').val('');
                    $('.add_booth input.end').val('');
                    bindAllEvent()
                }
            })
        });

        //点击展厅设置，展厅设置弹窗出现
        $('.hall-booth-content h2 span.zhan').unbind("click").click(function () {
            var that = this;
            $('.mask_block').show();
            $('.exhibition_hall_setting').show();
//            var boothWed_index = $(this).parents('.hall-booth').index();
            var old = $(that).prev().html();
            $('.exhibition_hall_setting .hall_content input').val(old);
            $('.exhibition_hall_setting span.sure').unbind("click").click(function () {
                input_val = $.trim($('.exhibition_hall_setting .hall_content input').val());
                if(input_val !== ''){
                    //判断展厅名称的情况
                    if(!/^[\u4e00-\u9fa5\-A-Za-z0-9]{1,50}$/.test(input_val)) {
                        layer.open({content:"展厅名称只能是1-50中英文数字",btn: '我知道了'}); return;
                    }

                    $(that).prev().html(input_val);
//                    $('.lm_booth_content .hall-booth').eq(boothWed_index).find('span.name').text(input_val);
//                    $('.exhibition_hall_setting .hall_content input').val('');
//                    boothWed_index = null;
                    $('.mask_block').hide();
                    $('.lm_hall_detailed').hide();
                }
            });
            //删除展厅
            $('.exhibition_hall_setting span.strike_out').unbind("click").click(function () {
                    $(that).parent().parent().parent().remove();
                    $('.mask_block').hide();
                    $('.lm_hall_detailed').hide();
            })
        });

        //点击清空展位，清空展位弹窗出现
        $('.hall-add-kong .add-kong span.kong').unbind("click").click(function () {
            $('.mask_block').show();
            $('.empty_booth').show();
            var name = $(this).parent().parent().parent().find(".name").html();
            $(".empty_booth .clear_prompt_text").html("清空 "+name+" 的所有展位号，清空可再次设置展位。已投保展位不清空，是否确认清空？");
            //点击清空展会弹窗上的确定，清空这个展厅下的所有展会
            sd_index = $(this).parents('div.hall-booth').index();
            console.log('下标',sd_index);
            $('.empty_booth span.sure').unbind("click").click(function () {
                $('.lm_booth_content .hall-booth').eq(sd_index).find('li').remove();
                $('.mask_block').hide();
                $('.lm_hall_detailed').hide();
                $('.lm_booth_content .hall-booth').eq(sd_index).find('.add-kong span.add').addClass('none_number');
                $('.lm_booth_content .hall-booth').eq(sd_index).find('.add-kong span.kong').remove();
                testHeight();
            });
        });


        //点击折叠展开或收起
        $('.down-tip a').unbind("click").click(function () {
            booth_index = $(this).parents('.hall-booth').index();
            sd_dom = $('.lm_booth_content .hall-booth').eq(booth_index);

            ul_height = Math.ceil(sd_dom.find($('.lm_content ul')).height());
            li_height = sd_dom.find($('.lm_content ul li')).height();
            span_height = parseFloat(sd_dom.find($('.lm_content ul li span')).css('marginBottom'));
            partial_height = parseInt(li_height) * 3 + Math.ceil(span_height) * 4;
            if ($(this).hasClass('down-hide')) {
                $(this).removeClass('down-hide');
                sd_dom.find($('.lm_content')).css({'overflow': 'hidden'}).animate({height: partial_height + 'px'});
            } else {
                $(this).addClass('down-hide');
                sd_dom.find($('.lm_content')).animate({height: ul_height + 'px'});
            }
        });
        testHeight();
        function testHeight() {
            $('.lm_booth_content .hall-booth').each(function () {
                ul_height = Math.ceil($(this).find($('.lm_content ul')).height());
                li_height = $(this).find($('.lm_content ul li')).height();
                span_height = parseFloat($(this).find($('.lm_content ul li span')).css('marginBottom'));
                partial_height = parseInt(li_height) * 3 + Math.ceil((span_height) * 3.1);

//            console.log('aaa',ul_height);
//            console.log('bbb',li_height);
//            console.log('ccc',span_height);
//            console.log('ddd',partial_height);

                if(ul_height > partial_height){
                    $(this).find($('.down-tip')).css({"display":'block'});
                    $(this).find($('.lm_content')).css({"height":partial_height + 'px','overflow':'hidden'});
                }else{
                    $(this).find($('.down-tip')).css({"display":'none'});
                    $(this).find($('.lm_content')).css({"height":ul_height + 'px','overflow':'visible'});
                }
            });
        }

        //保存提示
        $(".save_booth span.sure").unbind("click").click(function(){
            $('.mask_block').hide(); $(".save_booth").hide();
        });

        //点击保存
        $('.assigned-steps.pro-steps .save').unbind("click").click(function () {

            //获得所有展厅数据
            var json = {}, errString="", errStringPos="";
            //展位信息
            var posRepeat={};
            $(".lm_booth_content .hall-booth").each(function(){
                var pos = [];
                var name = $(this).find("span.name").html();
                var posList=$(this).find(".lm_content ul li");

                $(this).find(".lm_content ul li").each(function(){
//                    console.log($(this));
                    val = $(this).find("span").html();
                    pos.push(val);
                    //判断展位是否重复
                    if(posRepeat[val]==null){
                        posRepeat[val] = 1;
                    }else{
                        errStringPos += name+"-"+val +"," //展位名重复
                    }
                });
                if(json[name]==null){
                    json[name] = pos;
                }else{
                    errString += name+" "; //展厅名重复
                }

            });
            //报错
            if(errString!=""){
                layer.open({content:errString+" 展厅重复",btn: '我知道了'}); return;
            }
            //报错
            if(errStringPos!=""){
                layer.open({content:errStringPos+" 展厅展位重复",btn: '我知道了'}); return;
            }


            //如果发现某个展厅没有展位就提示
            console.log(">>>>>>>>>>>>",json)
            var names = "";
            for(var i in json){
                if(json[i].length==0){
                    names+=" "+i;
                }
            }
            if(g_getObjLength(json)==0){
                $('.mask_block').show();
                $(".save_booth").show();
                $(".save_booth .save_prompt").html("未添加展厅，请添加展厅后保存！");
                return;
            }
            if(names!=""){
                $('.mask_block').show();
                $(".save_booth").show();
                $(".save_booth .save_prompt").html(names+" 未添加展位，请添加展位后再提交！");
            }else{
                sessionStorage.setItem("add_exhibitions",JSON.stringify(json));
                window.location.href = "/weixin/activity/activityDetatil";
            }
        });


        //返回提示
        $(".go_back_prompt span.sure").unbind("click").click(function () {
            window.location.href = "/weixin/activity/activityDetatil";
        });
        $(".go_back_prompt span.cancle").unbind("click").click(function () {
            $('.mask_block').hide();
            $(".go_back_prompt").hide();
        });
        $("#goBack").unbind("click").click(function(){
            $('.mask_block').show();
            $(".go_back_prompt").show();
        });

    }(bindAllEvent());






</script>
</body>
</html>