@extends('layouts.advert.layout')
@section('title','创建订单')
@section('css')
    <link rel="stylesheet" href="/assets/css/poppay.css">
@endsection
@section('content')
    <div class="wrap bgff mtb20">
        <form class="layui-form pt20 pr20"  lay-filter="example" method="post" action="{{ url('advert/order/store') }}">
            {{csrf_field()}}
            <input type="hidden" name="type" value="{{ $menu }}">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:110px">投放平台：</label>
                <div class="layui-input-block" style="font-size:16px;padding-top:7px;">
                    <i class="icn yklwenzhang" style="font-size:20px;padding-top:8px;color:#5b99ee;"></i>
                    <span>
                        @if($menu == 'article')
                            全国软文
                        @elseif($menu == 'weixin')
                            微信
                        @elseif($menu == 'weibo')
                            微博
                        @elseif($menu == 'video')
                            直播/短视频
                        @elseif($menu == 'redbook')
                            小红书
                        @endif
                    </span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:110px">活动名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="查询订单使用(和推广无关)，不超过50个字" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:110px">稿件内容：</label>
                <div class="layui-input-block" id="articles" data-type="link">
                    <input type="radio" name="source_type" data-c="1" value="link" lay-verify="source"  lay-filter="source_type" title="外部链接" checked="">
                    <input type="radio" name="source_type" data-c="2" value="upload"  lay-verify="source"  lay-filter="source_type" title="上传文档">
                    <input type="radio" name="source_type" data-c="3" value="file"  lay-verify="source"  lay-filter="source_type" title="已传素材">
                </div>
            </div>
            <div class="layui-form-item article-li">
                <label class="layui-form-label" style="width:110px">来源链接：</label>
                <div class="layui-input-block">
                    <input type="text" name="link" lay-verify="" autocomplete="off" placeholder="如因客户稿件内容有误给发布了，媒介主不承担责任。" class="layui-input link">
                </div>
            </div>
            <div class="layui-upload layui-form-item article-li hide">
                <label class="layui-form-label" style="width:110px">上传附件：</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test1">添加文档</button>
                    <div class="layui-upload-list" style="position:absolute;top:0;width:500px;left:100px;margin:0;">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText">（注：传docx后缀文件）</p>
                    </div>
                    <input type="hidden" name="file_url" id="file_url" value="">
                    <input type="hidden" name="type_name" id="type_name" value="{{$type_name}}">
                </div>
            </div>
            <div class="layui-form-item article-li hide">
                <label class="layui-form-label" style="width:110px">选择素材：</label>
                <div class="layui-input-inline">
                    <select name="select_files" id="member_file">
                        <option value="">选择素材</option>
                        @if($files)
                            @foreach($files as $item)

                            <option value="{{ $item->id }}">{{ $item->title }}</option>

                            @endforeach
                        @endif
                    </select>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:110px">执行时间：</label>
                <div class="layui-input-block" id="times" data-time="actionNow">
                    <input type="radio" name="action_type" data-c="1"  lay-verify="time" lay-filter="time" value="actionNow" title="立即执行" checked="">
                    <input type="radio" name="action_type" data-c="2"  lay-verify="time" lay-filter="time" value="setTime" title="选择时间">
                </div>
            </div>
            <div class="layui-form-item time-li hide">
                <label class="layui-form-label" style="width:110px"></label>
                <div class="layui-input-inline">
                    <input type="text" name="start_time" id="dateFrom" lay-verify="" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
                <div class="fl" style="margin-top:10px;margin-right:10px;">至</div>
                <div class="layui-input-inline">
                    <input type="text" name="end_time" id="dateTo" lay-verify="" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" style="width:110px">活动备注：</label>
                <div class="layui-input-block" >
                    <textarea style="height:200px" placeholder="请填写备注信息，媒介主会根据自己的意愿执行，该备注不会影响计费，请不要填写网址链接" class="layui-textarea" name="desc"></textarea>
                </div>
            </div>
            @include('layouts.advert.select')
        </form>
        <!-- 添加class hide 影藏-->
            @include('layouts.advert.agreement')
        <div class="popMid popPay hide payMask" data-no="">
            <div class="position-middle-center">
                <div class="cons bgff">
                    <!--Loading-设置密码中-->
                    <div class="loading passSeting hide">
                        <div class="loads"><span><i></i><i></i><i></i></span></div>
                        <div class="text blue"></div>
                        <div class="text gray"></div>
                    </div>

                    <!--提示-->
                    <div class="wenxinTip hide">
                        <div class="text blue"></div>
                        <div class="text gray"></div>
                        <div class="btn"><label for="popPay"></label></div>
                    </div>

                    <!--Loading-支付订单中-->
                    <div class="loading paying hide">
                        <div class="loads"><span><i></i><i></i><i></i></span></div>
                        <div class="text blue"></div>
                        <div class="text gray"></div>
                    </div>

                    <!--设置密码成功-->
                    <div class="passSetOk hide">
                        <div class="back"></div>
                        <div class="text black"></div>
                        <div class="text gray"></div>
                        <div class="btn"><a class="goPayPage">立即去支付</a></div>
                    </div>

                    <!--设置支付密码-->
                    <div class="form pass set hide">
                        <div class="text tit"></div>
                        <div class="text gray">已通过身份验证<br>请设置您的支付密码</div>
                        <div class="input">
                            <input type="password" class="blur password1" placeholder="请输入支付密码" autocomplete="off">
                        </div>
                        <div class="input">
                            <input type="password" class="blur password2" placeholder="请再次输入支付密码" autocomplete="off">
                        </div>
                        <div class="input error hide"><i></i><span></span></div>
                        <div class="btn1" onclick="setPayPass()"><label class="editPayPass">设置支付密码</label></div>
                    </div>

                    <!--支付-->
                    <div class="form pay">
                        <input type="hidden" name="order_no" id="order_no" value="" />
                        <div class="text tit"></div>
                        <div class="text red pay-money"></div>
                        <div class="text gray">任务将由所下单媒体审核，若资源审核成功后便会执行发布，稍后注意前往 个人中心 查看</div>
                        <div class="input">
                            <input type="password" class="blur popPayPaaword" placeholder="请输入您的支付密码" autocomplete="off">
                        </div>
                        <div class="input error hide"><i></i><span>支付密码错误</span><a class="findPass">找回密码</a></div>
                        <div class="btn1"><label class="goPay" onclick="goPay()"></label></div>
                        <div class="text alink r"><a class="findPass">没有支付密码？</a></div>
                    </div>

                    <!--余额不足-->
                    <div class="yuebuzu hide">
                        <div class="back"></div>
                        <div class="text black"></div>
                        <div class="text gray"></div>
                        <div class="btn1"><a class="goRecharge" onclick="goRecharge()">立即充值</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function agreementShow(s){
            console.log(s)
            if(s == 1) {
                $('#protocol_').show()
            }else{
                $('#protocol_').hide()
            }
        }
        function goRecharge() {
            window.location.href = allAPI.member.charge;
        }
        layui.use(['form', 'layedit','upload', 'laydate'], function(){
            var form = layui.form
                    ,layer = layui.layer
                    ,upload = layui.upload
                    ,layedit = layui.layedit
                    ,laydate = layui.laydate;
            //日期
            laydate.render({
                elem: '#dateFrom'
                ,min: 0
                ,value: new Date()
            });
            laydate.render({
                elem: '#dateTo'
                ,min: 0
                ,value: new Date()
            });
            //普通图片上传
            upload.render({
                elem: '#test1'
                ,url: '/upload/file'
                ,done: function(res, index, upload){ //上传后的回调
                    $("#demoText").html(res.data.originName)
                    $("#file_url").val(res.data.path)
                    layer.msg('上传成功',{icon:1,time:2000})
                }
                ,accept: 'file' //允许上传的文件类型
                ,size: 5120 //最大允许上传的文件大小
                ,exts:'doc|docx'
            })
            form.verify({
                title: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!value) {
                        return '活动名称不能为空';
                    }
                }
                ,source: function (value, item) { //value：表单的值、item：表单的DOM对象
                    var source_type =  $("#articles").data('type');
                    if (source_type == 'link') {
                        if($('.link').val() == '')
                        {
                            return '外部链接不能为空';
                        }else{
                            //判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
                            //下面的代码中应用了转义字符"\"输出一个字符"/"
                            var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                            var objExp=new RegExp(Expression);
                            if(objExp.test($('.link').val()) != true){

                                return '请输入正确网址';
                            }
                        }
                    }else
                    if (source_type == 'upload') {
                        if($('#file_url').val() == '')
                        {
                            return '附件不能为空';
                        }
                    }else
                    if (source_type == 'member_file') {
                        if($('#select_files').val() == '')
                        {
                            return '素材不能为空';
                        }
                    }
                }
                ,time:function(value,item){
                    var t = $("#times").data('time')
                    if(t == 'setTime'){
                        if($("#dateFrom").val() == '' || $("#dateTo").val() == '' ){
                            return '请填写完整的时间';
                        }
                    }
                }
            })
            form.on('radio(source_type)', function(data){
                $("#articles").data('type',data.value)
            });
            form.on('radio(time)', function(data){
                $("#times").data('time',data.value)
                if(data.value == 'actionNow'){
                    $('.time-li').hide();
                }else{
                    $('.time-li').show();
                }
            });
            form.on('submit(demo1)', function(data){
                //  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //  console.log(data) //当前容器的全部表单字段，名值对形式：{name: value}
                var params = {};
                params.theData = data.field;
                params.theUrl = allAPI.order.store;
                // console.log(params)
                doPostAjax(params,function(data){
                    if(data.code == 200){//   layer.msg('订单创建成功',{icon:1,time:2000})
                        $('.popMid').show()
                        $('.pay-money').html(data.data.money)
                        $('.payMask').data('no',data.data.order_no)
                        $('#order_no').val(data.data.order_no)
                    }else{
                        layer.msg('订单创建失败',{icon:2,time:2000})
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        })

        inputOnchange();
        // ==========检测 input 禁止code输入========
        function inputOnchange(){
            $("#articles").bind("click",function(){
                var type = $(this).find("input[name='source_type']:checked").attr('data-c');
                $('.article-li').addClass('hide');
                $($('.article-li')[type-1]).removeClass('hide');
            })
        }
        // ==========点击查看选择资源========
        function clickProduct(e){
            $(e).siblings('.order-fixed').show().siblings('.chosen-box').show().find('.gray').click(function(){
                // 关闭哦
                $(this).parent().parent('.chosen-box').hide().siblings('.order-fixed').hide();
            }).siblings('.reAddRes').click(function(){
                // 继续添加哦
                //console.log('继续添加哦')
                //console.log($(this))
            })
        }
        $('.chosen-tab .del').on('click',function(){
            $(this).parent().parent().remove();
            var total = $('.chosen-box .chosen-title .theCartPrice_res');
            var viptotal = $('#order-huiyuanjia').html();
            var num = $('.chosen-box .chosen-title .theCartNum');
            var newtotal = total.html()-$(this).attr('data-price');
            var newvipprice = viptotal-$(this).attr('vip-price');
            var newnum = num.html()-1
            total.html(newtotal)
            num.html(newnum)
            $('.order-num .cart-num').html(newnum);
            if($('#advert-head').attr('data-type')==='article'||$('#advert-head').attr('data-type')==='zimeiti'){
                $('.order-price .price b').html(newtotal);
                $('.order-price .price em').html(newvipprice);
            }else{
                $('.order-price .price em').html(newtotal);
            }
        })
        //支付
        function goPay(){
            var params = {};
            params.theData = {order_no:$("#order_no").val(),pass:$(".popPayPaaword").val()};
            params.theUrl = allAPI.order.orderPay;
            doPostAjax(params,function(data){
                if(data.code == 4004){//密码错误
                    $('.error').show();
                }else if(data.code == 4005){//未设置密码
                    $('.pay').hide()
                    layer.msg(data.info,{icon:2,time:2000})
                    setTimeout($('.pass').show(),2000);
                }else if(data.code == 4006){//余额不足
                    $('.yuebuzu').show()
                    $('.pay').hide()
                }else if(data.code == 200){//支付成功

                    layer.msg(data.info,{icon:1,time:2000})
                    console.log(allAPI.member.orderList);
                   window.location.href = allAPI.member.orderList;
                }else{
                    layer.msg(data.info,{icon:2,time:2000})
                }
            })
        }
        /*设置密码*/
        function setPayPass(){
            var params = {};
            params.theData = {password:$(".password1").val(),password_confirmation:$(".password2").val()};
            params.theUrl = allAPI.order.setPass;
            doPostAjax(params,function(data){
                if(data.code == 200){
                    layer.msg(data.info,{icon:1,time:2000})
                    $(".pass").hide();
                    $('.pay').show()
                }else{
                    layer.msg(data.info,{icon:2,time:2000})
                }
            })
        }

    </script>
@endsection
