/*-----------------------------------------------------------*/
/*copyright by 动力无限  www.btoe.cn*/
/*邮箱 btoe@btoe.cn*/
/*合作电话 400-0599-360*/
/*版权所有违者必究*/
/*-----------------------------------------------------------*/



 var messagealertCenterFlexBoxContentHtml =`<div class="messagealertCenter">
    <div class="messagealertCenterFlex">
        <div class="messagealertCenterFlexBox">
            <div class="messagealertCenterFlexBoxTitle">
                <h4>我要询价</h4>
                <span class="messagealertCenterFlexBoxclose"></span>
            </div>
            <ul>
                <li>
                    <i>姓名：</i>
                    <input type="text" value="" placeholder="请输入您的姓名" class="messagealertCenterFlexBoxName">
                </li>

                <li>
                    <i>手机号码：</i>
                    <input type="text" value="" placeholder="请输入您的手机号" class="messagealertCenterFlexBoxPhone">
                </li>

                <li>
                    <i>询价内容：</i>
                    <textarea name="remark" placeholder="请输入您的询价内容" class="messagealertCenterFlexBoxContent"></textarea>
                </li>

                <li>
                    <i>验证码：</i>
                    <input type="text" value="" placeholder="请输入验证码" class="messagealertCenterFlexBoxVcode">
                    <img src="/api/yanzhengma.aspx?action=code" alt="验证码" class="messagealertCenterFlexBoxVcodeImg">
                </li>

                <li>
                    <button class="messagealertCenterFlexBoxContentTj">提交询价</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<style>
.messagealertCenter .messagealertCenterFlex {
    width: 99.99999999999999999999999999%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    display: none;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox {
    width: 30%;
    background: #fff;
    position: relative;
    left: 35%;
    top: 50%;
    border-radius: 5px;
    transform: translateY(-50%);
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox .messagealertCenterFlexBoxTitle {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 99.99999999999999999999999999%;
    padding: 15px 10px;
    border-bottom: 1px solid #e3e3e3;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox .messagealertCenterFlexBoxTitle h4 {
    font-size: 16px;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox .messagealertCenterFlexBoxTitle .messagealertCenterFlexBoxclose {
    position: relative;
    width:24px;
    height:24px;
    cursor: pointer;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox .messagealertCenterFlexBoxTitle .messagealertCenterFlexBoxclose::after {
    content: "";
    width: 2px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 14px;
    background: #ccc;
    transform: rotate(-45deg);
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox .messagealertCenterFlexBoxTitle .messagealertCenterFlexBoxclose::before {
    content: "";
    width: 2px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 14px;
    background: #ccc;
    transform: rotate(45deg);
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul {
    width: 99.99999999999999999999999999%;
    padding: 10px 0;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li {
    width: 99.99999999999999999999999999%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li i {
    flex: 0 0 22%;
    justify-content: center;
    float: left;
    width: 22%;
    line-height:50px;
    text-align: right;
    font-size: 15px;
    color: #666;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li input {
    flex: 0 0 75%;
    justify-content: center;
    float: left;
    width: 75%;
    height: 48px;
    border: 1px solid #e3e3e3;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 15px;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li textarea {
    flex: 0 0 75%;
    justify-content: center;
    float: left;
    width: 75%;
    height: 80px;
    border: 1px solid #e3e3e3;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 15px;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li .messagealertCenterFlexBoxVcodeImg {
    height: 46px;
position: absolute;
background-color: #f2f2f2;
width: 100px;
top: 1px;
right: 11px;
z-index: 2;
cursor: pointer;
font-size: 14px;
  }
  .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li .messagealertCenterFlexBoxContentTj {
    width: 30%;
    height: 48px;
    border: 0;
    background: #1890FF;
    color: #fff;
    font-size: 15px;
    margin-left: 25%;
    cursor: pointer;
  }


 

  @media (max-width: 980px) {
    .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox{
        width:94%;
        left:3%;
    }

    .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li i{
        font-size:14px;
        flex:0 0 26%;
    }

    .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li input{
        font-size:14px;
        flex:0 0 70%;
    }

    .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li textarea{
        font-size:14px;
        flex:0 0 70%;
    }

    .messagealertCenter .messagealertCenterFlex .messagealertCenterFlexBox ul li .messagealertCenterFlexBoxContentTj{
        margin-left: 30%;
    }
  }
</style>
`

