<div class="content-heading  justify-content-between">
  <div>微信公众号管理</div>
  <div class="float-right">
    <div class="btn-group mb-1 mr-1" dropdown>
      <button class="btn dropdown-toggle btn-secondary btn-lg" type="button" dropdownToggle>公众号管理
        <span class="caret"></span>
      </button>
      <div *dropdownMenu class="dropdown-menu modal-lg" role="menu">
        <a class="dropdown-item" href="#" (click)="showModal()">新增公众号</a>
        <div class="dropdown-divider"></div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xl-4 col-lg-4" *ngFor="let v of pager.getRecords();">
    <div class="card card-default">
      <div class="card-header">
        <div class="px-2 mr-2 float-right badge badge-success"
             *ngIf="currentWxId === v.wx_id ">已选择
        </div>
        <div class="card-title" (click)="showModal({entityUrl:'weixin/define/find.htm',  entityParam: {wx_id: v.wx_id}})">{{v.wx_name}}</div>
      </div>
      <div class="list-group-item list-group-item-action">
        <div class="media">
          <div class="align-self-start mr-2">
            <span class="fa-stack">
              <em class="fa fa-circle fa-stack-2x text-purple"></em>
              <em class=" fab fa-weixin fa-stack-1x fa-inverse text-white"></em>
            </span>
          </div>
          <div class="media-body text-truncate">
            <p class="mb-1">微信号码 / App ID
            </p>
            <p class="mb-1 text-sm">{{v.wx_code}} / {{v.app_id}}</p>
          </div>
          <div class="ml-auto">
            <small class="text-success ml-2" *ngIf="v.app_status === 'Active'">启用</small>
            <small class="text-muted ml-2" *ngIf="v.app_status !== 'Active'">停用</small>
          </div>
        </div>
      </div>

      <div class="list-group-item list-group-item-action">
        <div class="media">
          <div class="align-self-start mr-2">
            <span class="fa-stack">
              <em class="fa fa-circle fa-stack-2x text-primary"></em>
              <em class="fas fa-key fa-stack-1x fa-inverse text-white"></em>
            </span>
          </div>
          <div class="media-body text-truncate">
            <p class="mb-1">App Secrect Key
            </p>
            <p class="mb-1 text-sm">{{v.app_secrect}}</p>
          </div>
        </div>
      </div>

      <div class="list-group-item list-group-item-action">
        <div class="media">
          <div class="align-self-start mr-2">
            <span class="fa-stack" [tooltip]="v.app_jsapi">
              <em class="fa fa-circle fa-stack-2x {{checkTokenTime(v)}}"></em>
              <em class="fas fa-clock fa-stack-1x fa-inverse text-white"></em>
            </span>
          </div>
          <div class="media-body text-truncate">
            <p class="mb-1">App Token Expired
            </p>
            <p class="mb-1 text-sm"><span [tooltip]="v.app_accesstoken">{{v.app_token_expired}}</span></p>
          </div>
        </div>
      </div>
      <div class="list-group-item list-group-item-action">
        <div class="media">
          <div class="align-self-start mr-2">
            <span class="fa-stack">
              <em class="fa fa-circle fa-stack-2x "></em>
              <em class="fas fa-history fa-stack-1x fa-inverse text-white"></em>
            </span>
          </div>
          <div class="media-body text-truncate">
            <p class="mb-1">记录用户日志
            </p>
            <p class="mb-1 text-sm"><span  [innerHTML]="v.record_user_log | frameStatus"></span></p>
          </div>
        </div>
      </div>

      <div class="list-group-item list-group-item-action" *ngIf="v.app_qrcode">
        <div class="media">
          <img class="align-self-start mr-2 thumb32" [src]="v.app_qrcode">
          <div class="media-body text-truncate">
            <p class="mb-1">微信图标
            </p>
            <p class="mb-1 text-sm">{{v.app_qrcode}}</p>
          </div>
        </div>
      </div>

      <div class="card-footer text-center bt0">
        <button class="btn btn-primary" type="button" (click)="chooseWeixin(v)"  *ngIf="currentWxId !== v.wx_id">选择该微信</button>
        <button class="btn btn-danger ml-5" type="button" (click)="pager.optrRecord('weixin/define/delete.htm', v, {successMsg:'微信号被删除，关联数据都已经清理！', confirmMsg: '确定要删除该公众号吗？所有关联数据将被清除，如不想使用可把该公众号设置为禁用状态，谨慎使用删除业务！', successMsgType:'Swal'})" >删除该微信</button>
      </div>
    </div>

  </div>
</div>
<frame-pager [url]="'./weixin/define/page.htm'" #pager></frame-pager>


