iHealth-app-demo/html/survey/js/multiple_choice_question.js

var type,
    num = 2,
    q_index = 1,
    q_num = 1,
    tp_id,
    jsonData;
var $min = $("#min"),
    $minSelect = $min.find(".form-select"),
    $max = $("#max"),
    $maxSelect = $max.find(".form-select");
mui.init();
mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    type = self.type;
    tp_id = self.tp_id;
    q_num = self.q_num || 1;
    jsonData = self.jsonData;
    q_index = self.q_index || self.q_num;
    if(type == "radio"){
        $("#single").attr("checked", true);
        $min.hide();
        $max.hide();
    }else if(type == "checkbox"){
        $("#multiple").attr("checked", true);
        $min.show();
        $max.show();
    }
    if(jsonData){
        fillData();
    }else{
        //新增情况下，给默认的两个option添加optCode的值
        $(".option:eq(0)").attr("data-code", getUUID());
        $(".option:eq(1)").attr("data-code", getUUID());
    }
    var q_options = createNumOptions(q_num,q_index);
    $("#question_sort").find(".form-select").append(q_options);
    bindEvents();
});

function fillData(){
    $(".title-input").val(jsonData.title);
    if(jsonData.isRequired){
        $("#require").addClass("mui-active");
    }else{
        $("#require").removeClass("mui-active");
    }
    var options = jsonData.optionArr,
        len = options.length;
    num = len;
    console.log(options);
    $(".option:eq(0)").find("input").val(options[0].content);
    $(".option:eq(0)").attr("data-code", options[0].optCode);
    if(options[0].haveComment == 1){
        $(".option:eq(0)").find(".comment").attr("checked", true);
        if(options[0].isRequired == 1){
            $(".option:eq(0)").find(".isrequired").attr({"disabled": false, "checked": true});
        }else{
            
        }
    }
    $(".option:eq(1)").find("input").val(options[1].content);
    $(".option:eq(1)").attr("data-code", options[1].optCode);
    if(options[1].haveComment == 1){
        $(".option:eq(1)").find(".comment").attr("checked", true);
        if(options[1].isRequired == 1){
            $(".option:eq(1)").find(".isrequired").attr({"disabled": false, "checked": true});
        }
    }
    if(len > 2){
        var html = '',
            opHtml = '';
        for(i=2; i<len; i++){
            var op = options[i],
                haveComment = op.haveComment? "checked" : "",
                disabled = op.haveComment? (op.isRequired? "checked": "") : "disabled";
            html += '<tr class="option" data-code="'+op.optCode+'"><td class="pl10">'+
                '<input type="text" class="gray-input c-f14 c-323232" placeholder="选项名称" value="'+op.content+'"></td>'+
                '<td><input class="icon-checkbox mr10 comment" type="checkbox" '+haveComment+'></td>'+
                '<td><input class="icon-checkbox mr10 isrequired" type="checkbox" '+disabled+'></td>'+
                '<td><img class="del_icon" src="../images/icon-shanchu-red.png" width="20"></td></tr>';
            var j = i+1;
            opHtml += "<option value='"+j+"'>"+j+"</option>";
        }
        $("#new_option").parent().before(html);
        $minSelect.append(opHtml);
        $maxSelect.append(opHtml);
        mui('.mui-switch')['switch']()
    }
    if(jsonData.minOptions){
        $minSelect.val(jsonData.minOptions);
    }
    if(jsonData.maxOptions){
        $maxSelect.val(jsonData.maxOptions);
    }
}

