<!-- 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" nzRequired>抽奖资格</nz-form-label>
                        <nz-form-control [nzSpan]="8" nzErrorTip="请选择有抽奖资格的产品">
                            <nz-select
                                    nzMode="multiple"
                                    nzShowSearch
                                    formControlName="productIdArray"
                                    nzPlaceHolder="请选择有抽奖资格的产品"
                            >
                                <nz-option *ngFor="let item of listOfOption" [nzLabel]="item['couponName']" [nzValue]="item['id']"></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="type" nzPlaceHolder="请选择活动类型">
                                <nz-option nzLabel="大转盘" nzValue="1"></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-range-picker [nzShowTime]="true"  formControlName="time"></nz-range-picker>
                        </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="请输入活动内容">
                            <textarea rows="6" nz-input formControlName="content" placeholder="请输入活动内容" ></textarea>
                        </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>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td>{{ data.name }}</td>
                    <td>{{ data.num }}</td>
                    <td>
                        <img class="head_img" src="{{FILE_URL + data.img}}" onerror="this.src='../../../../assets/admin/navigation/icon.png'" alt="">
                    </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 [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="请输入奖励名称">
                <input nz-input type="text" formControlName="name" placeholder="请输入奖励名称" />
            </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>
        <nz-form-item>
            <nz-form-label [nzSpan]="6"  nzRequired>奖励图片</nz-form-label>
            <nz-form-control  [nzSpan]="16">
                <nz-upload
                        nzAction="{{POST_URL}}/fileUpload/uploadfile"
                        nzListType="picture-card"
                        [(nzFileList)]="logoFile"
                        [nzShowButton]="logoFile.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>
    </form>
    <div class="title" >奖品信息</div>
    <div nz-row *ngFor="let control of listOfControl; let i = index">
        <div nz-col class="gutter-row" [nzSpan]="20">
            <div nz-col class="gutter-row" [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzRequired>代理商</nz-form-label>
                    <nz-form-control [nzSpan]="16"  nzErrorTip="请选择代理商">
                        <nz-select *ngIf="control.isEdit" nzShowSearch nzAllowClear [(ngModel)]="control.agentId" (ngModelChange)="getDiscount($event , i)" nzPlaceHolder="请选择代理商状态">
                            <nz-option *ngFor="let item of agentData" nzLabel="{{item.agentName}}" nzValue="{{item.id}}"></nz-option>
                        </nz-select>
                        <span *ngIf="!control.isEdit">{{control.agentName}}</span>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzRequired>优惠券</nz-form-label>
                    <nz-form-control [nzSpan]="16"  nzErrorTip="请选择优惠券">
                        <nz-select *ngIf="control.isEdit" nzShowSearch nzAllowClear [(ngModel)]="control.prizeId" (ngModelChange)="getDiscountName($event , i)"  nzPlaceHolder="请选择优惠券">
                            <nz-option *ngFor="let item of discountList" nzLabel="{{item['highDiscount'].discountName}}" nzValue="{{item['highDiscount'].id}}"></nz-option>
                        </nz-select>
                        <span *ngIf="!control.isEdit">{{control.prizeName}}</span>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzRequired>奖励数量</nz-form-label>
                    <nz-form-control [nzSpan]="16" nzErrorTip="请输入奖励数量">
                        <input nz-input type="number"  *ngIf="control.isEdit" [(ngModel)]="control.prizeNum" placeholder="请输入奖励数量" />
                        <span *ngIf="!control.isEdit">{{control.prizeNum}}</span>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="4">
            <button nz-button nzType="default" (click)="removeField(i , $event)"><i nz-icon nzType="delete" nzTheme="outline"></i>删除</button>
            <br/>
            <button class="btn" *ngIf="control.isEdit" nz-button nzType="primary" (click)="addField(i)"><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
        </div>
    </div>
</nz-modal>
