{extend name="common/layout" /}
{block name="title"}个人信息{/block}
{block name="css"}
<style>
.aa-wrap[data-adminavatar-plugin="1"] .aa-preview-box{margin-top:2px}
.aa-wrap .aa-avatar-preview{
  width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid #dee2e6;background:#f8f9fa;
}
.aa-wrap .aa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aa-wrap .aa-actions .btn{margin:0}
.aa-wrap .aa-tip{margin:10px 0 0;color:#999;font-size:12px;line-height:1.5}
.aa-wrap .aa-divider{
  margin:8px 0 22px;border:0;border-top:1px solid rgba(0,0,0,.06);
}
.aa-wrap #aa-file{display:none!important}
body.admin-iframe[data-theme='dark'] .aa-wrap .aa-avatar-preview,
body.admin-iframe[data-theme='color_4'] .aa-wrap .aa-avatar-preview,
body.admin-iframe[data-theme='color_5'] .aa-wrap .aa-avatar-preview,
body.admin-iframe[data-theme='color_6'] .aa-wrap .aa-avatar-preview,
body.admin-iframe[data-theme='translucent'] .aa-wrap .aa-avatar-preview{
  border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);
}
body.admin-iframe[data-theme='dark'] .aa-wrap .aa-divider,
body.admin-iframe[data-theme='color_4'] .aa-wrap .aa-divider,
body.admin-iframe[data-theme='color_5'] .aa-wrap .aa-divider,
body.admin-iframe[data-theme='color_6'] .aa-wrap .aa-divider,
body.admin-iframe[data-theme='translucent'] .aa-wrap .aa-divider{
  border-top-color:rgba(255,255,255,.08);
}
</style>
{/block}
{block name="content"}
<div class="row aa-wrap" data-adminavatar-plugin="1">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <div class="site-form">
          <div class="form-group">
            <label>当前头像</label>
            <div class="aa-preview-box">
              <img id="aa-preview" class="aa-avatar-preview"
                   src="{$row.avatar|default='/static/admin/images/users/avatar.jpg'}"
                   alt="头像"
                   onerror="this.onerror=null;this.src='/static/admin/images/users/avatar.jpg';">
            </div>
          </div>
          <div class="form-group">
            <label>头像地址</label>
            <input type="text" class="form-control" id="aa-url"
                   value="{$row.avatar|default='/static/admin/images/users/avatar.jpg'}"
                   placeholder="上传后自动填入，也可粘贴图片地址">
          </div>
          <div class="form-group">
            <div class="aa-actions">
              <label class="btn btn-primary mb-0" for="aa-file" style="cursor:pointer;">
                <i class="mdi mdi-upload"></i> 上传头像
              </label>
              <input type="file" id="aa-file" accept="image/jpeg,image/png,image/gif,image/webp">
              <button type="button" class="btn btn-primary" id="aa-save">保存头像</button>
              <button type="button" class="btn btn-default" id="aa-reset">恢复默认</button>
            </div>
            <p class="aa-tip">支持 jpg / png / gif / webp，最大 2 MB</p>
          </div>
        </div>

        <hr class="aa-divider">

        <form id="profile-form" method="post" class="site-form">
          <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" value="{$row.username}" disabled>
          </div>
          <div class="form-group">
            <label>昵称</label>
            <input type="text" class="form-control" name="nickname" value="{$row.nickname}" placeholder="输入您的昵称">
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" name="email" value="{$row.email}" placeholder="请输入正确的邮箱地址">
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </form>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
(function () {
  var DEFAULT_AVATAR = '/static/admin/images/users/avatar.jpg';
  var uploadUrl = "{:url('/admin/adminavatar/upload')}";
  var saveUrl = "{:url('/admin/adminavatar/save')}";
  var $preview = $('#aa-preview');
  var $url = $('#aa-url');
  var $file = $('#aa-file');

  function setPreview(u) {
    $preview.attr('src', $.trim(String(u || '')) || DEFAULT_AVATAR);
  }
  function syncTopbar(u) {
    try {
      u = $.trim(String(u || ''));
      if (!u || !window.parent || !window.parent.$) return;
      window.parent.$('.topbar-profile-avatar').attr('src', u);
    } catch (e) {}
  }

  $url.on('input', function () { setPreview($(this).val()); });
  $('#aa-reset').on('click', function () {
    $url.val(DEFAULT_AVATAR);
    setPreview(DEFAULT_AVATAR);
  });
  $file.on('change', function () {
    var file = this.files && this.files[0];
    this.value = '';
    if (!file) return;
    var fd = new FormData();
    fd.append('avatar', file);
    var $btn = $('label[for="aa-file"]').addClass('disabled').css('pointer-events', 'none');
    $.ajax({
      url: uploadUrl, type: 'POST', data: fd,
      processData: false, contentType: false, dataType: 'json'
    }).done(function (res) {
      AdminUI.result(res);
      if (res && res.code === 1 && res.data && res.data.url) {
        $url.val(res.data.url);
        setPreview(res.data.url);
        syncTopbar(res.data.url);
      }
    }).fail(function () {
      AdminUI.error('上传失败，请稍后重试');
    }).always(function () {
      $btn.removeClass('disabled').css('pointer-events', '');
    });
  });
  $('#aa-save').on('click', function () {
    var u = $.trim($url.val() || '');
    if (!u) { AdminUI.error('请先上传或填写头像地址'); return; }
    $.post(saveUrl, {avatar: u}, function (res) {
      AdminUI.result(res);
      if (res && res.code === 1 && res.data && res.data.url) {
        setPreview(res.data.url);
        syncTopbar(res.data.url);
      }
    }, 'json');
  });

  $('#profile-form').on('submit', function (e) {
    e.preventDefault();
    $.post("{:url('/admin/profile/save')}", $(this).serialize(), function (res) {
      AdminUI.result(res);
    }, 'json');
  });
})();
</script>
{/block}