{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('Burst/index')}">
                        返回上一页
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <input type="hidden" name="id" value="{$info['id']|default='0'}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">事件名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="title" value="{$info.title|default=''}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-6">
                            <textarea name="remark" class="form-control">{$info.remark|default=''}</textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">事件流程</label>
                        <div class="col-sm-6">
                            <input type="hidden" name="content" id="content" value="{$info.content|default=''}">
                            <div id="vueapp">
                                <div>
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>步骤</th>
                                            <th>操作</th>
                                        </tr>
                                        <tr v-for="(item,index) in question" :key="index">
                                            <td>
                                                <div style="margin-bottom: 10px;">
                                                    <input type="text" class="form-control" v-model="item.title" placeholder="步骤名称">
                                                </div>
                                                <div style="margin-bottom: 10px;">
                                                    <input type="number" min="0" step="1" v-model="item.time" class="form-control" placeholder="时间(分钟)">
                                                </div>
                                                <div>
                                                    <table class="table table-bordered">
                                                        <tr>
                                                            <th>事项</th>
                                                        </tr>
                                                        <tr v-for="(item2,index2) in item.options" :key="index2">
                                                            <td>
                                                                <input v-if="item.options.length <= 1" type="text" class="form-control" v-model="item2.text" placeholder="事项">
                                                                <div v-if="item.options.length > 1" class="input-group">
                                                                    <input type="text" v-model="item2.text" class="form-control search-query" placeholder="事项">
                                                                    <span class="input-group-btn">
                                                                    <button type="button" @click="delOptions(index,index2)" class="btn btn-danger btn-sm">
                                                                        删除
                                                                    </button>
                                                                </span>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <a href="javascript:;" @click="addOptions(index)">添加事项</a>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger" v-if="question.length > 1" @click="delQuestion(index)">删除</button>
                                            </td>
                                        </tr>
                                    </table>
                                    <a href="javascript:;" @click="addQuestion">添加步骤</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-6">
                            <label class="cr-inline">
                                <input type="radio" value="1" name="enable">正常&nbsp;&nbsp;
                            </label>
                            <label class="cr-inline">
                                <input type="radio" value="0" name="enable">禁用
                            </label>
                        </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" target-form="form-horizontal" type="submit">确 定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(document).ready(function(){
        formSetValue("enable", {$info.enable|default=1});
        formSetValue("type", {$info.type|default=0});
    });


    {if condition="isset($info)"}
    var question = {$info['content']|raw};
    {else /}
    var question = [];
    {/if}

    new Vue({
        el: '#vueapp',
        data: {
            question: question,
            info: {
                title: "",
                time: "",
                options: [{
                    text: "",
                    status: 0,
                }],
                status: 0
            }
        },
        computed: {
            resoptions: function () {
                return JSON.parse(JSON.stringify(this.question));
            }
        },
        watch: {
            resoptions: function (newval, oldval) {
                console.log(newval, oldval);
                this.formatData();
            },
        },
        created: function () {
            if(this.question.length == 0) {
                this.question.push(JSON.parse(JSON.stringify(this.info)));
            }
            this.formatData();
        },
        methods: {
            addQuestion() {
                // const item = JSON.parse(JSON.stringify(this.info));
                this.question.push(JSON.parse(JSON.stringify(this.info)));
                console.log(this.question);
            },
            delQuestion(index) {
                console.log(index);
                let qes = [];
                this.question.forEach((item,index2) => {
                    if(index != index2){
                        qes.push(item);
                    }
                });
                this.question = JSON.parse(JSON.stringify(qes));
            },
            addOptions(index){
                this.question.forEach((item,idx) => {
                    const info1 = item;
                    if(index == idx){
                        info1.options.push({
                            text: "",
                            status: 0
                        });
                    }
                })
            },
            delOptions(index,index2){
                this.question.forEach((item,idx) => {
                    const info1 = item;
                    if(index == idx){
                        let ops = [];
                        info1.options.forEach((item2,idx2) => {
                            if(idx2 != index2){
                                ops.push(item2);
                            }
                        });
                        info1.options = JSON.parse(JSON.stringify(ops));
                    }
                })
            },

            formatData(){
                if(this.question.length > 0){
                    $('#content').val(JSON.stringify(this.question));
                }else{
                    $('#content').val('');
                }

            },
        }
    })

</script>
{/block}