$("#NewProblem").addClass('mui-active');
$('#title-right').replaceWith(function () {
    return $("<button onclick='Submit()' class='mui-btn mui-btn-blue mui-btn-link mui-pull-right' style='color:#ffffff'>提交</button>").append($(this).contents());
});


//初始化
var ProblemIDtoImg;
var Count = 0;
var lod;
//var UserType;
//var CurrentProject;
//function GetUserType(val) {
//    UserType = val;
//}
//function GeCurrentProject(val) {
//    CurrentProject = val;
//}
function AddStatus(ProjectID, name) {

    vm.Product = ProjectID;
    $("#Project").html(name);
    mui('#middlePopover').popover('hide');

}
function AddInstitution(InstitutiontID, name) {
    vm.Institution = InstitutiontID;
    $("#Institution").html(name);
    $("#InstitutionID").val("");
    mui('#middlePopover2').popover('hide');

}
///提交产品问题
function Submit() {
    var param = {
        detail: $("#detail").val(),
        ProjectID: $("#ProjectID").val(),
        ProductID: $("#ProductID").val(),
        ProductVersion: $("#ProductVersion").val(),
        Departments: $("#Departments").val(),
        ErginID: $("#ErginID").val(),
        RequireTime: $("#RequireTime").val(),
        urgentDetail: $("#urgentDetail").val(),
        DealStatus: $('input:radio:checked').attr("id"),
        DealDetail: $("#DealDetail").val(),
        ProblemTitile: $("#ProblemTitile").val(),
        InstitutionID: $("#InstitutionID").val()
    };
    if ($("#ProblemTitile").val().trim() == '') {
        mui.toast('请输入问题标题', { duration: 'long', type: 'div' });
        $('#ProblemTitile').focus();
        return;
    }
    if ($("#detail").val().trim() == '') {
        mui.toast('请填写问题详细描述', { duration: 'long', type: 'div' });
        $('#detail').focus();
        return;
    }
    if ($("#ProductID").val().trim() == '') {
        mui.toast('请选择存在问题的产品', { duration: 'long', type: 'div' });
        $('#product').click();
        return;
    }

    lod = mui.showLoading("正在提交，请稍后...", "div");
    $.post("/MobileProblem/SubmitProblem", param, function (data) {
        if (data.code == 200) {
            ProblemIDtoImg = data.msg;
            $("#ctlBtn").click();
        } else {
            mui.toast(data.msg, { duration: 'long', type: 'div' });
        }
    })
}
var ProjectObj;
///获取产品信息
var vm = new Vue({
    el: '#VUE',
    data: {
        msg: 'Hello World!',
        Product: '',
        userPicker: null,
        Institution:''
    },
    watch: {
        Product: function (newProduct, oldProduct) {
            userResult.innerText = "请选择产品";
            $("#ProductID").val("");
            $("#ProductVersion").val("");
            this.GetProduct();
            Institution.innerText = "请选择机构";
            $("#InstitutionID").val("");
            this.GetInstitution();
        }
    },
    methods: {
        GetInstitution: function () {
            $("#InstitutionSelet").empty();
            this.$http.get('/MobileProblem/GetInstitution/' + this.Product).then(function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    $("#InstitutionSelet").append(" <li   class='mui-table-view-cell '> <a onclick='AddInstitution(\"" + res.data[i].ID + "\",\"" + res.data[i].名称 + "\")' class='mui-navigate-right'>" + res.data[i].名称 + "</a> </li>");
                }
            }, function () {
                console.log('机构选项请求失败');
            });
        },
        GetProduct: function () {

            //发送get请求
            this.$http.get('/MobileProblem/GetProduct/' + this.Product).then(function (res) {
                var d = [];
                for (var i = 0; i < res.data.length; i++) {
                    var c = {};
                    c.value = res.data[i].产品ID;
                    c.text = res.data[i].名称 + '-' + res.data[i].版本;
                    d.push(c);

                }

                this.userPicker.setData(d);

                var showUserPickerButton = document.getElementById('product');
                var userResult = document.getElementById('userResult');
                var $this = this;
                showUserPickerButton.addEventListener('tap', function (event) {
                    $this.userPicker.show(function (items) {

                        $("#ProductID").val(items[0].value);
                        if (items[0].text != null && items[0].text != "") {
                            var x = items[0].text.indexOf("-");
                            userResult.innerText = items[0].text.substring(0, x);
                            $("#ProductVersion").val(items[0].text.substring(x + 1));
                        }

                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);

            }, function () {
                console.log('产品项请求失败');
            });
        },
        GetEmergency: function () {
            //发送get请求
            this.$http.get('/MobileProblem/GetCodeCombobox?ClassificationID=A10D6027-DEDD-4B6D-9549-33830DE52AEA').then(function (res) {
                var d = [];

                for (var i = 0; i < res.data.length; i++) {
                    var c = {};
                    c.value = res.data[i].代码;
                    c.text = res.data[i].显示名;
                    d.push(c);

                }
                //初始化紧急程度
                var userPicker2 = new mui.PopPicker();
                userPicker2.setData(d);
                var showUserPickerButton2 = document.getElementById('Ergin');
                var userResult2 = document.getElementById('ErginID');
                showUserPickerButton2.addEventListener('tap', function (event) {
                    userPicker2.show(function (items) {
                        ErginValue.innerText = items[0].text;
                        $("#ErginID").val(items[0].value);
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);
            }, function () {
                console.log('紧急程度请求失败');
            });
        },
        GetProject: function () {
            this.$http.get('/MobileProblem/GetProductCombobox').then(function (res) {
                ProjectObj = res.data;
                for (var i = 0; i < res.data.length; i++) {
                    $("#ProjectSelect").append(" <li   class='mui-table-view-cell '> <a onclick='AddStatus(\"" + res.data[i].ID + "\",\"" + res.data[i].名称 + "\")' class='mui-navigate-right'>" + res.data[i].名称 + "</a> </li>");
                }
                this.CheckProject();
            }, function () {
                console.log('项目选项请求失败');
            });
        },
        CheckProject: function () {
            for (var i = 0; i < ProjectObj.length; i++) {
                if (ProjectObj[i].ID == CurrentProject) {
                    this.Product = ProjectObj[i].ID;
                    $("#Project").html(ProjectObj[i].名称);
                    return;
                }
            }
        }
        , loadTime: function () {
            ///实例化日期组件
            var btns = $('.time-btn');
            btns.each(function (i, btn) {
                btn.addEventListener('tap', function () {
                    var _self = this;
                    if (_self.picker) {
                        _self.picker.show(function (rs) {
                            btn.innerHTML = rs.text;
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    } else {
                        var optionsJson = this.getAttribute('data-options') || '{}';
                        var options = JSON.parse(optionsJson);
                        var id = this.getAttribute('id');

                        _self.picker = new mui.DtPicker(options);
                        _self.picker.show(function (rs) {
                            /*
                             * rs.value 拼合后的 value
                             * rs.text 拼合后的 text
                             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                             * rs.m 月，用法同年
                             * rs.d 日，用法同年
                             * rs.h 时，用法同年
                             * rs.i 分（minutes 的第二个字母），用法同年
                             */
                            btn.innerHTML = rs.text;
                            $("#RequireTime").val(rs.text);
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    }

                }, false);
            })
        },
        Load: function () {

            var $list = $("#fileList");

            var $btn = $("#ctlBtn");
            var thumbnailWidth = 100;
            var thumbnailHeight = 100;
            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '/Content/Scripts/plugins/mui/js/Uploader.swf',

                // 文件接收服务端。
                server: '/MobileProblem/ImageUploadFTP',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',


                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                compress: {
                    width: 1600,
                    height: 1600,

                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 90,

                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,

                    // 是否允许裁剪。
                    crop: false,

                    // 是否保留头部meta信息。
                    preserveHeaders: true,

                    // 如果发现压缩后文件大小比原来还大，则使用原来图片
                    // 此属性可能会影响图片自动纠正功能
                    noCompressIfLarger: false,

                    // 单位字节，如果图片大小小于此值，不会采用压缩。
                    compressSize: 0

                }
            });
            uploader.on('fileQueued', function (file) {
                var $li = $(

                     '<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><img><p>' + file.name + '</p> </li>'
                        ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                $list.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).addClass('upload-state-done');
                if (response.msg = "1") {
                    Count += 1;
                }
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();

            });
            uploader.on('uploadFinished', function () {
                mui.hideLoading(lod);
                mui.alert("问题提交成功，成功上传" + Count + "张图片", "提交成功", "确定", function () {
                    window.location.href = "/MobileProblem/NewProblem";
                }, 'div');
            })
            $btn.on('click', function () {
                uploader.options.formData.ProblemID = ProblemIDtoImg;
                uploader.upload();

            });
            document.getElementById('pick').addEventListener('tap', function () {

                $(".webuploader-element-invisible").click();

            });
            $("#ProblemTitile").mouseleave(function () {
                var va = $("#ProblemTitile").val();
                $("#detail").val(va);

            })
        }

    }, mounted: function () {
        //初始化产品项
        this.Load();
        this.userPicker = new mui.PopPicker();
        this.GetProject();
        if (UserType == "true") {
            this.GetEmergency();
            this.loadTime();
        } else {
            $("#ProjectSelet").hide();
            $("#institut").hide();
        }

    }
});