$(function () {

    var tabledata = [
        {
            name: 'renchao',
            idcard: '61012419930879879',
            phone: '18740677380'
        }
    ];
    var sellData = [
        {
            name: 'renchao',
            idcard: '61012419930879879',
            phone: '18740677380'
        }
    ];

    layui.use('element', function () {
        let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            layer.msg(elem.text());
        });
    });
    addTabs('#wssq')

    // 业务
    layui.use('element', function () {
        var element = layui.element;
        //监听Tab切换，以改变地址hash值
        element.on('tab(status)', function () {
            console.log(this.getAttribute('lay-id'))
        });
    });
    // 买方信息
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#buyInfo'
            // , url: '../staticLib/wdyy/index.json'
            , cols: [[
                { field: 'name', title: '权利人', align: 'center', edit: 'text' }
                , { field: 'idcard', title: '身份证号', align: 'center', edit: 'text' }
                , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
                , { title: '操作', toolbar: '#barDemo', align: 'center' }
            ]]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data //解析数据列表
                };
            },
            data: tabledata
        });
        table.on('row(buyInfo)', function (obj) {
            var rowIndex = $(obj.tr).attr("data-index");
            layer.confirm('此操作将删除一列是否继续', {
                btn: ['是', '否'] //按钮
            }, function () {
                tabledata.splice(rowIndex, 1);
                table.reload('buyInfo', {
                    data: tabledata
                })
                layer.closeAll();
            }, function () {
            });
        });

        $('.tableAdd').click(function () {
            tabledata.push({
                "name": ""
                , "idcard": ""
                , "phone": ""
            })
            table.reload('buyInfo', {
                data: tabledata
            })
        })
    })

    // 卖方信息
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#sellInfo'
            , cols: [[
                { field: 'name', title: '义务人', align: 'center', edit: 'text' }
                , { field: 'idcard', title: '证件号', align: 'center', edit: 'text' }
                , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
                , { title: '操作', toolbar: '#barDemo', align: 'center' }
            ]]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data //解析数据列表
                };
            },
            data: sellData
        });
        //监听行工具事件
        table.on('row(sellInfo)', function (obj) {
            var rowIndex = $(obj.tr).attr("data-index");
            layer.confirm('此操作将删除一列是否继续', {
                btn: ['是', '否'] //按钮
            }, function () {
                sellData.splice(rowIndex, 1);
                table.reload('sellInfo', {
                    data: sellData
                })
                layer.closeAll();
            }, function () {
            });
        });

        $('.tableAdd1').click(function () {
            sellData.push({
                "name": ""
                , "idcard": ""
                , "phone": ""
            })
            console.log(999, sellData)
            table.reload('sellInfo', {
                data: sellData
            })
        })
    })
    // 图片上传
    //元素
    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').text("可以释放鼠标了！").css("background", "#ccc");
    });
    //拖拽外部文件，进入目标、离开目标之间，连续触发
    oFileSpan.on("dragover", function () {
        return false;
    });
    //拖拽外部文件，离开目标元素触发
    oFileSpan.on("dragleave", function () {
        $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
    });
    //拖拽外部文件，在目标元素上释放鼠标触发
    oFileSpan.on("drop", function (ev) {
        var fs = ev.originalEvent.dataTransfer.files;
        analysisList(fs);		//解析列表函数
        $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
        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()				//生成列表
        oFileList_parent.show();	//表格显示
        document.querySelector('#fileInput').value = null
    };


    //生成列表
    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><cite title="' + name + '">' + name + '</cite></td>';
            str += '<td><a class="operation">删除</a></td>';
            oTr.html(str);
            oTr.appendTo(oFileList);
        }
    }
    //删除表格行
    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);	//删除文件大小数组中的项
    });
    //上传
    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();
}