<div class="modal fade" id="introduce">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title font-weight-bold">
                    <span v-if="type==='storage'">仓储计费</span>
                    <span v-if="type==='operation'">作业计费</span>
                    <span v-if="type==='express'">快递计费</span>
                    <span v-if="type==='logistic'">物流计费</span>
                    <span v-if="type==='directLogistic'">直发车计费</span>
                </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-6">
                            <div class="row">
                                <label for="introduceCustomer" class="col-3">客户</label>
                                <select id="introduceCustomer" class="form-control form-control-sm rounded-pill col-6"
                                        @change="searchPriceModel()" v-model="introduce.customer_id">
                                    <option v-for="customer in customers" :value="customer.id">@{{ customer.name }}</option>
                                </select>
                            </div>
                            <div class="row mt-2">
                                <label for="introduceOwner" class="col-3">项目</label>
                                <select id="introduceOwner" class="form-control form-control-sm rounded-pill col-6"
                                        @change="searchPriceModel()" v-model="introduce.owner_id">
                                    <option v-for="ow in pool.owners" :value="ow.id" v-if="!introduce.customer_id || (ow.customer_id == introduce.customer_id)">@{{ ow.name }}</option>
                                </select>
                            </div>
                            <div class="row mt-2" v-if="type=='express' || type=='logistic'">
                                <label for="introduceLogistic" class="col-3">承运商</label>
                                <select id="introduceLogistic" class="form-control form-control-sm rounded-pill col-6"
                                        @change="searchPriceModel()" v-model="introduce.logistic_id">
                                    <option v-for="logistic in pool.logistics" :value="logistic.id"
                                    v-if="(type=='express' && logistic.type!='物流') || (type=='logistic' && logistic.type!='快递')">@{{ logistic.name }}</option>
                                </select>
                            </div>
                            <div class="row mt-2">
                                <label for="introduceName" class="col-3">名称</label>
                                <input placeholder="模糊搜索，回车提交" @keydown.13="searchPriceModel()" id="introduceName" class="form-control form-control-sm rounded-pill col-8" v-model="introduce.name"/>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row justify-content-center h-100 text-secondary">
                                <div class="align-self-center h1" v-if="isSearch">
                                    <i class="fa fa-spinner fa-pulse"></i>
                                </div>
                                <div v-else class="w-75">
                                    <p v-for="re in searchResult" class="border border-2 rounded-pill p-1 mt-1 mb-0 cursor-pointer text-dark"
                                       :class="re.id == selectedResult ? 'sign-sm' : ''" @click="selectedResult = re.id">
                                        @{{ re.text }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-success" @click="submitIntroduce()">引入</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>