import { StrUtil } from "@pura/harmony-utils";
import { AccountEntity } from "../entity/AccountEntity"
import { LoginManager } from "../manager/LoginGlobalManager";
import { ConfigManager } from "../manager/UserConfigManager";

@ComponentV2
export struct AccountItemView {
  @Param account?: AccountEntity = new AccountEntity();

  getPrivacyPhone(phone?: string): string {
    if (StrUtil.isNotEmpty(phone)) {
      const start = phone?.substring(0, 3);
      const end = phone?.substring(7);
      return start + '****' + end;
    }
    return '';
  }

  build() {
    RelativeContainer() {
      Image(StrUtil.isNotEmpty(this.account?.avater) ? this.account?.avater : $r('app.media.ic_default_avatar')).width(50).height(50).id('iv_avatar').borderRadius(25)

      Text(this.account?.name)
        .fontColor($r('app.color.color_1a1a1a'))
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .alignRules({
          left: { anchor: 'iv_avatar', align: HorizontalAlign.End },
          top: { anchor: 'iv_avatar', align: VerticalAlign.Top }
        })
        .margin({ left: 12 })
        .id('tv_username')

      Text(this.account?.vip_type === 3 ? '终身会员' : this.account?.vip_name)
        .height(16)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .fontSize(10)
        .backgroundColor($r('app.color.color_466afd'))
        .borderRadius(3)
        .padding({
          left: 3,
          right: 3
        })
        .margin({ left: 6 })
        .alignRules({
          left: { anchor: 'tv_username', align: HorizontalAlign.End },
          top: { anchor: 'tv_username', align: VerticalAlign.Top },
          bottom: { anchor: 'tv_username', align: VerticalAlign.Bottom }
        })
        .visibility(this.account?.vip_type !== 1 ? Visibility.Visible : Visibility.None)

      Text('ID：' + this.account?.user_id).fontColor($r('app.color.color_999999')).fontSize(14)
        .alignRules({
          left: { anchor: 'tv_username', align: HorizontalAlign.Start },
          bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
        })
        .id('tv_user_id')

      Row(){
        if (this.account?.user_id === LoginManager.getUserInfo()?.user_id) {
          Blank().width(4).height(4).backgroundColor('#FF8340').borderRadius(2)
          Text('当前账号').fontColor('#FF8340').fontSize(14).margin({left: 4})
        } else {
          Text('切换').fontColor($r('app.color.color_999999')).fontSize(14)
          Image($r('app.media.ic_change_account')).width(16).height(16).margin({left: 4})
        }
      }
      .alignRules({
        top: { anchor: 'tv_username', align: VerticalAlign.Top },
        end: { anchor: '__container__', align: HorizontalAlign.End},
        bottom: { anchor: 'tv_username', align: VerticalAlign.Bottom }
      })

      Row() {
        Image($r('app.media.ic_bind_phone')).width(20).height(20).margin({ left: 10 })
          .visibility(this.account?.bind.includes('phone') ? Visibility.Visible : Visibility.None)

        Image($r('app.media.ic_bind_wx')).width(20).height(20).margin({ left: 10 })
          .visibility(this.account?.bind.includes('weixin') ? Visibility.Visible : Visibility.None)
      }
      .alignRules({
        top: { anchor: 'tv_user_id', align: VerticalAlign.Top },
        end: { anchor: '__container__', align: HorizontalAlign.End},
        bottom: { anchor: 'tv_user_id', align: VerticalAlign.Bottom }
      })
    }
    .height('auto')
    .borderRadius(10)
    .backgroundColor(Color.White)
    .padding({
      left: 12,
      top: 16,
      right: 12,
      bottom: 16
    })
  }
}