<div class="modal-header">
  <h4 class="modal-title pull-left">发送模版消息</h4>
</div>
<div class="modal-body">
  <tabset class="bg-white p-0" justified="true">
    <tab>
      <ng-template tabHeading><em
        class="fab fa-cc-visa fa-fw"></em> 模版明细
      </ng-template>
      <div class="card card-default">
        <div class="card-body">
          <div class="form-group row">
            <label class="col-lg-2 col-form-label text-lg-right">模版名称</label>
            <div class="col-lg-10 col-md-10">
              <ngx-select [items]="ResponseArray" [(ngModel)]="currentEntity.template_id"
                          (ngModelChange)="changeTemplate()"
                          optionValueField="template_id" optionTextField="template_name"></ngx-select>
            </div>
          </div>
          <ng-container *ngIf="wxTemplate">
            <div class="form-group row">
              <label class="col-lg-2 col-form-label text-lg-right">模版抬头</label>
              <div class="col-lg-4 col-md-4">
                <input class="form-control" type="text" [(ngModel)]="wxTemplate.title_note" [readonly]="true"/>
              </div>
              <label class="col-lg-2 col-form-label text-lg-right">消息链接</label>
              <div class="col-lg-4 col-md-4">
                <input class="form-control" type="text" [(ngModel)]="wxTemplate.template_url" maxlength="64"/>
              </div>
            </div>


            <div class="form-group row">
              <label class="col-lg-2 col-form-label text-lg-right" [style.color]="wxTemplate.content_color">主题颜色</label>
              <div class="col-lg-4 col-md-4">
                <input class="form-control" type="text" [readOnly]="true" [(colorPicker)]="wxTemplate.content_color"
                       [value]="wxTemplate.content_color=== undefined?'':wxTemplate.content_color"
                       [cpCancelButton]="true"
                       [cpHeight]="'310px'"/>
              </div>
              <label class="col-lg-2 col-form-label text-lg-right">主题内容</label>
              <div class="col-lg-4 col-md-4">
                <textarea class="form-control" type="text" rows="3" [(ngModel)]="wxTemplate.content_value"></textarea>
              </div>
            </div>

            <ng-container *ngFor="let v of (5 | numberArray)">
              <div class="form-group row" *ngIf="wxTemplate['keyword' + v + '_note']">
                <label class="col-lg-2 col-form-label text-lg-right"
                       [style.color]="wxTemplate['keyword' + v + '_color']">关键字{{v}}
                  颜色</label>
                <div class="col-lg-4 col-md-4">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <div class="input-group-text"
                           [style.color]="wxTemplate['keyword' + v + '_color']">{{wxTemplate['keyword' + v + '_note']}}</div>
                    </div>
                    <input class="form-control" type="text" [readOnly]="true"
                           [(colorPicker)]="wxTemplate['keyword' + v + '_color']"
                           [value]="wxTemplate['keyword' + v + '_color']=== undefined?'':wxTemplate['keyword' + v + '_color']"
                           [cpCancelButton]="true" [cpHeight]="'310px'"/>
                  </div>
                </div>
                <label class="col-lg-2 col-form-label text-lg-right">关键字{{v}}内容</label>
                <div class="col-lg-4 col-md-4">
        <textarea class="form-control" type="text" rows="2"
                  [(ngModel)]="wxTemplate['keyword' + v + '_value']"></textarea>
                </div>
              </div>
            </ng-container>


            <div class="form-group row">
              <label class="col-lg-2 col-form-label text-lg-right" [style.color]="wxTemplate.remark_color">备注颜色</label>
              <div class="col-lg-4 col-md-4">

                <input class="form-control" type="text" [readOnly]="true" [(colorPicker)]="wxTemplate['remark_color']"
                       [value]="wxTemplate['remark_color']===undefined?'':wxTemplate['remark_color']"
                       [cpCancelButton]="true" [cpHeight]="'310px'"/>
              </div>
              <label class="col-lg-2 col-form-label text-lg-right">备注内容</label>
              <div class="col-lg-4 col-md-4">
                <textarea class="form-control" type="text" rows="2" [(ngModel)]="wxTemplate.remark_value"></textarea>
              </div>
            </div>
          </ng-container>
        </div>

      </div>
    </tab>
    <tab *ngIf="wxTemplate">
      <ng-template tabHeading><em
        class="fab fa-cc-visa fa-fw"></em> 发送目标
      </ng-template>

      <div class="form-group row">
        <label class="col-lg-12 col-form-label text-lg-right">查找用户SQL（防注入）</label>
        <div class="col-lg-12 col-md-12">
          <textarea class="form-control text-1-6" type="text" rows="8" [(ngModel)]="currentEntity.execute_sql"></textarea>
        </div>
      </div>
    </tab>
    <tab *ngIf="ResponseMap && ResponseMap.UserArray && ResponseMap.UserArray.length>0">
      <ng-template tabHeading><em
        class="fab fa-cc-visa fa-fw"></em> 用户实列
      </ng-template>
      <div class="form-group row">
        <label class="col-lg-12 col-form-label text-lg-right">用户详细信息</label>
        <div class="col-lg-12 col-md-12">
          <textarea class="form-control" type="text" rows="8" [readOnly]="true">
            {{this.currentEntity.json_value}}
          </textarea>
        </div>
      </div>
    </tab>
  </tabset>
</div>

<div class="modal-footer">
  <button class="btn btn-primary" type="button" *ngIf="wxTemplate" (click)="serachWxUser() && currentEntity.test_flag!=='Active'" >查找目标用户<span  *ngIf="ResponseMap && ResponseMap.UserArray && ResponseMap.UserArray.length>0">({{ResponseMap?.UserTotal}})</span>
  </button>
  <button class="btn btn-primary" type="button ml-2" (click)="goSendTest()" *ngIf="currentEntity.test_flag!=='Active' && ResponseMap && ResponseMap.UserArray && ResponseMap.UserArray.length>0">发送测试
  </button>

  <button class="btn btn-primary" type="button ml-2" (click)="confirmMsg(true)" *ngIf="currentEntity.test_flag==='Active'">收到测试消息，确认消息正确
  </button>
  <button class="btn btn-danger" type="button ml-2" (click)="confirmMsg(false)" *ngIf="currentEntity.test_flag==='Active'">未收到消息，或者消息错误
  </button>

  <button class="btn btn-danger" type="button ml-2" *ngIf="currentEntity.confirm_flag === 'Active'" (click)="sendAll()">发送【{{ResponseMap?.UserTotal}}】个目标用户
  </button>
  <button class="btn btn-secondary ml-2" type="button" (click)="closeWindow()">取消操作</button>
</div>
