<!-- 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]="'couponName'" nzRequired>卡券名称</nz-form-label>
                    <nz-form-control nzErrorTip="请输入卡券名称!">
                        <input nz-input placeholder="请输入卡券名称..."  [formControlName]="'couponName'" id="'couponName'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>

                    <nz-form-label [nzFor]="'couponType'"  nzRequired>卡券类型</nz-form-label>
                    <nz-form-control  nzErrorTip="请选择卡券类型!">
                        <nz-select nzPlaceHolder="请选择卡券类型"  [formControlName]="'couponType'">
                            <nz-option nzValue="1" nzLabel="内部卷"></nz-option>
                            <nz-option nzValue="2" nzLabel="外部卷"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'couponPrice'" nzRequired>卡券面值</nz-form-label>
                    <nz-form-control nzErrorTip="请输入卡券面值!">
                        <input nz-input placeholder="请输入卡券面值..."  [formControlName]="'couponPrice'" id="'couponPrice'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'salesPrice'" nzRequired>销售价格</nz-form-label>
                    <nz-form-control nzErrorTip="请输入销售价格!">
                        <input nz-input placeholder="请输入销售价格..."  [formControlName]="'salesPrice'" id="'salesPrice'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'salesCount'" nzRequired>销售数量</nz-form-label>
                    <nz-form-control nzErrorTip="请输入销售数量!">
                        <input nz-input placeholder="请输入销售数量 ..."  [formControlName]="'salesCount'" id="'salesCount'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'limitNumber'" nzRequired>限购数量</nz-form-label>
                    <nz-form-control nzErrorTip="请输入限购数量!">
                        <input nz-input placeholder="请输入限购数量 ..."  [formControlName]="'limitNumber'" id="'limitNumber'" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'merchantId'" nzRequired>选择商户</nz-form-label>
                    <nz-form-control nzErrorTip="请选择商户!">
                        <nz-select
                                (nzScrollToBottom)="loadMore()"
                                (nzOnSearch)="search($event)"
                                nzShowSearch
                                [formControlName]="'merchantId'"
                                nzServerSearch
                                nzPlaceHolder="请选择商户"
                                nzAllowClear
                                [nzDropdownRender]="renderTemplate"
                        >
                            <nz-option *ngFor="let o of optionList" [nzValue]="o.id" [nzLabel]="o.merchantName"></nz-option>
                        </nz-select>
                        <ng-template #renderTemplate>
                            <nz-spin *ngIf="isLoading"></nz-spin>
                        </ng-template>
                    </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 nzErrorTip="请选择销售截止日期!">
                        <nz-date-picker
                                nzShowTime
                                nzFormat="yyyy-MM-dd HH:mm:ss"
                                [formControlName]="'salesEndTime'"
                        ></nz-date-picker>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'recycleDay'" nzRequired>归库天数</nz-form-label>
                    <nz-form-control nzErrorTip="请输入归库天数!">
                        <nz-input-number [formControlName]="'recycleDay'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzFor]="'isPresent'" nzRequired>是否赠送卡券</nz-form-label>
                    <nz-form-control nzErrorTip="请选择是否赠送卡券!">
                        <nz-switch [formControlName]="'isPresent'" ></nz-switch>
                    </nz-form-control>
                </nz-form-item>
            </div>


            <div nz-col [nzSpan]="8" *ngIf="validateForm.value.isPresent">
                <nz-form-item>
                    <nz-form-label [nzFor]="'handselCouponList'" nzRequired>选择卡券</nz-form-label>
                    <nz-form-control nzErrorTip="请选择卡券!">
                        <nz-select
                                [formControlName]="'handselCouponList'"
                                (nzScrollToBottom)="loadMoreCoupon()"
                                (nzOnSearch)="searchCoupon($event)"
                                nzShowSearch
                                nzServerSearch
                                nzPlaceHolder="请选择卡券"
                                nzAllowClear
                                [nzDropdownRender]="renderTemplateCoupon"
                        >
                            <nz-option *ngFor="let o of optionListCoupon" [nzValue]="o.id" [nzLabel]="o.merchantName"></nz-option>
                        </nz-select>
                        <ng-template #renderTemplateCoupon>
                            <nz-spin *ngIf="isLoading"></nz-spin>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="24">
                <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)]="couponImg"
                                [nzShowButton]="couponImg.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 nz-col [nzSpan]="24">
                <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)]="couponCarouselImg"
                                [nzShowButton]="couponCarouselImg.length < 5"
                                [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 nz-col [nzSpan]="20">
                <nz-form-item>
                    <nz-form-label nzRequired>卡券介紹</nz-form-label>
                    <nz-form-control>
                        <app-richtext [content]='content' (newTextEvent)="textData($event)"></app-richtext>
                    </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>