{layout name="layout" /}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/css/uploadify.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/css/style.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/css/demo.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/front/webuploader.css">
<style>
    a ,a:hover{
        color: #fff;
        text-decoration: none;
    }
    .set_con {
        width: 100%;
        height: auto;
        float: left;
        background-color: #fff;
        min-width: 1130px;
        overflow: auto;
        box-sizing: border-box;
        padding-left: 50px;
    }
    .layui-form-item {
        /* margin-bottom: 15px; */
        clear: both;


        width: 1130px;
        margin: 10px 0;
        float: left;
    }
    .layui-input, .layui-textarea {
        width: 190px;
    }
    .display{ display:none}
    #if_con {
        overflow: auto;
        background:#fff;
    }
    .height150{
        height:150px;
    }
</style>

<div class="if_wrap">
    <div id="if_con">
        <div class="cus-con">
            <div class="set-top">
                <div class="layui-btn"><a href="{:url('vip/cameraman/index');}">返回摄影师列表</a></div>
            </div>
            <form class="layui-form layui-form-pane1" action="" method="post" id="addform" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">作品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="c_name" class="layui-input" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" value="">
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">作品封面</label>
                    <div class="layui-upload layui-form-label" style="padding-left:0;">
                        <input type="file" name="imgs"  id="imginput" /><br/>
                        <img src="" id="imgbox" width="200" height="200" style="margin-top:10px;" class="display"/>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">作品</label>
                    <div class="layui-upload layui-form-label" style="padding-left:0;">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test2">多图片上传</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="demo2"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item height150">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*" id="product">添加作品完成</button>
                        <button type="reset" class="layui-btn layui-btn-primary back">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!--<script type="text/javascript" src="__PUBLIC__/front/js/jquery.uploadify.min.js"></script>-->
<script type="text/javascript" src="__PUBLIC__/front/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/front/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/front/webuploader-0.1.5/webuploader.js"></script>
<script src="__PUBLIC__/admin/item/layui.js" charset="utf-8"></script>
<script src="__PUBLIC__/front/extend-webuploader.js" type="text/javascript"></script>
<script>
    //获取url参数
    function getUrlParam(key){
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }
    //获取当前摄影师的id
    var cam_id =getUrlParam("id");
    console.log(cam_id);

    //多图片上传
    layui.use('upload', function() {
        var $ = layui.jquery
                , upload = layui.upload;
        var names = $("#camName").val();
        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: "{:url('vip/cameraman/uploads')}?id="+cam_id
            ,done: function(res){
                var html = '<img src="'+res.data+'">';
                $("#demo2").append(html);
                //上传完毕
            }
            ,error: function(){
            }
        });
    });
    //多文件上传
    $(".back").on('click',function(){
        location.href="{:url('vip/cameraman/index')}";
    });
    layui.use('form', function(){
        var form = layui.form;
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 2){
                    return '标题也太短了吧';
                }
            }
            ,pass: [/(.+){6,50}$/, '密码必须6到50位']
        });

        //事件监听
        form.on('select', function(data){
        });
        form.on('radio', function(data){
        });
        //监听提交
        form.on('submit(*)', function(data){
            c_name = $.trim($("input[name=c_name]").val());
            var formid = document.getElementById("addform");
            var sformData = new FormData(formid);
            if(c_name){
                $.ajax({
                    type:'post',
                    data:sformData,
                    processData: false,  // 不处理数据
                    contentType:false,
                    success:function(s){
                        if(s.status==1){
                            layer.open({
                                content: '请选择该摄影师的作品！',
                                btn: ['确认'],
                                yes: function(index, layero) {
                                    window.location.href="{:url('vip/cameraman/addproduction')}?id="+ s.data;
                                }
                            });
                        }else{
                            layer.msg('添加失败',{
                                icon: 2,
                            });
                        }
                    }})
            }
            return false;
        });
    });

    // 图片显示
    $("#imginput").on('change',function(){
        imgView(this);
        $("#imgbox").removeClass("display");
    });
    // 图片显示
//    $("#imginputs").on('change',function(){
//                imgViews(this);
//                $("#imgboxs").removeClass("display");
//            });
    // 图片显示处理函数
//    function imgViews(filedom){
//        console.log(filedom);
//        // 判断是否支持fileReader
//        if(window.FileReader){
//            var reader = new FileReader();
//            // 获取文件
//            var file = filedom.files[0];
//            var imagetype = /^image\//;
//            // 判断是否是图片
//            console.log(file);
//            console.log(file.type);
//            if(!imagetype.test(file.type)){
//                layer.msg('请上传正确图片类型文件',{
//                    icon: 2,
//                });
//                return;
//            }
//            // 读取完成
//            reader.onload = function(e){
//                // 获取图片dom
//                var img = document.getElementById('imgboxs');
//                // 图片路径设置为读取的图片
//                img.src = e.target.result;
//            };
//            reader.readAsDataURL(file);
//        }
//    }
    // 图片显示处理函数
    function imgView(filedom){
        console.log(filedom);
        // 判断是否支持fileReader
        if(window.FileReader){
            var reader = new FileReader();
            // 获取文件
            var file = filedom.files[0];
            var imagetype = /^image\//;
            // 判断是否是图片
            console.log(file);
            console.log(file.type);
            if(!imagetype.test(file.type)){
                layer.msg('请上传正确图片类型文件',{
                    icon: 2,
                });
                return;
            }
            // 读取完成
            reader.onload = function(e){
                // 获取图片dom
                var img = document.getElementById('imgbox');
                // 图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }
</script>