<nav title="编辑信息"></nav>
<ion-content class="content">
  <div class="row portrait">
    <div>头像</div>
    @if (formData.avatar) {
    <app-upload
      (onChange)="saveEdit($event)"
      #upload
      [maxlenght]="1"
      [files]="[{ url: formData.avatar }]"
      [fileWidth]="80"
      [fileHeight]="80"
      [boxWidth]="100"
    ></app-upload>
    }
  </div>
  <ion-list>
    <ion-item>
      <div class="row">
        <div>昵称</div>
        <div class="right">
          <ion-input
            placeholder="请输入昵称"
            value="{{ formData.nickname }}"
            (ionChange)="onChange($event, 'nickname')"
          ></ion-input>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>真实姓名</div>
        <div class="right">
          <ion-input
            placeholder="待认证"
            value="{{ formData.name }}"
            [disabled]="true"
          ></ion-input>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <ion-select
        label="性别"
        (ionChange)="onChange($event, 'sex')"
        interface="popover"
        placeholder="{{ formData.sex }}"
        [disabled]="true"
        class="row"
      >
        <ion-select-option value="男">男</ion-select-option>
        <ion-select-option value="女">女</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>年龄</div>
        <div class="right">
          <ion-input
            placeholder="请输入年龄"
            value="{{ formData.age }}"
            (ionChange)="onChange($event, 'age')"
          ></ion-input>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>个性签名</div>
        <div class="right">
          <ion-input
            placeholder="请填写签名"
            value="{{ formData.remark }}"
            (ionChange)="onChange($event, 'remark')"
          ></ion-input>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>社交标签</div>
        <div class="right tags">
          @if (getTag.length > 0) { @for (tag of getTag; track $index) {
          <span class="tag"
            >{{ tag.val }}<ion-icon class="close" name="close"></ion-icon
          ></span>
          }
          <ion-icon class="add" name="add" (click)="onChangeTag()"></ion-icon>
          }@else {
          <span (click)="onChangeTag()">点击选择</span>
          }
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>手机号</div>
        <div class="right">
          <ion-input
            placeholder="待认证"
            value="{{ mobile }}"
            [disabled]="true"
          ></ion-input>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div>所在地</div>
        <div class="right">
          <div class="val" (click)="isOpen = true">
            {{ address ? address : "点击选择所在地" }}
          </div>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="row">
        <div class="tabs-left">
          在线隐身<img class="vip" src="img/VIP.png" alt="" />
        </div>
        <div class="checked">
          <ion-toggle
            [disabled]="!vip?.rights?.invisible"
            [checked]="profile?.get('auditing')"
            (ionChange)="formData.auditing = !formData.auditing"
            color="tertiary"
          ></ion-toggle>
        </div>
      </div>
    </ion-item>
  </ion-list>
  <button class="submit" (click)="upload.onUpload()">保存修改</button>
</ion-content>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  backdropDismiss="false"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="cancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="cancel('confirm')">确定</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column
        [value]="province"
        (ionChange)="onIonChange($event, 'province')"
      >
        @for (item of provinceColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
      <ion-picker-column
        [value]="city"
        (ionChange)="onIonChange($event, 'city')"
      >
        @for (item of cityColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>
<ion-modal
  #modal
  trigger="open-modal2"
  [isOpen]="isOpenTag"
  (didDismiss)="isOpenTag = false"
  [initialBreakpoint]="1"
  [breakpoints]="[0, 0.5, 1]"
>
  <ng-template>
    <div class="tag-modal">
      <div class="list">
        @for (item of tags; track $index) {
        <div
          (click)="onCheck($index)"
          [ngClass]="{ active: item.check, li: true }"
        >
          {{ item.val }}
        </div>
        }
      </div>
    </div>
  </ng-template>
</ion-modal>
