@extends('base.base')
@section('base')
    <!-- 内容区域 -->
{{--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>--}}
    <script src="/assets/js/vue.js"></script>
{{--    <script src="https://cdn.jsdelivr.net/npm/vue"></script>--}}
    <script src="/assets/js/jquery-3.0.0.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">{{ __('auto.请编辑礼包内容') }}</h4>
                            {{--<p class="card-message">--}}
                            {{--Basic form elements--}}
                            {{--</p>--}}
                            <div class="form-inline" id="test">
                                <div class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*邮件方式：</label>&nbsp;&nbsp;
                                    <select class="form-control" v-model="type" v-on:change="indexSelect">
                                        <option :value="index" v-for="(item,index) in typeList" :key="index" selected >
                                            @{{item}}
                                        </option>
                                    </select>
                                </div>
                                <div class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*收件人ID：</label>&nbsp;&nbsp;
                                    <input v-model="game_id" type="text" style="color: black;width: 500px;"
                                           class="form-control" name="game_id" placeholder="{{ __('auto.玩家游戏') }}ID">
                                </div>
                                <div class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*邮件标题：</label>&nbsp;&nbsp;
                                    <input v-model="title" type="text" style="color: black;width: 500px;"
                                           class="form-control" name="title" placeholder="{{ __('auto.输入标题') }}">
                                </div>
                                <div class="form-inline" style="margin-top: 5px">
                                    <label for="exampleInputName1">*邮件内容：</label>&nbsp;&nbsp;
                                    <textarea v-model="text" style="color: black;width: 500px;" class="form-control"
                                              name="text" rows="4" placeholder="{{ __('auto.输入邮件内容') }}"></textarea>
                                </div>
                                <div v-for="(item,index) in allGift" :key="index" class="form-inline" v-if="play"
                                     style="margin-top: 5px">
                                    <label for="exampleInputName1">*选择奖品：</label>&nbsp;&nbsp;
                                    <select v-model="item.id" class="form-control">
                                        <option :value="item.PropID" v-for="(item,index) in giftList" :key="index" selected>
                                            @{{item.PropName}}
                                        </option>
                                    </select>
                                    <label for="exampleInputName1">*奖品数量：</label>&nbsp;&nbsp;
                                    <input v-model="item.number" class="form-control required">
                                </div>
                                <div>
                                    <button @click="add()" class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.增加') }}
                                    </button>
                                    <button @click="del()" class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.减少') }}
                                    </button>
{{--                                    <button @click.once="send()" id="send"--}}
                                    <button id="send" @click="send()"
                                            class="btn btn-sm btn-gradient-primary btn-icon-text">{{ __('auto.提交') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var test = new Vue({
            el: '#test',
            data() {
                return {
                    data: {
                        id: 0,
                        BonusNumber: 1,
                        BonusString: '',

                    },
                    giftList: [],
                    allGift: [{
                        id: "30000",
                        number: ""
                    }],
                    typeList : {'1':'{{ __('auto.全部玩家') }}','2':'{{ __('auto.单个玩家') }}'},
                    type: 2,
                    title: '',
                    game_id: '',
                    text: '',
                    play:1

                }
            },
            created() {
                var that = this;
                //that.giftList = "['id'=>3000,'PropName'=>'金币']"
                $.get(
                    '/admin/gift/list',
                    function (data) {
                        that.giftList = data;
                    },
                )
            },
            methods: {
                add: function () {
                    let oneGift = {
                        id: "",
                        number: ""
                    }
                    this.allGift.push(oneGift)
                },
                del: function () {
                    let oneGift = {
                        id: "",
                        number: ""
                    }
                    this.allGift.pop(oneGift)
                },
                indexSelect:function(){
                    if (this.type == 1){
                        this.play=0
                    }else{
                        this.play=1

                    }

                },
                send: function () {

                    if (this.type == 1 && this.game_id != '') {
                        layer.msg('{{ __('auto.全部玩家时，玩家游戏ID不允许有值！') }}')
                        return false;
                    }

                    if (this.type == 2 && this.game_id == ''){
                        layer.msg('{{ __('auto.私人邮件缺少发件人') }}')
                        return false;
                    }


                    $.post('/admin/mail/add', {
                        'type': this.type,
                        'game_id': this.game_id,
                        'title': this.title,
                        'bonus': this.allGift,
                        'text': this.text
                    })
                        .then(function (res) {
                            layer.msg(res.msg)
                            if (res.code == 200) {
                                setTimeout(function () {
                                    parent.location.reload();
                                }, 1500)
                            }
                        });

                   // parent.location.reload();


                }

            }
        })
    </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