<!-- start 面包屑 -->
<app-breadcrumb></app-breadcrumb>
<!-- end 面包屑 -->

<nz-spin nzTip="{{spinObject.title}}" [nzSpinning]="spinObject.status">
    <!--条件搜索-->
    <div class="inner-content">
        <form nz-form [formGroup]="searchForm" (ngSubmit)="getRequest(true , searchForm.value)">
            <div nz-row>
                <div nz-col nzSpan="8">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">优惠券包名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="title"/>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">类型</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <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 nzSpan="8">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">使用归属</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <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 nzSpan="8">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">优惠券包状态</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select nzShowSearch nzAllowClear formControlName="status" nzPlaceHolder="请选择优惠券包状态">
                                <nz-option nzLabel="上架中" nzValue="1"></nz-option>
                                <nz-option nzLabel="下架中" nzValue="2"></nz-option>
                                <nz-option nzLabel="编辑中" nzValue="3"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>

            </div>

            <div nz-row>
                <div nz-col nzSpan="24" class="search-button">
                    <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>搜索</button>
                    <button nz-button nzType="default" (click)="resetForm()"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
                </div>
            </div>
        </form>
    </div>

    <div class="inner-content">
        <span>共计 {{total}} 条数据</span>
        <div class="operating-button">
            <button nz-button nzType="primary" class="right-btn" [routerLink]="['/admin/discount-package/discount-package-edit']" ><i nz-icon nzType="plus" nzTheme="outline"></i>添加</button>
        </div>
        <nz-table
                class="table"
                #ajaxTable
                nzShowSizeChanger
                [nzFrontPagination]="false"
                [nzData]="requestData"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="pageNum"
                [(nzPageSize)]="pageSize"
                [nzScroll]="{ x: '1200px' }"
                (nzPageIndexChange)="getRequest(false , searchForm.value)"
                (nzPageSizeChange)="getRequest(false , searchForm.value)">
            <thead nzSingleSort>
            <tr>
                <th nzWidth="50px">编号</th>
                <th nzWidth="150px">优惠券标题</th>
                <th nzWidth="70px">销售类型</th>
                <th nzWidth="70px">销售价格</th>
                <th nzWidth="70px">限购数量</th>
                <th nzWidth="100px">创建时间</th>
                <th nzWidth="70px" nzRight>总库存</th>
                <th nzWidth="70px" nzRight>剩余库存</th>
                <th nzWidth="70px" nzRight>状态</th>
                <th nzWidth="100px" nzRight>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of ajaxTable.data; let i = index">
                <td>{{i+1}}</td>
                <td>{{data.title}}</td>
                <td>{{data.salesType === 1 ? '售卖' : '赠送'}}</td>
                <td>{{data.price === null ?  '暂无':  data.price}}</td>
                <td>{{data.purchaseNum === null?  '暂无':  data.purchaseNum}}</td>
                <td>{{data.createdTime | date: 'yyyy-MM-dd HH:mm'}}</td>
                <td nzRight>{{data.totalStock == null ? 0:data.totalStock }}</td>
                <td nzRight>{{data.surplusStock == null ? 0:data.surplusStock }}</td>
                <td nzRight>{{data.status | discountPackageStatus}}</td>
                <td nzRight class="table-td-operation">
                    <a (click)="getDetails(data.id)">详情</a>
                    <nz-divider nzType="vertical" ></nz-divider>
                    <a nz-dropdown [nzDropdownMenu]="menu">更多</a>
                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu nzSelectable>
                            <li class="li-a" *ngIf="data.status == 2 || data.status == 3"  nz-menu-item><a (click)="getEdit(data.id)">编辑</a></li>
                            <li class="li-a" nz-menu-item><a (click)="addInventory(data.id)" >增加库存</a></li>
                            <li class="li-a" *ngIf="data.status == 2 || data.status == 3" nz-menu-item><a (click)="upDiscountPackage(data.id)" >上架</a></li>
                            <li class="li-a" *ngIf="data.status == 1" nz-menu-item><a (click)="downDiscountPackage(data.id)">下架</a></li>
                            <li class="li-a" *ngIf="data.status == 2 || data.status == 3" nz-menu-item><a (click)="deleteDiscountPackage(data.id)">删除</a></li>
                            <li class="li-a" *ngIf="data.status == 1" nz-menu-item><a (click)="showDeliverUserModal(data.id, data.title)">赠送用户</a></li>
                        </ul>
                    </nz-dropdown-menu>
                </td>
            </tbody>
        </nz-table>
    </div>
</nz-spin>

<nz-modal [(nzVisible)]="isVisible" nzTitle="优惠券包规则内容" (nzOnCancel)="handleCancel()" (nzOnOk)="handleCancel()">
    <nz-table #basicTable [nzData]="listOfData">
        <thead>
        <tr>
            <th>优惠券名称</th>
            <th>数量</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data">
            <td>{{ data.discountName }}</td>
            <td>{{ data.num }}</td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>

