{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form method="post" action="{:url('article_add')}" class="form-horizontal">
                    <input type="hidden" name="article_paper_id" value="{$id}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">题干</label>
                            <div class="col-sm-6">
                                <textarea name="title" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">分值</label>
                            <div class="col-sm-6">
                                <select class="form-control" name="score">
                                    {for start="1" end="50"}
                                    <option value="{$i}">{$i}分</option>
                                    {/for}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序(正序)</label>
                            <div class="col-sm-6">
                                <input type="number" name="sort" min="0" step="1" class="form-control" value="0">
                            </div>
                        </div>
                        <div id="vueapp">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">类型</label>
                                <div class="col-sm-6">
                                    <label class="cr-inline">
                                        <input type="radio" v-model="type" checked name="type" value="0"> 单选

                                    </label>
                                    <label class="cr-inline">
                                        <input type="radio" v-model="type" name="type" value="1"> 多选
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">选项</label> <a v-if="options.length < 8" @click="addOption" href="javascript:;">添加选项</a><br>
                                <input type="hidden" id="datioptions" name="options" value="">
                                 <div class="col-sm-6">
                                    <table class="table table-bordered">
                                    <tr>
                                        <th>内容</th>
                                        <th>正确答案</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(item, index) in options" :key="index">
                                        <td><input type="text" v-model="item.text" class="form-control input-sm"></td>
                                        <td width="100"><input type="checkbox" v-model="item.answer" @click="changeAnswer(index)"></td>
                                        <td width="100"><button type="button" v-if="options.length > 1" @click="delOption(index)">删除</button></td>
                                    </tr>
                                </table>
                                 </div>
                            </div>
                        </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" data-layer="1" target-form="form-horizontal" type="submit">确 定</button>
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>

    var options = [
        {
            "text":'选项',
            "answer":false,
        }
    ];


    var vm = new Vue({
        el: '#vueapp',
        data: {
            options: options,
            initoption: {
                "text":'选项',
                "answer":false,
            },
            numToChar: ['A','B','C','D','E','F','G','H'],
            type: '0',
        },
        computed: {
            // 计算属性的 getter
            resoptions: function () {
                return JSON.parse(JSON.stringify(this.options));
            }
        },
        watch: {
            resoptions: function (newval, oldval) {
                this.formatData();
            },
            type: function (newval, oldval) {
                console.log('type', this.type);
                // 多选改成单选是需判断正确答案是否存在多个，存在多个保留第一个
                if(this.type == '0'){
                    let flag = false;
                    for (let o in this.options){
                        if(this.options[o].answer){
                            if(!flag){
                                flag = true;
                            }else{
                                this.options[o].answer = false;
                            }
                        }
                    }
                }
            },
        },
        created: function () {
            this.formatData();
        },
        methods: {
            addOption() {
                this.options.push(JSON.parse(JSON.stringify(this.initoption)));
            },
            delOption(index) {
                let oldoptions = JSON.parse(JSON.stringify(this.options));
                let newoptions = [];
                for(let o in oldoptions){
                    if(o != index){
                        newoptions.push(oldoptions[o]);
                    }
                }
                this.options = JSON.parse(JSON.stringify(newoptions));
            },
            changeAnswer(index){
                let that = this;
                setTimeout(function () {
                    if(that.type == '0'){ // 单选正能选择一个正确答案
                        let cflag = false;
                        for(let o in that.options){
                            if(o == index && that.options[o].answer){
                                cflag = true;
                                break;
                            }
                        }
                        if(cflag){
                            for(let o in that.options){
                                if(o != index && that.options[o].answer){
                                    that.options[o].answer = false;
                                }
                            }
                        }
                    }
                },50);
            },
            formatData(){
                let ops = JSON.parse(JSON.stringify(this.options));
                let nops = [];
                for(let o in ops){
                    nops.push({
                        id: this.numToChar[o],
                        text: ops[o].text,
                        answer: ops[o].answer?'1':'0',
                    })
                }
                console.log('ret',JSON.stringify(nops));
                $('#datioptions').val(JSON.stringify(nops));
            }
        }
    })
</script>
{/block}