{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 class="form ajax-form" action="lastSave" method="POST">
                    <div id="vueapp">
                        <table class="table table-bordered">
                            <tr>
                                <th>名称</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(item, index) in options" :key="index">
                                <td>{{item.title}}</td>
                                <td style="width: 150px;"><input v-model="item.nums" type="number" class="form-control"></td>
                                <td style="width: 150px;"><button v-if="options.length > 1" @click="delOption(index)">删除</button></td>
                            </tr>
                        </table>
                        <input type="hidden" id="datioptions" name="options" value="">
                        <input type="hidden"  name="name" value="{$name}">
                        <input type="hidden"  name="phone" value="{$phone}">
                        <input type="hidden"  name="remark" value="{$remark}">
                        <button  type="button" class="btn btn-primary btn-cus" >保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var vm = new Vue({
        el: '#vueapp',
        data: {
            options: {:json_encode($lists,302)},
    },
    computed: {
        // 计算属性的 getter
        resoptions: function () {
            return JSON.parse(JSON.stringify(this.options));
        }
    },
    watch: {
        resoptions: function (newval, oldval) {
            this.formatData();
        },
        type: function (newval, oldval) {

        },
    },
    created: function () {
        this.formatData();
    },
    methods: {

        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));
        },

        formatData(){
            let ops = JSON.parse(JSON.stringify(this.options));
            console.log('ret',JSON.stringify(ops));
            $('#datioptions').val(JSON.stringify(ops));
        }
    }
    })

    $('.btn-cus').click(function () {
        var data = $('.ajax-form').serialize();
        $.post('lastSave',data,function (res) {
            console.log(res);
            if(res.code==0){
                layer.msg(res.msg);
                return;
            }else if (res.code==1){
                layer.msg(res.msg,{time:2000},function () {
                    parent.layer.closeAll();

                });
            }

        })
    })
</script>
{/block}