import { StrUtil } from "@pura/harmony-utils";
import { AccountEntity } from "../entity/AccountEntity"

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

  build() {
    RelativeContainer() {
      Image(this.account?.avater).width(44).height(44).id('iv_avatar').borderRadius(25)

      Text(this.account?.name)
        .fontColor($r('app.color.color_90ffffff'))
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .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)
        .linearGradient({
          colors: [['#F62C6C', 0.0], ['#FC4F54', 1.0]],
          direction: GradientDirection.Right
        })
        .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(12)
        .alignRules({
          left: { anchor: 'tv_username', align: HorizontalAlign.Start },
          bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
        })

      Text(this.account?.create_time + ' 注册').fontColor($r('app.color.color_999999')).fontSize(12)
        .alignRules({
          right: { anchor: '__container__', align: HorizontalAlign.End },
          bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
        })
        .visibility(StrUtil.isNotEmpty(this.account?.create_time) ? Visibility.Visible : Visibility.None)

      Divider()
        .color($r('app.color.color_10ffffff'))
        .strokeWidth(1)
        .alignRules({
          top: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
        })
        .margin({ top: 18 })
        .id('divider')

      Row() {
        Text('账户绑定')
          .fontColor($r('app.color.color_50ffffff'))
          .fontSize(14)

        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)

        Text(this.getPrivacyPhone(this.account?.phone))
          .layoutWeight(1)
          .fontColor($r('app.color.color_50ffffff'))
          .fontSize(15)
          .textAlign(TextAlign.End)
      }
      .alignRules({
        top: { anchor: 'divider', align: VerticalAlign.Bottom }
      })
      .margin({ top: 14 })
    }
    .height('auto')
    .borderRadius(10)
    .backgroundColor($r('app.color.color_222222'))
    .padding({
      left: 16,
      top: 18,
      right: 16,
      bottom: 14
    })
  }

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