<!-- start 面包屑 -->
<nz-breadcrumb>
    <nz-breadcrumb-item>
        <a (click)="getBack()">卡券管理</a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
        编辑卡券
    </nz-breadcrumb-item>
</nz-breadcrumb>
<!-- end 面包屑 -->

<nz-content class="inner-content">
    <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'discountName'" nzRequired>优惠券名称</nz-form-label>
                    <nz-form-control nzErrorTip="请输入优惠券名称!">
                        <input nz-input placeholder="请输入优惠券名称..."  [formControlName]="'discountName'" id="'discountName'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'discountType'"  nzRequired>优惠券类型</nz-form-label>
                    <nz-form-control  nzErrorTip="请选择优惠券类型!">
                        <nz-select nzPlaceHolder="请选择优惠券类型"  [formControlName]="'discountType'">
                            <nz-option nzValue="1" nzLabel="满减"></nz-option>
                            <nz-option nzValue="2" nzLabel="抵扣"></nz-option>
                            <nz-option nzValue="3" nzLabel="折扣"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'usingScope'"  nzRequired>优惠券使用范围</nz-form-label>
                    <nz-form-control  nzErrorTip="请选择优惠券使用范围!">
                        <nz-select formControlName="useScope" nzAllowClear nzPlaceHolder="请选择优惠券使用范围">
                            <nz-option *ngFor="let item  of usingScope" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'usingRange'"  >优惠券使用归属</nz-form-label>
                    <nz-form-control  nzErrorTip="请选择优惠券使用范围!">
                        <nz-select formControlName="usingRange" nzAllowClear nzPlaceHolder="请选择优惠券使用范围">
                            <nz-option *ngFor="let item  of usingRange" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8" *ngIf="validateForm.value.discountType === '1'">
                <nz-form-item>
                    <nz-form-label [nzFor]="'discountCondition'" nzRequired>满减条件价格</nz-form-label>
                    <nz-form-control nzErrorTip="请输入满减条件价格!">
                        <input nz-input [type]="'number'" placeholder="请输入满减条件价格..."  [formControlName]="'discountCondition'" id="'discountCondition'" />
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'discountPrice'" nzRequired>{{validateForm.value.discountType === '3' ? '折扣' : '抵扣价格'}}</nz-form-label>
                    <nz-form-control nzErrorTip="{{validateForm.value.discountType === '3' ? '请输入折扣' : '请输入抵扣价格'}}">
                        <input nz-input [type]="'number'" placeholder="{{validateForm.value.discountType === '3' ? '请输入折扣...' : '请输入抵扣价格...'}}"  [formControlName]="'discountPrice'" id="'discountPrice'" />
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'salesEndTime'" nzRequired>使用截止日期</nz-form-label>
                    <nz-form-control>
                        <nz-date-picker
                                nzFormat="yyyy-MM-dd"
                                [formControlName]="'salesEndTime'"
                        ></nz-date-picker>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'effectiveDay'" nzRequired>领取有效天数</nz-form-label>
                    <nz-form-control nzErrorTip="请输入领取有效天数!">
                        <nz-input-number [formControlName]="'effectiveDay'" [nzMin]="1" [nzStep]="1"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'effectiveDay'" nzRequired>可领取次数</nz-form-label>
                    <nz-form-control nzErrorTip="请输入可领取次数!">
                        <nz-input-number [formControlName]="'receiveNumber'" [nzMin]="0" [nzStep]="1" [nzMax]="999"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label nzRequired>优惠券图片</nz-form-label>
                    <nz-form-control>
                        <nz-upload
                                nzAction="{{WEB_SERVE_URL}}/fileUpload/uploadfile"
                                nzListType="picture-card"
                                [(nzFileList)]="discountImg"
                                [nzShowButton]="discountImg.length < 1"
                                [nzPreview]="handlePreview"
                        >
                            <i nz-icon nzType="plus"></i>
                            <div class="ant-upload-text">上传图片</div>
                        </nz-upload>
                        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
                            <ng-template #modalContent>
                                <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                            </ng-template>
                        </nz-modal>
                    </nz-form-control>
                </nz-form-item>
            </div>



        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24" class="search-area">
                <button nz-button (click)="resetForm()">重置</button>
                <button nz-button [nzType]="'primary'" (click)="getSave()">提交</button>
            </div>
        </div>
    </form>

</nz-content>