<nz-modal [(nzVisible)]="isVisibleInventory" nzTitle="增加库存" (nzOnCancel)="handleCancelInventory()" (nzOnOk)="handleOkdInventory()">
    <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired>数量</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入数量">
            <input nz-input type="number" [(ngModel)]="num" placeholder="请输入数量" />
        </nz-form-control>
    </nz-form-item>
</nz-modal>

<nz-modal [(nzVisible)]="deliverUserModal" nzTitle="赠送【{{deliverUserForm.controls.packageName.value}}】卷包-用户配置" (nzOnCancel)="closeDeliverUserModal()" [nzFooter]="null" nzWidth="1000px">
        <form nz-form [formGroup]="deliverUserSearchForm" class="ant-advanced-search-form">
    <!--        <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>手机号</nz-form-label>
                        <nz-form-control>
                            <input nz-input formControlName="phone" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>注册状态</nz-form-label>
                        <nz-form-control>
                            <nz-select ngModel="lucy" formControlName="registerStatus">
                                <nz-option nzValue="true" nzLabel="已注册"></nz-option>
                                <nz-option nzValue="false" nzLabel="未注册"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>数据状态</nz-form-label>
                        <nz-form-control>
                            <nz-select ngModel="lucy" formControlName="errorStatus">
                                <nz-option nzValue="true" nzLabel="有误"></nz-option>
                                <nz-option nzValue="false" nzLabel="正常"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="24" class="search-area">
                    <button nz-button [nzType]="'primary'">搜索</button>
                    <button nz-button (click)="resetForm()">重置</button>
                </div>
            </div>-->
            <div nz-row>
                <div nz-col [nzSpan]="24" style="text-align: right">
                    <button nz-button [nzType]="'primary'" (click)="showDeliverUserAddModal()">添加用户</button>
                    <button nz-button [nzType]="'primary'" (click)="downloadTemp()">下载excel模板</button>
                    <button nz-button [nzType]="'primary'" (click)="showExcelUserModal()">excel导入</button>
                </div>
            </div>
        </form>
        <span nz-typography nzType="danger">注意：提交赠送时系统会自动过滤 ”有误“ 和 ”重复“ 的数据，有误的数据不会赠送卷包。</span><br>
        <span nz-typography >共计 {{deliverUserArray.length}} 条数据</span>
        <nz-table #deliverUserTable [nzData]="deliverUserArray" [nzFrontPagination]="true">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户手机号</th>
                <th>注册状态</th>
                <th>数据状态</th>
                <th>错误描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of deliverUserTable.data" style="{{data.errorStatus?'color: #aa1111':''}}">
                <td>{{data.serialNum}}</td>
                <td>{{data.phone}}</td>
                <td>{{data.registerStatus?'已注册':'未注册'}}</td>
                <td>{{data.errorStatus?'有误':'正常'}}</td>
                <td>{{data.errorMsg?data.errorMsg:'无'}}</td>
                <td>
                    <a nz-popconfirm nzPopconfirmTitle="确定删除此数据吗?" (nzOnConfirm)="delDeliverUser(data.serialNum)">删除</a>
                </td>
            </tr>
            </tbody>
        </nz-table>
        <div nz-row>
            <div nz-col [nzSpan]="24" style="text-align: center;margin-top: 10px;">
                <button nz-button [nzType]="'primary'" style="width: 200px;" (click)="submitDeliverUser()">提交</button>
            </div>
        </div>
</nz-modal>

<nz-modal [(nzVisible)]="deliverUserAddModal" nzTitle="添加用户" (nzOnCancel)="closeDeliverUserAddModal()" [nzFooter]="null" nzWidth="450">
    <form nz-form [formGroup]="deliverUserAddForm" class="ant-advanced-search-form">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label nzRequired>用户手机号</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="phone" placeholder="请输入需要赠送的用户手机号" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24" style="text-align: center">
                <button nz-button style="width: 150px;" (click)="submitDeliverUserAdd()" [nzType]="'primary'">确定</button>
            </div>
        </div>
    </form>
</nz-modal>

<nz-modal [(nzVisible)]="excelUserModal" nzTitle="导入用户" (nzOnCancel)="closeExcelUserModal()" [nzFooter]="null" nzWidth="450">
    <nz-spin nzTip="{{spinObject.title}}" [nzSpinning]="spinObject.status">
        <span *ngIf="deliverUserArray.length > 0" nz-typography nzType="danger">注意：导入用户会清空现有列表中的数据。 </span>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label nzRequired>excel文件</nz-form-label>
                    <nz-form-control>
                        <nz-upload
                                [nzAccept]="'.xls,.xlsx'"
                                [(nzFileList)]="excelUploadFile"
                                nzAction="{{BASE_URL}}/fileUpload/uploadfile"
                                [nzHeaders]="{ authorization: 'authorization-text' }"
                                (nzChange)="excelUserHandleChange($event)"
                        >
                            <button nz-button><i nz-icon nzType="upload"></i>{{excelUploadBtn?'上传文件':'重新上传'}}</button>
                        </nz-upload>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24" style="text-align: center">
                <button nz-button style="width: 150px;" (click)="submitExcelUser()" [nzType]="'primary'">确定</button>
            </div>
        </div>
    </nz-spin>
</nz-modal>
