@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="row">
                <div class="col-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">请编辑商品内容</h4>
                            {{--<p class="card-message">--}}
                            {{--Basic form elements--}}
                            {{--</p>--}}
                            <form class="forms-sample" id="form">
                                    <div class="form-inline" id="test">
                                        <label for="exampleInputName1">*选择奖品：</label>
                                        <select class="form-control" name="prize">
                                            <option v-for="(item,index) in data" :v-value="item.PropID">@{{item.PropName}}</option>
                                        </select>
                                        <label for="exampleInputName1">*奖品数量：</label>
                                        <input type="text" class="form-control required" name="amount" placeholder="输入奖品数量">
                                        <button @click="add()">增加</button>
                                    </div>
                                    <div class="form-inline" style="margin-top: 5px">
                                        <label for="exampleInputName1">*奖品内容：</label>&nbsp;&nbsp;
                                        <input type="text" id="c" style="color: black;width: 500px;" class="form-control required" name="content">
                                    </div>
                                    <div class="form-inline" style="margin-top: 5px">
                                        <label for="exampleInputName1">*奖品描述：</label>&nbsp;&nbsp;
                                        <input type="text" style="color: black;width: 500px;" class="form-control required" name="desc" placeholder="输入奖品描述">
                                    </div>
                                    <div class="form-inline" style="margin-top: 5px">
                                        <label for="exampleInputName1">*奖品名称：</label>&nbsp;&nbsp;
                                        <input type="text" style="color: black;width: 500px;" class="form-control required" name="name" placeholder="输入奖品描述">
                                    </div>
                                    <div class="form-inline" style="margin-top: 5px">
                                        <label for="exampleInputName1">*过期时间：</label>&nbsp;&nbsp;
                                        <input type="datetime-local" style="color: black;width: 500px;" name="time" class="form-control required" />
                                    </div>
                                    <button type="button" onclick="commit()" class="btn btn-sm btn-gradient-primary btn-icon-text">
                                        <i class="mdi mdi-file-check btn-icon-prepend"></i>
                                        提交
                                    </button>
                                    <button type="button" onclick="cancel()" class="btn btn-sm btn-gradient-warning btn-icon-text">
                                        <i class="mdi mdi-reload btn-icon-prepend"></i>
                                        取消
                                    </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var test = new Vue({
            el:'#test',
            data:{
                data : '1'
            },
            created(){
                var that = this;
                $.get(
                    'http://www.fa.com/admin/gift/list',
                    function(data){
                        that.data = data;
                    },
                )
            },
            methods:{
                add(){
                    let gift = {
                        id:"",
                        number:""
                    }
                    this.all.push(gift)
                }
            }
        })
    </script>
    <script> 
        function add(){
            var a = $("#a").find("option:selected").text();
            var b = parseInt(document.getElementById("b").value);
            $("#c").val(a+b);
        }
        function commit(){
            if(!checkForm()){
                return false;
            }
            var data = $("#form").serializeObject();
            myRequest("/admin/gift/add/","post",data,function(res){
                layer.msg(res.msg)
                setTimeout(function(){
                    parent.location.reload();
                },1500)
            });
        }
        function cancel() {
            parent.location.reload();
        }
    </script>
@endsection