/*
 *title:notice-add
 *@auther  liaoxin
 *date:2018/12/4
*/
layui.extend({
    common    :   'js/common',
    xmSelect    :   'layui/dist/xm-select'
}).use([ 'jquery','common','form','upload','xmSelect'], function () {
    //  Jquery插件
    var $ = layui.jquery;
    //  引入公共模块
    var common = layui.common;
    //引入表单
    var form = layui.form;
    //上传文件
    var upload= layui.upload;
    //图片服务器地址
    var fastDfsServer = $('#fastDfsServer').val();

    var residentialIds = $('#residentialIds').val();

    var id = $('#id').val();
    //监听提交
    form.on('submit(submitButton)', function(data){
        common.timer($('button[lay-filter="submitButton"]'));
        var $imageList=$(".layui-upload-list");
        var imgUri='';
        //获取所有图片地址
        $("input[name='imgUri']").each(function(index,elem){
            var md5=$(elem).attr('md5');
            if(md5==null)
                md5="";
            if(index==0){

                imgUri = $(elem).val()+":"+md5;
            }else {
                imgUri = imgUri+","+$(elem).val()+":"+md5;
            }

        })
        //如果不这样做，data中的imgUri默认只会拿第一张图片的值
        data.field.imgUri=imgUri;
        common.sendAsyncRequest("/estate/notice/addOrEditNotice",'POST',data.field,callbackFn);
    });
    //回调函数
    function callbackFn(result) {
        if(result.code=='200'){
            layer.msg("添加成功",{
                time: 500,
                shade : [0.1 , '#000' , true]
            },function () {
                //获取当前弹窗出层的名字
                var index = parent.layer.getFrameIndex(window.name);
                //关闭弹窗层
                parent.layer.close(index);
                // 父页面刷新
                parent.location.reload();
            });
        }else {//添加失败
            layer.msg("操作失败");
        }
    }
    //取消按钮
    $('#cancel_btn').on("click",function(){
        //获取当前弹窗出层的名字
        var index = parent.layer.getFrameIndex(window.name);
        //关闭弹窗层
        parent.layer.close(index);
    });
    var loadId;
    //执行上传图片
    var uploadInst = upload.render({
        elem: '#uploadImage' //绑定元素
        ,url: '/common/file/upload?isNeedMd5=true' //上传接口
        ,acceptMime: 'image/*'
        ,exts: 'jpg|png|jpeg'
        , auto: false
        ,choose: function(obj){
            var imgListId=$("#imgListId");
            //获取选中的文件个数
            if( imgListId.find("input[name='imgUri']").length>=5){
                layer.msg("最多添加5张图片");
                //返回false阻止图片上传
                return false;
            }else{
                //预读本地文件，如果是多文件，则会遍历。
                obj.preview(function (index, file, result) {
                    //文件上传
                    obj.upload(index, file);
                });
                //开启加载动画
                loadId = layer.msg('图片上传中', {
                    icon: 16,
                    shade: 0.4,
                    time:false //取消自动关闭
                });
            }
        }
        ,done: function(res){
            //上传完毕回调
            //关闭加载动画
            layer.close(loadId);
            if(res.code=="200"){//上传成功
                var imgListId=$("#imgListId");
                imgListId.append(" <div class='layer-photos-content'>" +
                    "<input type='hidden' name='imgUri' value='"+res.data.fullPath+"' md5='"+res.data.md5+"' />"+
                    "<img class='layui-upload-img' src='"+fastDfsServer+ res.data.fullPath+"'>" +
                    " <span class='layui-layer-setwin'><a class='layui-layer-ico layui-layer-close layui-layer-close2'></a>'</span>" +
                    "<a href='javascript:;' class='layui-laypage-next'>  <i class='layui-icon'></i>  </a> "+
                    " <a href='javascript:;' class='layui-laypage-prev '><i class='layui-icon'></i></a>"+
                    " </div>");
            }
        }
        ,error: function(){
            //请求异常回调
            //关闭加载动画
            layer.close(loadId);
            layer.msg("图片上传失败");
        }
    });
    //图片事件
    //移动-右
    $(document).on('click','.layui-laypage-next',function () {
        var html = $(this).parent().next();
        $(html).insertBefore($(this).parent());
    });
    //移动-左
    $(document).on('click','.layui-laypage-prev',function () {
        var html = $(this).parent();
        $(html).insertBefore($(this).parent().prev());
    });
    //点击删除
    $(document).on('click','.layui-layer-close',function () {
        $(this).parents(".layer-photos-content").remove();
    })

    //小区查询下拉列表
    var residentialSelect = xmSelect.render({
        el: '#residential_id',
        name: 'residentialIds',
        layVerify: 'required',
        radio: false,
        prop: {
            name: 'name',
            value: 'id',
        },
        clickClose: true,
        paging: true,
        pageRemote: true,
        filterable: true,
        remoteMethod: function (val, cb, show,pageIndex) {
            $.ajax({
                type: 'GET',
                url: '/estate/residential/showResidentialList',
                data: {
                    name : val,
                    current : pageIndex,
                },
                success: function (result) {
                    cb(result.data.records,result.data.pages);
                },
                error: function () {
                    cb([],0);
                }
            });
        },
        //监听选择
        on: function (data) {
            var change = data.change;
            if (change.length > 0) {

            }
            if (!data.isAdd) {
            }
        },
        //显示方式
        model: {
            label: {
                type: 'text',
                text: {
                    //左边拼接的字符
                    left: '',
                    //右边拼接的字符
                    right: '',
                    //中间的分隔符
                    separator: ', ',
                },
            }
        },
    });

    (function () {
        if(id != null) {
            $.ajax({
                type: 'GET',
                url: '/estate/residential/getListByLikeName',
                success: function (result) {
                    let ids = residentialIds.split(',')
                    residentialSelect.update({data: result.list}).setValue(ids);
                },
            });
        }
    })()
});