<div class="modal fade" id="executingTaskModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center text-uppercase">
                    卸货任务装卸队指定
                </h5>
                <button type="button" class="close" data-dismiss="modal" @click="executingTack={},selectIndex = null,taskError={}">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form class="form">
                    <div class="form-group row">
                        <label for="executingTack-owner-id" class="col-sm-3 col-form-label text-right  text-primary">装卸队 *</label>
                        <div class="col-sm-5">
                            <select id="executingTack-owner-id" class="form-control" v-model="executingTack.facilitator_id" :class="taskError.facilitator_id? 'is-invalid' :''">
                                <option v-for="(providers,index) in facilitatorsFilter" :value="providers.id" :key="providers+index">@{{ providers.name }}</option>
                            </select>
                            <div class="invalid-feedback" >
                                @{{ taskError['facilitator_id'] ? taskError['facilitator_id'][0] : '' }}
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <input class="form-control" placeholder="输入装卸队进行刷选" @input="filterProviders($event)">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="executingTack-created-at" class="col-sm-3 col-form-label text-right text-primary">卸货日期 *</label>
                        <div class="col-sm-9 form-inline">
                            <input type="datetime-local" id="executingTack-created-at"  class="form-control col-9"  v-model="executingTack.expenditure_at">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="executingTack-amount" class="col-sm-3 col-form-label text-right text-primary">数量 *</label>
                        <div class="col-sm-9 form-inline">
                            <input type="number" id="executingTack-amount" class="form-control col-9"  v-model="executingTack.expenditure_amount" :class="taskError.facilitator_id? 'is-invalid' :''">
                            <div class="invalid-feedback" >
                                @{{ taskError['facilitator_id'] ? taskError['facilitator_id'][0] : '' }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="executingTack-amount" class="col-sm-3 col-form-label text-right text-primary">单位 *</label>
                        <div class="col-sm-9 form-inline">
                            <select id="executingTack-type" class="form-control col-4" v-model="executingTack.expenditure_unit" :class="taskError.expenditure_unit? 'is-invalid' :''">
                                <option v-for="(unit,index) in units" :value="unit.name" :key="unit+index">@{{ unit.value }}</option>
                            </select>
                            <div class="invalid-feedback" >
                                @{{ taskError['expenditure_unit'] ? taskError['expenditure_unit'][0] : '' }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="executingTack-expenditure-unit-price" class="col-sm-3 col-form-label text-right  text-primary">外派单价 *</label>
                        <div class="col-sm-9 form-inline">
                            <input type="number" id="executingTack-expenditure-unit-price" class="form-control col-9"  v-model="executingTack.expenditure_unit_price" :class="taskError.expenditure_unit_price? 'is-invalid' :''">
                            <div class="invalid-feedback" >
                                @{{ taskError['expenditure_unit_price'] ? taskError['expenditure_unit_price'][0] : '' }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="executingTack-amount" class="col-sm-3 col-form-label text-right">备注</label>
                        <div class="col-sm-9 form-inline">
                            <textarea class="form-control col-9"  v-model="executingTack.expenditure_remark"></textarea>
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"  data-dismiss="modal" @click="executingTack={},selectIndex = null,taskError={}">关闭</button>
                <button type="button" class="btn btn-primary"  @click="executedTask(executingTack,selectIndex)">提交</button>
            </div>
        </div>
    </div>

</div>
