<div class="row mt-3">
    <label for="operation_type" class="col-2">操作类型</label>
    <select id="operation_type" :class="errors.operation_type ? 'is-invalid' : ''" v-model="model.operation.operation_type"  class="col-3 form-control">
        <option value="入库">入库</option>
        <option value="出库">出库</option>
    </select>
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.operation_type">
        <strong>@{{ errors.operation_type[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label for="strategy" class="col-2">计费策略</label>
    <select id="strategy" :class="errors.strategy ? 'is-invalid' : ''" class="col-3 form-control" v-model="model.operation.strategy">
        <option value="默认">默认</option>
        <option value="特征">特征</option>
    </select>
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.strategy">
        <strong>@{{ errors.strategy[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label class="col-2">名称</label>
    <input type="text" :class="errors.name ? 'is-invalid' : ''" class="col-6 form-control" v-model="model.operation.name">
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.name">
        <strong>@{{ errors.name[0] }}</strong>
    </span>
</div>
<div class="row mt-3" v-if="model.operation.operation_type == '入库'">
    <label class="col-2" for="isRejected">是退货</label>
    <input content="col-3" id="isRejected" type="checkbox" class="switch" v-model="model.operation.isRejected">
</div>
<div class="row mt-3" v-if="model.operation.strategy == '特征'">
    <label class="col-2">特征</label>
    <label class="col-8">
        <label v-if="model.operation.feature">@{{ model.operation.featureFormat }}</label><br>
        <label v-if="errors.feature" class="text-danger small font-weight-bold">@{{ errors.feature[0] }}</label><br>
        <button type="button" class="btn btn-dark w-75 ml-2" @click="showAddFeatureModal(-1,model.operation.feature)">调整特征</button>
    </label>
</div>
<div class="row mt-3">
    <label class="col-2" for="isDiscount">是否满减</label>
    <div class="col-2">
        <input type="checkbox" id="isDiscount" class="rounded mt-1" v-model="model.operation.isDiscount" @change="onDiscount(model.operation.isDiscount)">
    </div>
    <div class="col-8 row" v-if="model.operation.isDiscount">
        <div class="col-1 cursor-pointer"><span class="fa fa-plus" @click="addDiscount(model.operation.discount_count)"></span></div>
        <label class="col-2" for="discount">满减阈值</label>
        <input id="discount" v-model="model.operation.discount_count[0]" :class="errors['discount_count_0'] ? 'is-invalid' : ''"
               class="form-control form-control-sm col-6" step="1" type="number" min="0">
    </div>
</div>
<div class="row mt-1" v-for="(value,i) in model.operation.discount_count" v-if="model.operation.isDiscount && i!=0">
    <label class="col-2"></label><div class="col-2"></div>
    <div class="col-8 row">
        <label class="offset-1 col-2">满减阈值@{{ i+1 }}</label>
        <input v-model="model.operation.discount_count[i]" :placeholder="Number(model.operation.discount_count[i-1])+1"
               :class="errors['discount_count_'+i] ? 'is-invalid' : ''"
               class="form-control form-control-sm col-6" step="1" type="number" :min="Number(model.operation.discount_count[i-1])+1">
        <div class="col-1 cursor-pointer text-danger font-weight-bold h4" @click="delDiscount(i)">&times;</div>
    </div>
</div>
<div class="row mt-3">
    <label class="col-2" for="isSingle">按单计价</label>
    <div class="col-2">
        <input type="checkbox" id="isSingle" class="pull-left rounded mt-1" v-model="model.operation.isSingle">
    </div>
    <div class="col-6 row" v-if="model.operation.isSingle">
        <label class="col-3" for="total_price">普通价</label>
        <input id="total_price" v-model="model.operation.total_price"
               class="form-control form-control-sm col-6" :class="errors.total_price ? 'is-invalid' : ''" step="0.01" type="number" min="0">
    </div>
</div>
<div class="row mt-1" v-if="model.operation.isSingle && model.operation.isDiscount" v-for="(value,i) in model.operation.discount_count">
    <label class="col-2"></label><div class="col-2"></div>
    <div class="col-6 row">
        <label class="col-3" for="total_discount_price">满减价</label>
        <input id="total_discount_price" v-model="model.operation.total_discount_price[i]"
               class="form-control form-control-sm col-5" :class="errors.total_discount_price ? 'is-invalid' : ''" step="0.01" type="number" min="0">
        <label class="col-4 text-secondary">@{{ value ? (model.operation.discount_count[i+1] ? value+'-'+(model.operation.discount_count[i+1]-1)+' 单' : value+'+ 单') : '' }}</label>
    </div>
</div>
<div class="row mt-3">
    <label class="col-2" for="max_fee">封顶费</label>
    <input type="number" id="max_fee" step="0.01" min="0" class="form-control col-6" v-model="model.operation.max_fee">
</div>
<div class="row mt-3" v-if="!model.operation.isSingle">
    <div class="btn-group offset-1 col-9 mb-1">
        <button type="button" class="btn btn-outline-dark" @click="addOperationItem('起步')">新增起步</button>
        <button type="button" class="btn btn-outline-info" @click="addOperationItem('默认')">新增默认</button>
        <button type="button" class="btn btn-outline-secondary" @click="addOperationItem('特征')">新增特征</button>
    </div>
    <div v-for="(item,i) in model.operation.items" class="card row text-white offset-1 col-9" :class="item.strategy=='特征' ? 'bg-secondary' : (item.strategy=='默认' ? 'bg-info' : 'bg-dark')">
        <div class="card-header" style="max-height: 50px">
            <div class="row">
                <div class="col-6 offset-3 text-center">
                    @{{ item.strategy }}
                </div>
                <div class="col-3">
                    <div class="pull-right cursor-pointer text-white" @click="delOperationItem(i)"><small>删除</small>&nbsp;<span class="fa fa-window-close-o"></span></div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row mt-2" v-if="item.strategy!='起步'">
                <label class="col-3">数量</label>
                <label class="col-6 mb-0"><input type="number" step="1" min="0" :class="errors['items.'+i+'.amount'] ? 'is-invalid' : ''" v-model="item.amount" class="form-control"></label>
            </div>
            <div class="row" v-if="item.strategy=='起步'">
                <label class="col-3">
                    <select class="form-control mt-1" v-model="model.operation.items[0].type">
                        <option value="0">起步数</option>
                        <option value="1">起步费</option>
                    </select>
                </label>
                <label class="col-6 mb-0">
                    <input id="amount" type="number" :class="errors['items.0.amount'] ? 'is-invalid' : ''" v-if="model.operation.items[0].type == 0"
                           v-model="model.operation.items[0].amount" class="form-control" step="1">
                    <input v-else type="number" min="0" step="0.01" class="form-control" v-model="model.operation.items[0].unit_price"
                           :class="errors['items.0.unit_price'] ? 'is-invalid' : ''">
                </label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.amount']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3"><span v-if="item.strategy=='起步'">起步数</span><span v-else>数量</span>为必填项</small></div>
            </div>
            <div class="row mt-2" v-if="item.strategy!='起步' || (item.strategy=='起步' && item.type==0)">
                <label class="col-3">单位</label>
                <label class="col-3 mb-0"><select v-model="item.unit_id" class="form-control" :class="errors['items.'+i+'.unit_id'] ? 'is-invalid' : ''">
                    <option v-for="unit in pool.units" :value="unit.id" v-if="unit.name=='件' || unit.name=='箱'">@{{ unit.name }}</option>
                </select></label>
                <label class="col-2 text-right" v-if="poolMapping.units[item.unit_id]=='箱'">零头价</label>
                <label class="col-3 mb-0" v-if="poolMapping.units[item.unit_id]=='箱'">
                    <input class="form-control" :class="errors['items.'+i+'.odd_price'] ? 'is-invalid' : ''" v-model="item.odd_price" type="number" step="0.01" min="0">
                </label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.unit_id']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单位为必选项</small></div>
            </div>
            <div class="row mt-2" v-if="item.strategy!='起步' || (item.strategy=='起步' && item.type==0)">
                <label class="col-3"><span v-if="item.strategy=='起步'">起步费</span><span v-else>单价</span></label>
                <label class="col-6 mb-0 input-group">
                    <input type="number" min="0" step="0.01" class="form-control" v-model="item.unit_price"
                       :class="errors['items.'+i+'.unit_price'] ? 'is-invalid' : ''">
                    <span class="d-block input-group-append">
                          <span class="input-group-text">元</span>
                    </span>
                </label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.unit_price']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3"><span v-if="item.strategy=='起步'">起步费</span><span v-else>单价</span>为必填项</small></div>
            </div>
            <div class="row mt-2" v-if="model.operation.isDiscount" v-for="(value,i) in model.operation.discount_count">
                <label class="col-3">满减<span v-if="item.strategy=='起步'">起步费</span><span v-else>价</span>@{{ i>0 ? i : '' }}</label>
                <label class="col-6 mb-0 input-group">
                    <input type="number" min="0" step="0.01" class="form-control" v-model="item.discount_price[i]"
                       :class="errors['items.'+i+'.discount_price'] ? 'is-invalid' : ''">
                    <span class="d-block input-group-append">
                          <span class="input-group-text">元</span>
                    </span>
                </label>
                <label class="col-4">@{{ value ? (model.operation.discount_count[i+1] ? value+'-'+(model.operation.discount_count[i+1]-1)+' 单' : value+'+ 单') : '' }}</label>
            </div>
            <div class="row mt-2" v-if="item.strategy=='特征'">
                <label class="col-3">特征：</label>
                <label class="col-8">
                    <label v-if="errors['items.'+i+'.feature']" class="text-danger">@{{ errors['items.'+i+'.feature'][0] }}</label>
                    <label v-if="item.feature">@{{ item.featureFormat }}</label><br>
                    <button type="button" class="btn w-75 btn-dark ml-2" @click="showAddFeatureModal(i)">调整特征</button>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3" v-if="model.operation.operation_type=='出库'">
    <label for="surcharge" class="col-2">耗材附加费</label>
    <input id="surcharge" type="number" step="0.01" min="0" class="form-control col-3" :class="errors.surcharge ? 'is-invalid' : ''" v-model="model.operation.surcharge">
    <label for="surcharge_unit_id" class="col-2 text-right">单位</label>
    <select id="surcharge_unit_id" v-model="model.operation.surcharge_unit_id" class="form-control col-2" :class="errors.surcharge_unit_id ? 'is-invalid' : ''">
        <option> </option>
        <option v-for="unit in pool.units" :value="unit.id" v-if="unit.name=='件' || unit.name=='单'">@{{ unit.name }}</option>
    </select>
</div>
<div class="row mt-3">
    <label for="remark" class="col-2">备注</label>
    <textarea id="remark" class="col-6 form-control" v-model="model.operation.remark"></textarea>
</div>
<div class="row mt-3">
    <label for="tax_rate_id" class="col-2 text-muted">税率</label>
    <select id="tax_rate_id" class="col-3 form-control" v-model="model.operation.tax_rate_id" :class="errors.tax_rate_id ? 'is-invalid' : ''">
        <option> </option>
        <option v-for="tax in pool.taxRates" :value="tax.id">@{{ tax.value }}%</option>
    </select>
</div>