function bindEvents(){
    $("body").on("tap", ".del_icon", function(){
        var $this = $(this),
            $tr = $this.closest("tr"),
            $list = $(".option");
        if($list.length <= 2){
            dialog({
                content: "无法删除，每个题目至少需要两个选项",
                contentType: 'tipsbox',
                skin: 'bk-popup',
                closeTime: 2000
            }).showModal();
        }else{
            $tr.remove();
            $minSelect.find("option[value="+num+"]").remove();
            $maxSelect.find("option[value="+num+"]").remove();
            num --;
        }
    });
    
    $("#new_option").on("tap", function(){
        var code = getUUID();
        var html = '<tr class="option" data-code="'+code+'"><td class="pl10"><input type="text" class="gray-input c-f14 c-323232" placeholder="选项名称"></td>'+
            '<td><input class="icon-checkbox mr10 comment" type="checkbox"></td>'+
            '<td><input class="icon-checkbox mr10 isrequired" type="checkbox" disabled></td>'+
            '<td><img class="del_icon" src="../images/icon-shanchu-red.png" width="20"></td></tr>';
        var $parent = $(this).parent();
        $parent.before(html);
        num ++;
        var opHtml = "<option value='"+num+"'>"+num+"</option>";
        $minSelect.append(opHtml);
        $maxSelect.append(opHtml);
        mui('.mui-switch')['switch']()
    });
    
    $("body").on('click', '.icon-checkbox.comment', function(){
        var checked = $(this).prop("checked"),
            $parent_tr = $(this).closest("tr"),
            $isrequired = $parent_tr.find(".isrequired");
        if(checked){
            $isrequired.attr("disabled", false);
            $isrequired.attr("checked", true);
        }else{
            $isrequired.attr("disabled",true);
        }
    });
    
    $("input[name=type]").on('change', function(){
        var value = this.value;
        if(value == "single"){
            $min.hide();
            $max.hide();
        }else{
            $min.show();
            $max.show();
        }
    });
    
    $minSelect.on("change", function(){
        var minValue = this.value,
            maxValue = $maxSelect.val();
        
        if((maxValue>0) && (minValue > maxValue)){
            dialog({
                content: "最多选择不得少于最少选择。",
                contentType: 'tipsbox',
                skin: 'bk-popup',
                closeTime: 2000
            }).showModal();
        }
        
    });
    $maxSelect.on("change", function(){
        var minValue = $minSelect.val(),
            maxValue = this.value;
        
        if((maxValue>0) && (minValue > maxValue)){
            dialog({
                content: "最多选择不得少于最少选择。",
                contentType: 'tipsbox',
                skin: 'bk-popup',
                closeTime: 2000
            }).showModal();
        }
        
    });
    
    $("#submit_btn").on('click', function(){
        var title = $(".title-input").val(),
            checked_type = $("input[name=type]:checked").val(),
            minValue = $minSelect.val()== "0" ? "" : $minSelect.val(),
            maxValue = $maxSelect.val()== "0" ? "" : $maxSelect.val(),
            $options = $(".option"),
            len = $options.length,
            isRequired = $("#require").hasClass("mui-active") ? 1 : 0,
            comment = jsonData? (jsonData.comment || "") :"",
            type_text = (checked_type == "single") ? 0 : 1,
            sort = $("#question_sort").find(".form-select").val();
        var options = [];
        var errMsg = "";
        if($.trim(title).length == 0){
            errMsg += "请输入标题";
        }
        for(i=0; i<len; i++){
            var $item = $($options[i]),
                text  = $item.find(".gray-input").val();
            
            if($.trim(text).length == 0){
                errMsg += "<br/>请输入选项内容";
                break;
            }else{
                var obj = {
                    isRequired: $item.find(".isrequired").prop("checked")? 1 : 0,
                    haveComment: $item.find(".comment").prop("checked")? 1 : 0,
                    nextQuestion: '',
                    content: text,
                    optCode: $item.attr("data-code")
                };
                options.push(obj);
            }
        }
        if((checked_type == "multiple") && minValue > 0 && maxValue > 0 && minValue > maxValue){
            errMsg += "<br/>最多选择不得少于最少选择"
        }
        
//      if((checked_type == "multiple") && (minValue > 0 || maxValue > 0)){
//          if(minValue > 0){
//              comment += "最少选择"+minValue+"项";
//          }
//          if(maxValue > 0){
//              comment += "最多选择"+maxValue + "项";
//          }
//      }else{
//          comment = "";
//      }
        
        if(errMsg.length > 0){
            dialog({
                content: errMsg,
                contentType: 'tipsbox',
                skin: 'bk-popup',
                closeTime: 2000
            }).showModal();
        }else{
            //将数据存储到表中
            var time = new Date().getTime();
            console.log(jsonData);
            var self = plus.webview.currentWebview(),
                opener = self.opener(),
                info = {
                    title: title,
                    isRequired: isRequired,
                    type: type_text,
                    comment: comment,
                    updateTime: time,
                    sort: sort,
                    options: JSON.stringify(options),
                    tp_id: tp_id,
                    index: jsonData ? jsonData.index1 : q_index,
                    minOptions: minValue,
                    maxOptions: maxValue
                };
            if(jsonData){
                //修改数据
                mui.fire(opener, "update", {info: info, code: jsonData.code});
                mui.back();
            }else{
                //新增数据
                mui.fire(opener, "addQuestion", {info: info});
                mui.back();
            }
        }
    });
}

function createNumOptions(n, index){
    var opHtml = "";
    console.log("n = "+num);
    for(i=1; i<=n; i++){
        console.log("i="+i);
        if(n == index){
            if(i == n){
                opHtml += "<option value='"+i+"' selected>"+i+"</option>";
            }else{
                opHtml += "<option value='"+i+"'>"+i+"</option>";
            }
        }else{
            if(i == index){
                opHtml += "<option value='"+i+"' selected>"+i+"</option>"; 
            }else{
                opHtml += "<option value='"+i+"'>"+i+"</option>";
            }
        }
    }
    return opHtml;
}

function getUUID(){//生成全局唯一标识符
    var d = new Date().getTime();
    var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}