<!-- start 面包屑 -->
<nz-breadcrumb>
    <nz-breadcrumb-item>
        优惠包管理
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
        编辑优惠券包
    </nz-breadcrumb-item>
</nz-breadcrumb>

<div class="inner-content">
    <div class="main">
        <nz-steps [nzCurrent]="current">
            <nz-step nzTitle="配置基本信息"></nz-step>
            <nz-step nzTitle="配置优惠券"></nz-step>
        </nz-steps>
        <form style="margin-top: 30px;" *ngIf="current === 0" nz-form [formGroup]="validateForm">
            <div nz-row>
                <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" nzRequired>优惠券包标题</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请输入优惠券包标题">
                            <input nz-input type="text" formControlName="title" placeholder="请输入优惠券包标题标题" />
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" >使用归属</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请选择使用归属">
                            <nz-select formControlName="usingAttribution" nzAllowClear nzPlaceHolder="选择使用归属类型">
                                <nz-option *ngFor="let item  of usingAttribution" [nzValue]="item.codeValue" nzLabel="{{item.codeName}}"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" nzRequired>优惠券包类型</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请选择优惠券包类型">
                            <nz-select nzShowSearch nzAllowClear formControlName="salesType" nzPlaceHolder="请选择优惠券包类型">
                                <nz-option nzLabel="售卖" [nzValue]="1"></nz-option>
                                <nz-option nzLabel="赠送" [nzValue]="2"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="24" *ngIf="validateForm.value['salesType'] === 1">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" nzRequired>售卖价格</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请输入售卖价格">
                            <nz-input-group nzSuffix="RMB" nzPrefix="￥">
                                <input type="text" formControlName="price" placeholder="请输入售卖价格" nz-input />
                            </nz-input-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="24" *ngIf="validateForm.value['salesType'] === 1">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" nzRequired>限购数量</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请输入限购数量">
                            <nz-input-number formControlName="purchaseNum"  [nzMin]="1" [nzMax]="99" [nzStep]="1"></nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label  [nzSpan]="3"  >列表展示图</nz-form-label>
                        <nz-form-control [nzSpan]="8">
                            <nz-upload
                                    nzAction="{{POST_URL}}/fileUpload/uploadfile"
                                    nzListType="picture-card"
                                    [(nzFileList)]="listImg"
                                    [nzShowButton]="listImg.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 [nzSpan]="3" >轮播展示图</nz-form-label>
                        <nz-form-control [nzSpan]="8">
                            <nz-upload
                                    nzAction="{{POST_URL}}/fileUpload/uploadfile"
                                    nzListType="picture-card"
                                    [nzMultiple]="true"
                                    [(nzFileList)]="bannerImg"
                                    [nzShowButton]="bannerImg.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]="24">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="3" >详情展示图</nz-form-label>
                        <nz-form-control [nzSpan]="8">
                            <nz-upload
                                    nzAction="{{POST_URL}}/fileUpload/uploadfile"
                                    nzListType="picture-card"
                                    [(nzFileList)]="detailsImg"
                                    [nzMultiple]="true"
                                    [nzShowButton]="detailsImg.length < 5"
                                    [nzPreview]="handlePreview"
                            >
                                <i nz-icon nzType="plus"></i>
                                <div class="ant-upload-text">上传图片</div>
                            </nz-upload>
                            <nz-modal [nzVisible]="previewVisible" [nzContent]="modal" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
                                <ng-template #modal>
                                    <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                                </ng-template>
                            </nz-modal>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>

        <div  style="margin-top: 60px;" *ngIf="current === 1">
            <span>共计 {{11}} 条数据</span>
            <div class="operating-button">
                <button nz-button nzType="primary" class="right-btn" (click)="getAdd()" ><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
            </div>
            <nz-table #basicTable [nzData]="listOfData">
                <thead>
                <tr>
                    <th>优惠券名称</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td>{{ data.discountName }}</td>
                    <td>{{ data.num }}</td>
                    <td>
                        <a (click)="deleteActivateAward(data.id)">删除</a>
                    </td>
                </tr>
                </tbody>
            </nz-table>

        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24" class="search-area">
                <button nz-button *ngIf="current == 1" [nzType]="'primary'" (click)="pre()">上一步</button>
                <button nz-button [nzType]="'primary'" (click)="getNest()">{{current == 0 ? '下一步': '提交'}}</button>
            </div>
        </div>
    </div>
</div>



<nz-modal [(nzVisible)]="isVisible" nzTitle="配置优惠券" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    <div class="title">基本信息</div>
    <form nz-form [formGroup]="validateFormAward" class="login-form">
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzRequired>代理商</nz-form-label>
            <nz-form-control [nzSpan]="16"  nzErrorTip="请选择代理商">
                <nz-select  nzShowSearch nzAllowClear formControlName="agentId" (ngModelChange)="getDiscountPackageByList($event)" nzPlaceHolder="请选择代理商">
                    <nz-option *ngFor="let item of agentData" nzLabel="{{item.agentName}}" nzValue="{{item.id}}"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzRequired>优惠券</nz-form-label>
            <nz-form-control [nzSpan]="16"  nzErrorTip="请选择优惠券">
                <nz-select formControlName="discountId"  nzAllowClear nzPlaceHolder="请选择优惠券">
                    <nz-option *ngFor="let item of discountList" nzLabel="{{item['highDiscount'].discountName}}" nzValue="{{item['highDiscount'].id}}"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzRequired>数量</nz-form-label>
            <nz-form-control [nzSpan]="16" nzErrorTip="请输入数量">
                <input nz-input type="number" formControlName="num" placeholder="请输入数量" />
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-modal>
