<!-- start 面包屑 -->
<app-breadcrumb></app-breadcrumb>
<!-- end 面包屑 -->
<!--条件搜索-->
<nz-spin [nzSpinning]="loadingObject.spinning" nzTip="{{loadingObject.msg}}" >
  <div class="inner-content">
    <form nz-form [formGroup]="searchForm" [nzLayout]="'vertical'">
      <div nz-row [nzGutter]="24">

        <div nz-col [nzSpan]="24">
          <nz-form-item>
            <nz-form-label>交易创建时间</nz-form-label>
            <nz-form-control>
              <nz-range-picker formControlName="createTimeArray" nzShowTime [nzAllowClear]="false" [nzFormat]="'yyyy/MM/dd HH:mm:ss'"></nz-range-picker>
              <nz-radio-group nzButtonStyle="solid" formControlName="createTimeSelect" (ngModelChange)="createTimeInit()">
                <label nz-radio-button *ngFor="let item of dateTypeSelect" nzValue="{{item.value}}">{{item.name}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6">
          <nz-form-item>
            <nz-form-label>商户交易单号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="outTradeNo" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6">
          <nz-form-item>
            <nz-form-label>账户端交易单号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="accTradeNo" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6">
          <nz-form-item>
            <nz-form-label>支付方式</nz-form-label>
            <nz-form-control>
              <nz-select nzAllowClear formControlName="payMode">
                <nz-option nzLabel="微信" nzValue="WECHAT"></nz-option>
                <nz-option nzLabel="支付宝" nzValue="ALIPAY"></nz-option>
                <nz-option nzLabel="银联" nzValue="UQRCODEPAY"></nz-option>
                <nz-option nzLabel="龙支付" nzValue="DRAGON"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6">
          <nz-form-item>
            <nz-form-label>交易状态</nz-form-label>
            <nz-form-control>
              <nz-select nzAllowClear formControlName="status">
                <nz-option nzLabel="待支付" nzValue="1"></nz-option>
                <nz-option nzLabel="支付中" nzValue="2"></nz-option>
                <nz-option nzLabel="支付成功" nzValue="3"></nz-option>
                <nz-option nzLabel="支付失败" nzValue="4"></nz-option>
                <nz-option nzLabel="已取消" nzValue="5"></nz-option>
                <nz-option nzLabel="已退款" nzValue="6"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row [nzGutter]="24" *ngIf="isCollapse">

        <div nz-col nzSpan="6" *ngIf="userObjectType !== 5">
          <nz-form-item>
            <nz-form-label>商户号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="merNo" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6" *ngIf="userObjectType !== 5">
          <nz-form-item>
            <nz-form-label>商户名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="merName" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6" *ngIf="userObjectType !== 5">
          <nz-form-item>
            <nz-form-label>商户简称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="merAbbreviate" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="6" *ngIf="userObjectType !== 5">
          <nz-form-item>
            <nz-form-label>门店名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="storeName" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row>
        <div nz-col nzSpan="24" class="search-button">
          <button nz-button nzType="primary" (click)="search(searchForm.value)">搜索</button>
          <button nz-button nzType="default" (click)="resetForm()">重置</button>
          <button nz-button nzType="primary" (click)="exportTradeOrder()">导出交易</button>
          <a class="collapse" (click)="toggleCollapse()">更多条件
            <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
          </a>
        </div>
      </div>
    </form>
  </div>

  <div class="inner-content">
    <div class="csp-statistic">
      <div class="csp-statistic-title">
        <span>交易笔数：</span>
        <span class="csp-text-primary" style="margin-right: 50px;">{{totalData.totalCount}}笔</span>
        <span>交易金额：</span>
        <span class="csp-text-primary" style="margin-right: 50px;">{{totalData.totalPrice}}元</span>
      </div>
    </div>
    <!--数组表格 -->
    <nz-table #basicTable
              [nzData]="dataObject.list"
              [nzTotal]="dataObject.total"
              [nzFrontPagination]="false"
              [nzShowTotal]="totalTemplate"
              [nzLoading]="tableLoading"
              [nzPageIndex]="whereObject.pageNum"
              (nzPageIndexChange)="requestData($event)"
              [nzScroll]="{ x: '1150px'}">
      <thead>
      <tr>
        <th nzWidth="180px">商户号</th>
        <th nzWidth="150px">商户名称</th>
        <th nzWidth="150px">商户简称</th>
        <th nzWidth="150px">门店名称</th>
        <th nzWidth="270px">商户交易单号</th>
        <th nzWidth="270px">账户端交易单号</th>
        <th nzWidth="100px">交易方式</th>
        <th nzWidth="100px">交易金额</th>
        <th nzWidth="100px">门店优惠</th>
        <th nzWidth="130px">优惠券优惠</th>
        <th nzWidth="100px">实付金额</th>
        <th nzWidth="100px">交易状态</th>
        <th nzWidth="90px">创建方式</th>
        <th nzWidth="160px">创建时间</th>
        <th nzWidth="160px">交易时间</th>
        <th nzWidth="160px">入账商户号</th>
        <th nzWidth="100px">特殊字符</th>
        <th nzWidth="100px">业务员</th>
        <th nzWidth="150px" nzRight="0px">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data;let i = index">
        <td>{{data.merNo}}</td>
        <td>{{data.merName}}</td>
        <td>{{data.merAbbreviate}}</td>
        <td>{{data.storeName?data.storeName:'无'}}</td>
        <td>{{data.outTradeNo}}</td>
        <td>{{data.accTradeNo}}</td>
        <td>{{data.payMode | payMode}}</td>
        <td>￥{{data.tradeAmount}}</td>
        <td>￥{{data.storeDiscountActualPrice?data.storeDiscountActualPrice:0}}</td>
        <td>￥{{data.userDiscountActualPrice?data.userDiscountActualPrice:0}}</td>
        <td>￥{{data.tradeActualAmount?data.tradeActualAmount:0}}</td>
        <td>{{data.status | tradeOrderStatus}}</td>
        <td>{{data.createType | createType}}</td>
        <td>{{data.createTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{data.payTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{data.platformMerNo}}</td>
        <td>{{data.specialField}}</td>
        <td>{{data.salesmanName}}</td>
        <td nzRight="0px" class="table-td-operation">
          <a [routerLink]="['/admin/trade-order/trade-order-detail']" [queryParams]="{outTradeNo: data.outTradeNo}">详情</a>
          <a nz-dropdown [nzDropdownMenu]="menu">其他操作  <i nz-icon nzType="down"></i> </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li *ngIf="userObjectType === 5 && data.status == 3" nz-menu-item ><a (click)="showOrderRefundConfirm(data.outTradeNo, data.tradeActualAmount)">退款</a></li>
              <li *ngIf="userObjectType !== 5" nz-menu-item nzDisabled>暂无操作</li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
      </tbody>
      <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
    </nz-table>
  </div>
</nz-spin>
