{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('add')}" class="form-horizontal">
                    <input type="hidden" name="dep_id">
                    <input type="hidden" name="items">
                    <div id="dispatchapp">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地点<span class="text-danger">*</span></label>
                            <div class="col-sm-6">
                                <el-select v-model="v1" clearable filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in dep"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">物品<span class="text-danger">*</span></label>
                            <div class="col-sm-6">
                                <el-select
                                        v-model="v2"
                                        multiple
                                        collapse-tags
                                        placeholder="请选择">
                                    <el-option v-for="item in items" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                                </el-select>
                            </div>
                        </div>

                        <div v-if="spec.length > 0">
                            <div class="form-group"  :key="index" v-for="(item,index) in spec">
                                <label class="col-sm-2 control-label">{{item.title}}数量<span class="text-danger">*</span></label>
                                <div class="col-sm-6">
                                    <input type="text" @input="setValue"  v-model="spec[index].num"   class="form-control" >
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">收取照片</label>
                        <div class="col-sm-6">
                            {:widget_view('common/upimg',['name'=>'sq_img','multi'=>0,'val'=>''])}

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">收取签名<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            {:widget_view('common/upimg',['name'=>'sq_sign','multi'=>0,'val'=>''])}

                        </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>
    $(document).ready(function(){
        formSetValue("enable", {$info.enable|default=1});
        formSetValue("is_show", {$info.is_show|default=0});
    });
    new Vue({
        el: '#dispatchapp',
        data: function() { // value: 'zhinan', label: '指南',children
            return {
                dep: {:json_encode($dep)},
                items:  {:json_encode($items)},
                v1: '',
                v2: '',
                spec:[]

        }
        },
        watch: {
            v1: function (newQuestion, oldQuestion) {
                $("input[name=dep_id]").val(newQuestion);

            },
            v2: function (newQuestion, oldQuestion) {
                let newspec = [];
                newQuestion.forEach((item) => {
                    let num = 0;
                let title = '';
                this.spec.forEach((item2) => {
                    if(item2.id.toString() == item.toString()){
                    num = item2.num;
                    title = item2.title;
                }
            });
                if(!title){
                    this.items.forEach((item3) => {
                        if(item3.id.toString() == item){
                        title = item3.title
                    }
                });
                }

                newspec.push({
                    id: item,
                    num: num,
                    title: title
                })
            });

                this.spec = JSON.parse(JSON.stringify(newspec));
                $("input[name=items]").val(JSON.stringify(this.spec));

            },


        },

        methods:{
            setValue:function () {
                console.log(this.spec);
                $("input[name=items]").val(JSON.stringify(this.spec));

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