$(function () {
    layui.use('element', function () {
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    });
    addTabs('#wssq')
    var data = {
        'progressList': [
            {
                stepName: "信息效验",
                stepState: 2 //0：未办理 1：正在办理 2：已办理
            },
            {
                stepName: "填报信息",
                stepState: 1
            },
            {
                stepName: "完税核税",
                stepState: 0
            },
            {
                stepName: "身份认证",
                stepState: 0
            },
            {
                stepName: "资料审核",
                stepState: 0
            },
            {
                stepName: "线上缴费",
                stepState: 0
            },
            {
                stepName: "生成电子证书",
                stepState: 0
            }
        ],
    }
    layui.use('laytpl', function () {
        laytpl = layui.laytpl;
        var getTpl = document.getElementById('progress').innerHTML
            , view = document.getElementById('app_progress');
        laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
        });

        layui.use(['element'], function () {
            var element = layui.element;
            //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
            element.init();
        });
    });
    // form 表单
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(typeId)', function (data) {
            console.log(data.value);
        });
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length == 0) {
                    return '权利人不能为空';
                } else if (value.length < 2) {
                    return '权利人至少得2个字符啊';
                }
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });
    })
    $('.radioInfo').click(function () {
        let index = $(this).attr("value")
        if (index == 2 || index == 3) {
            $('.add_form').show()
        } else {
            $('.add_form').hide()
        }
    })
    // form 添加
    $('.add_form').click(function () {
        $('.layui-form').append(
            '<div class="layui-form-item">' +
            '<div class="layui-inline">' +
            '<label class="layui-form-label">姓名</label>' +
            '<div class="layui-input-block">' +
            '<input type="text" name="name" required lay-verify="name" placeholder="请输权利人" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<div class="layui-inline idCard">' +
            '<label class="layui-form-label">身份证类型</label>' +
            '<div class="layui-input-block">' +
            '<select lay-filter="typeId">' +
            '<option value="1">身份证</option>' +
            '<option value="2">军官证</option>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="layui-inline">' +
            '<label class="layui-form-label">证件号码</label>' +
            '<div class="layui-input-block">' +
            '<input type="tel" name="card" maxlength="18" required lay-verify="card" placeholder="请输证件号码" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<div class="layui-inline">' +
            '<label class="layui-form-label">联系方式</label>' +
            '<div class="layui-input-block">' +
            '<input type="tel" name="phone" maxlength="11" required lay-verify="phone" placeholder="请输联系方式" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<i class="layui-icon layui-icon-reduce-circle"></i>' +
            '</div>'
        )

        layui.use('form', function () {
            var form = layui.form;
            form.render('select');
            form.on('select(typeId)', function (data) {
                console.log(data.value);
            });
        })
        // 编辑
        $(document).on("click", ".layui-icon-reduce-circle", function (e) {
            $(this).parent().remove()
        })
    })
    // 图片上传
    //元素
    var oFileBox = $(".fileBox");					//选择文件父级盒子
    var oFileInput = $("#fileInput");				//选择文件按钮
    var oFileSpan = $("#fileSpan");					//选择文件框
    var oFileList_parent = $(".fileList_parent");	//表格
    var oFileList = $(".fileList");					//表格tbody
    var oFileBtn = $("#fileBtn");				//上传按钮
    var flieList = [];								//数据，为一个复合数组
    var sizeObj = [];								//存放每个文件大小的数组，用来比较去重
    //拖拽外部文件，进入目标元素触发
    oFileSpan.on("dragenter", function () {
        $(this).find('.file_name').css("background", "#ccc");
        $('.file_name').empty();
        $(this).find('.file_name').append(
            '<p style="line-height:200px">可以方鼠标了</p>'
        )
    });
    //拖拽外部文件，进入目标、离开目标之间，连续触发
    oFileSpan.on("dragover", function () {
        return false;
    });
    //拖拽外部文件，离开目标元素触发
    oFileSpan.on("dragleave", function () {
        $('.file_name').empty();
        $(this).find('.file_name').css("background", "#ffff");
        $(this).find('.file_name').append(
            ' <i class="layui-icon layui-icon-addition"></i>' +
            '<p>点击或拖拽文件上传</p>' +
            '<div class="certificate">登记申请书（2份）</div>' +
            '<div class="fileListName"></div>'
        )
    });
    //拖拽外部文件，在目标元素上释放鼠标触发
    oFileSpan.on("drop", function (ev) {
        var fs = ev.originalEvent.dataTransfer.files;
        $('.file_name').empty();
        $(this).find('.file_name').css("background", "#ffff");
        $(this).find('.file_name').append(
            ' <i class="layui-icon layui-icon-addition"></i>' +
            '<p>点击或拖拽文件上传</p>' +
            '<div class="certificate">登记申请书（2份）</div>' +
            '<div class="fileListName"></div>'
        )
        analysisList(fs);		//解析列表函数
        return false;
    });
    //点击选择文件按钮选文件
    oFileInput.on("change", function () {
        analysisList(this.files);
    })
    //解析列表函数
    function analysisList(obj) {
        //如果没有文件
        if (obj.length < 1) {
            return false;
        }
        for (var i = 0; i < obj.length; i++) {
            var fileObj = obj[i];		//单个文件
            var name = fileObj.name;	//文件名
            var size = fileObj.size;	//文件大小
            var type = fileType(name);	//文件类型，获取的是文件的后缀
            //文件大于30M，就不上传
            if (size > 1024 * 1024 * 1024 || size == 0) {
                layer.msg('超过了30M，不能上传', { icon: 5 });
                continue;
            }
            //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
            if (sizeObj.indexOf(size) != -1) {
                layer.msg('已经选择，不能重复上传', { icon: 5 });
                continue;
            }
            //给json对象添加内容，得到选择的文件的数据
            var itemArr = [fileObj, name, size, type];	//文件，文件名，文件大小，文件类型
            flieList.push(itemArr);
            //把这个文件的大小放进数组中
            sizeObj.push(size);
        }
        createList()				//生成列表
        document.querySelector('#fileInput').value = null
        if (flieList.length == 2) {
            oFileList_parent.show();	//表格显示
        }
    };
    //生成列表
    function createList() {
        oFileList.empty();					//先清空元素内容
        for (var i = 0; i < flieList.length; i++) {
            var fileData = flieList[i];		//flieList数组中的某一个
            var name = fileData[1];			//文件名
            var oTr = $("<tr></tr>");
            var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
            str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
            oTr.html(str);
            oTr.appendTo(oFileList);
            $('.fileListName').append(
                '<p class="fileName" title="' + name + '">' + name + '</p>' +
                '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
            );
        }
    }
    //删除表格行
    oFileList.on("click", "a.operation", function () {
        var oTr = $(this).parents("tr");
        var index = oTr.index();
        oTr.remove();		//删除这一行
        flieList.splice(index, 1);	//删除数据
        sizeObj.splice(index, 1);	//删除文件大小数组中的项
        if (flieList.length == 0) {
            $('.fileList_parent').hide()
            $('.fileListName').empty();
        }
    });
    //上传
    oFileBtn.on("click", function () {
        oFileBtn.off();
        var tr = oFileList.find("tr");		//获取所有tr列表
        var successNum = 0;					//已上传成功的数目
        oFileList.off();					//取消删除事件
        oFileBox.slideUp();					//隐藏输入框
        oFileList.find("a.operation").text("等待上传");
        for (var i = 0; i < tr.length; i++) {
            uploadFn(tr.eq(i), i);		//参数为当前项，下标
        }
        function uploadFn(obj, i) {
            var formData = new FormData();
            var arrNow = flieList[i];						//获取数据数组的当前项
            // 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式
            var result = arrNow[0];							//数据
            formData.append("imageFile", result);
            var name = arrNow[1];							//文件名
            formData.append("email", name);
            var oOperation = obj.find("a.operation");		//按钮
            oOperation.text("正在上传");							//改变操作按钮
            oOperation.off();
            var request = $.ajax({
                type: "POST",
                url: "../more/cModifyImageAction.go",
                data: formData,			//这里上传的数据使用了formData 对象
                processData: false, 	//必须false才会自动加上正确的Content-Type
                contentType: false,

                //这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (onprogress && xhr.upload) {
                        xhr.upload.addEventListener("progress", onprogress, false);
                        return xhr;
                    }
                },
                //上传成功后回调
                success: function () {
                    oOperation.text("成功");
                    successNum++;
                    console.log(successNum);
                    if (successNum == tr.length) {
                        open("http://www.baidu.com", "_self");	//如果全部传成功了，跳转
                    }
                },
                //上传失败后回调
                error: function () {
                    oOperation.text("重传");
                    oOperation.on("click", function () {
                        request.abort();		//终止本次
                        uploadFn(obj, i);
                    });
                }
            });
        }
    });
})
//通过文件名，返回文件的后缀名
function fileType(name) {
    var nameArr = name.split(".");
    return nameArr[nameArr.length - 1].toLowerCase();
}