$('body').append(messagealertCenterFlexBoxContentHtml)
 
// messagealertbth 为按钮class类名  调用后会弹出

$('.messagealertbth').click(function(){
    $('.messagealertCenter .messagealertCenterFlex').slideDown();
    $('body').css({
        "height":"100vh",
        "overflow":"hidden"
    })
})

$('.messagealertCenterFlexBoxclose').click(function(){
    $('.messagealertCenter .messagealertCenterFlex').slideUp();
    $('body').css({
        "height":"inherit",
        "overflow":"inherit"
    })
})

$(function () {
    $('.messagealertCenterFlexBoxContentTj').on('click', function () {
        var kcontent = $('.messagealertCenterFlexBoxContent').val(); //内容
        var kuser = $('.messagealertCenterFlexBoxName').val(); //名字
        var kphone = $('.messagealertCenterFlexBoxPhone').val(); //电话
        var kcode = $('.messagealertCenterFlexBoxVcode').val(); //验证码的input 
        var reg = /^((0\d{2,3}[-]?\d{7,8})|(1[35847]\d{9})|([48]00[-]?[016789]\d{2,3}[-]?\d{3,4}))$/;

        if (kuser == "" || kuser.length < 2) {
            alert('姓名不能为空并不能少于2个字，请您重新进行填写！')
            $(".messagealertCenterFlexBoxName").focus();
            return false;
        }
        if (kphone == "") {
            alert('号码不能为空，请您进行填写！')
            $(".messagealertCenterFlexBoxPhone").focus();
            return false;
        }
        if (!reg.test(kphone)) {
            alert('号码填写有误，请您重新进行填写！')
            $(".messagealertCenterFlexBoxPhone").focus();
            return false;
        }

        if (kcontent == "" || kcontent.length < 10) {
            alert('留言内容必须大于10字！')
            $(".messagealertCenterFlexBoxContent").focus();
            return false;
        }

        if (kcode == "") { //验证码的input 
            alert('验证码不能为空，请您进行填写')
            $(".messagealertCenterFlexBoxVcode").focus();
            return false;
        }

        $.post('/api/message.ashx?action=xunjia', {
            "kcid": $(".productXqBoxCenterBoxRTitle").attr("fn"),
            "kcontent": kcontent,
            "kuser": kuser,
            "kphone": kphone,
            "ktitle":$(".productXqBoxCenterBoxRTitle").text(),
            "kcode": kcode //验证码的程序调用 
        }, function (res) {
            if (res == 1) {
                alert("提交成功");
                $('.messagealertCenterFlexBoxContent').val('');
                $('.messagealertCenterFlexBoxPhone').val('');
                $('.messagealertCenterFlexBoxName').val('');
                $('.messagealertCenterFlexBoxVcode').val('');
                $('.messagealertCenterFlexBoxVcode').eq(0).trigger('mousemove');
                $('.messagealertCenterFlex').slideUp();
            } else if(res==2) {
                alert("验证码错误。");
                $(".messagealertCenterFlexBoxVcodeImg").src = '/api/yanzhengma.aspx?action=code&' + Math.random();
            }else{
 			alert("提交失败")
	            
            }
        })
    })
})


$(".messagealertCenterFlexBoxVcodeImg").click(function () { //楠岃瘉鐮佸浘鐗囧埛鏂�
    $(this)[0].src = '/api/yanzhengma.aspx?action=code&' + Math.random()
});