(function ($, zou) {
    "use strict";

    //数据验证下拉
    var verifyDatalist = [
        { id: "", text: "==请选择==" },
        { id: "NotNull", text: "不能为空" },
        { id: "Num", text: "必须为数字" },
        { id: "NumOrNull", text: "数字或空" },
        { id: "Email", text: "必须为E-mail格式" },
        { id: "EmailOrNull", text: "E-mail格式或空" },
        { id: "EnglishStr", text: "必须为字符串" },
        { id: "EnglishStrOrNull", text: "字符串或空" },
        { id: "Phone", text: "必须电话格式" },
        { id: "PhoneOrNull", text: "电话格式或者空" },
        { id: "Fax", text: "必须为传真格式" },
        { id: "Mobile", text: "必须为手机格式" },
        { id: "MobileOrNull", text: "手机格式或者空" },
        { id: "MobileOrPhone", text: "电话格式或手机格式" },
        { id: "MobileOrPhoneOrNull", text: "电话格式或手机格式或空" },
        { id: "Uri", text: "必须为网址格式" },
        { id: "UriOrNull", text: "网址格式或空" }
    ];

    var verifyDatalist2 = [
        { id: "NotNull", text: "不能为空" }
    ];

    //行占比下拉
    var proportionList = [
        { id: "1", text: "1" },
        { id: "2", text: "1/2" },
        { id: "3", text: "1/3" }
    ];

    //数据来源下拉
    var dataSourceTypeList = [
        { id: "1", text: "数据字典" },
        { id: "2", text: "物理地址" }
    ];

    var dataformatList = [
        { id: "0", text: "仅日期" },
        { id: "1", text: "日期和时间" },
        { id: "2", text: "仅月份" }
    ];

    $.formComponents = {
        text: {//文本框
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="text" ><i  class="fa fa-italic"></i>文本框</div>');
                return $html;
            },

            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '文本框',
                    type: "text",
                    table: '',
                    field: "",
                    proportion: '1',
                    verify: ''
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本框" }));
            },

            property: function ($component) {
                var $html = initComponentPropertyHtml($component, verifyDatalist);
            }
        },
        textarea: {//文本区
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="textarea" ><i class="fa fa-align-justify"></i>文本域</div>');
                return $html;
            },

            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '文本域',
                    type: "textarea",
                    table: '',
                    field: "",
                    proportion: '1',
                    verify: '',
                    height: '90'
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本域" }));
            },
            property: function ($component) {
                var $html = initComponentPropertyHtml($component, verifyDatalist);
            }
        },
        radio: {//单选框
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="radio" ><i class="fa fa-circle-thin"></i>单选框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '单选项',
                    type: "radio",
                    table: '',
                    field: "",
                    proportion: '1',
                    dataSourceType: '1',  // 1数据字典 2 物理地址
                    dataSource: '',
                    dataSourceUrl: ''
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "单选项" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = initComponentPropertyHtml($component);
                var html = '';
                html += '<div class="z-component-title">数据来源</div>';
                html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
                html += '<div class="z-component-title dataItemCode">数据字典</div>';
                html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
                html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
                html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
                $html.append(html);
                createDatasource(dfop);
                // 数据源地址设置
                $html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
                $html.find('#component_dataSourceUrl').keyup(function () {
                    var value = $(this).val();
                    dfop.dataSourceUrl = value;
                });
            }
        },
        checkbox: {//多选框
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="checkbox" ><i class="fa fa-square-o"></i>多选框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '多选框',
                    type: "checkbox",
                    table: '',
                    field: "",
                    proportion: '1',
                    dataSourceType: '1',  // 1数据字典 2 物理地址
                    dataSource: '',
                    dataSourceUrl: ''
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "多选项" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = initComponentPropertyHtml($component);
                var html = '';
                html += '<div class="z-component-title">数据来源</div>';
                html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
                html += '<div class="z-component-title dataItemCode">数据字典</div>';
                html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
                html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
                html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
                $html.append(html);
                createDatasource(dfop);
                // 数据源地址设置
                $html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
                $html.find('#component_dataSourceUrl').keyup(function () {
                    var value = $(this).val();
                    dfop.dataSourceUrl = value;
                });
            }
        },
        combox: {//下拉框
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="combox" ><i class="fa fa-caret-square-o-right"></i>下拉框</div>');
                return $html;
            },
            render: function ($component) {
                // console.log(JSON.stringify($component));

                $component[0].dfop = $component[0].dfop || {
                    title: '下拉框',
                    type: "combox",
                    table: '',
                    field: "",
                    proportion: '1',
                    dataSourceType: '1',  // 1数据字典 2 物理地址
                    dataSource: '',
                    dataSourceUrl: ''
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "下拉框" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = initComponentPropertyHtml($component);
                var html = '';
                html += '<div class="z-component-title">数据来源</div>';
                html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
                html += '<div class="z-component-title dataItemCode">数据字典</div>';
                html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
                html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
                html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
                $html.append(html);
                createDatasource(dfop);
                // 数据源地址设置
                $html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
                $html.find('#component_dataSourceUrl').keyup(function () {
                    var value = $(this).val();
                    dfop.dataSourceUrl = value;
                });
            }
        },
        datetime: {//日期框
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="datetime" ><i class="fa fa-calendar"></i>日期框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '日期框',
                    type: "datetime",
                    table: '',
                    field: "",
                    proportion: '1',
                    verify: '',
                    dateformat: '0'
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '日期框' }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = initComponentPropertyHtml($component, verifyDatalist2);
                var html = '';
                html += '<div class="z-component-title">日期格式</div>';
                html += '<div class="z-component-control"><select class="form-control" id="component_dateformat"></select></div>';
                $html.append(html);

                // 日期格式
                var $dateformat = $(document).find("#component_dateformat");
                $.each(dataformatList, function (index, obj) {
                    if (dfop.dateformat === obj.id)//设置默认选项
                        $dateformat.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
                    else
                        $dateformat.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
                });


                // 日期格式选择
                $('#component_dateformat').on('change', function () {
                    var format = $('#component_dateformat').find("option:selected").val();
                    dfop.dateformat = format;
                });
            }
        },
        girdtable: {
            init: function () {
                var $html = $('<div class="z-custmerform-component" data-type="girdtable" ><i class="fa fa-table"></i>编辑表格</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '编辑表格',
                    table: '',
                    type: "girdtable",
                    proportion: '1',
                    icon: "fa fa-table",
                    minheight: 400,  // 表格默认的行数
                    columns: []//设置的字段数据
                };

                $component.html(getComponentRowHtml({ name: '编辑表格', text: '编辑表格' }));
            },
            property: function ($component) {
                var $html = initGridTable($component);

            }
        }
    }

    // 获取组件行显示html
    function getComponentRowHtml(data) {
        var html = '<div class="z-compont-title"><span>' + data.name + '</span><div class="z-compont-remove"><i  title="移除组件" class="del fa fa-close"></i></div></div><div class="z-compont-value">' + data.text + '</div>';
        return html;
    };
    // 设置组件公共属性设置html
    function initComponentPropertyHtml($component) {
        var dfop = $component[0].dfop;
        var $html = $(".z-custmerform-designer-layout-right .mCSB_container");
        var html = '';
        html += '<div class="z-component-title">绑定表</div>';
        html += '<div class="z-component-control"><select class="form-control" id="component_table"></select></div>';
        html += '<div class="z-component-title">绑定字段</div>';
        html += '<div class="z-component-control"><select class="form-control" id="component_field"></select></div>';
        html += '<div class="z-component-title">组件标题</div>';
        html += '<div class="z-component-control"><input id="component_title" type="text" class="form-control" placeholder="必填项"/></div>';
        html += '<div class="z-component-title">字段验证</div>';
        html += '<div class="z-component-control"><select class="form-control" id="component_verify"></select></div>';
        html += '<div class="z-component-title">所占比例</div>';
        html += '<div class="z-component-control"><select class="form-control" id="component_proportion"></select></div>';
        $html.html(html);

        // 标题设置
        $html.find('#component_title').val(dfop.title);
        $html.find('#component_title').keyup(function () {
            var value = $(this).val();
            $component.find('.z-compont-title span').text(value);
            dfop.title = value;
        });
        //数据表设置
        var $table = $(document).find("#component_table");
        var url = "/FormDesigner/FindPrimaryTable?keyValue=" + window.keyValue;
        window.$.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, obj) {
                    if (dfop.table === obj.Value)//设置默认选项
                        $table.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
                    else
                        $table.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
                });
            },
            complete: function () {
                var table = $('#component_table').find("option:selected").val();
                initColumn(table, dfop.field);
                dfop.table = table;
            }
        });

        // 验证初始化
        var $verify = $(document).find("#component_verify");
        $.each(verifyDatalist, function (index, obj) {
            if (dfop.verify === obj.id)//设置默认选项
                $verify.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
            else
                $verify.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
        });

        // 所占行比例初始化
        var $proportion = $(document).find("#component_proportion");
        $.each(proportionList, function (index, obj) {
            if (dfop.proportion === obj.id)//设置默认选项
                $proportion.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
            else
                $proportion.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
        });

        // 数据表选择
        $('#component_table').on('change', function () {
            var table = $('#component_table').find("option:selected").val();
            initColumn(table, dfop.field);
            dfop.table = table;
        });

        // 数据字段选择
        $('#component_field').on('change', function () {
            var field = $('#component_field').find("option:selected").val();
            dfop.field = field;
        });

        // 字段验证选择
        $('#component_verify').on('change', function () {
            var verify = $('#component_verify').find("option:selected").val();
            dfop.verify = verify;
        });

        // 所占比例选择
        $('#component_proportion').on('change', function () {
            var proportion = $('#component_proportion').find("option:selected").val();
            dfop.proportion = proportion;
            $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
        });

        return $html;
    };

    // 数据字典选择初始化、数据源选择初始化
    function createDatasource(dfop) {

        // 数据源类型
        var $sourceType = $(document).find("#component_dataSourceType");
        $.each(dataSourceTypeList, function (index, obj) {
            if (dfop.dataSourceType === obj.id)//设置默认选项
                $sourceType.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
            else
                $sourceType.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
        });

        //根据数据类型展示数据源选项或地址
        var sourceType = $("#component_dataSourceType").find("option:selected").val();
        if (sourceType === "1") {//数据字典
            initDataSource(dfop.dataSource);
            $(".dataItemCode").show();
            $(".dataItemUrl").hide();
        } else {
            $(".dataItemCode").hide();
            $(".dataItemUrl").show();
        }
        dfop.dataSourceType = sourceType;

        // 数据源选择
        $('#component_dataSourceType').on('change', function () {
            sourceType = $('#component_dataSourceType').find("option:selected").val();
            if (sourceType === "1") {//数据字典
                initDataSource(dfop.dataSource);
                $(".dataItemCode").show();
                $(".dataItemUrl").hide();
            } else {
                $(".dataItemCode").hide();
                $(".dataItemUrl").show();
            }
            dfop.dataSourceType = sourceType;
        });

        // 数据字典选择
        $("#component_dataSource").on('change', function () {
            var dataSource = $('#component_dataSource').find("option:selected").val();
            dfop.dataSource = dataSource;
        });
    }

    // 编辑表格初始化
    function initGridTable($component) {
        var dfop = $component[0].dfop;
        var $html = $(".z-custmerform-designer-layout-right .mCSB_container");
        var html = '<div class="z-component-title">绑定表</div>';
        html += '<div class="z-component-control"><select class="form-control" id="component_table"></select></div>';
        html += '<div class="z-component-title">组件标题</div>';
        html += '<div class="z-component-control"><input id="component_title" type="text" class="form-control" placeholder="必填项"/></div>';
        html += '<div class="z-component-title">组件图标</div>';
        html += '<div class="z-component-control"><input id="component_icon" type="text" class="form-control" placeholder="组件图标"/></div>';
        html += '<div class="z-component-title">最小高度</div>';
        html += '<div class="z-component-control"><input id="component_minheight" type="text" class="form-control" placeholder="必填项"/></div>';
        html += '<div class="z-component-control" style="text-align: center;padding-top: 10px;" ><a id="fieldsDataCreate" class="btn btn-primary btn-block">设置表格字段</a></div>';
        $html.html(html);

        // 标题设置
        $html.find('#component_title').val(dfop.title);
        $html.find('#component_title').keyup(function () {
            var value = $(this).val();
            $component.find('.z-compont-title span').text(value);
            dfop.title = value;
        });

        // 组件图标
        $html.find('#component_icon').val(dfop.icon);
        $html.find('#component_icon').keyup(function () {
            var value = $(this).val();
            dfop.icon = value;
        });

        // 最小高度设置
        $html.find('#component_minheight').val(dfop.minheight);
        $html.find('#component_minheight').keyup(function (e) {
            var value = $(this).val();
            dfop.minheight = value;
        });

        dfop.proportion = "1";

        //数据表设置
        var $table = $(document).find("#component_table");
        var url = "/FormDesigner/FindChildTable?keyValue=" + window.keyValue;
        window.$.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, obj) {
                    if (dfop.table === obj.Value)//设置默认选项
                        $table.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
                    else
                        $table.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
                });
            },
            complete: function () {
                var table = $('#component_table').find("option:selected").val();
                initColumn(table, dfop.field);
                dfop.table = table;
            }
        });

        // 数据表选择
        $('#component_table').on('change', function () {
            var table = $('#component_table').find("option:selected").val();
            initColumn(table, dfop.field);
            dfop.table = table;
        });

        $('#fieldsDataCreate').on('click', function () {
            window.formGridSetting = {
                columns: dfop.columns,
                tableName: dfop.table
            };
            var gridUrl = "/FormDesigner/InitGridTableIndex?keyValue=formGridSetting";
            layer.open({
                type: 2,
                title: '从表数据设置',
                shadeClose: true,
                shade: 0.4,
                area: ['75%', '75%'],
                content: gridUrl
            });
        });
    }

    function initColumn(table, dfvalue) {
        var $field = $(document).find("#component_field");
        var url = "/FormDesigner/FindColumnList?table=" + table;
        window.$.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, obj) {
                    if (dfvalue === obj.Value)
                        $field.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
                    else
                        $field.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
                });
            }
        });
    }

    // 初始化数据字典下拉
    function initDataSource(dfvalue) {
        //数据字典
        var $dataSource = $(document).find("#component_dataSource");
        var url = "/DropDown/DataSource";
        window.$.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, obj) {
                    if (dfvalue === obj.Value)//设置默认选项
                        $dataSource.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
                    else
                        $dataSource.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
                });
            },
            complete: function () {
                $('#component_dataSource').chosen();
                //$('#component_dataSource').trigger("chosen:updated");
            }
        });
    }

})(jQuery, top.zou);