import { DemoItem } from '../viewmodel/LocalBean';
import { WebParams } from '@ohos/common/src/main/ets/viewmodel/ParamBean';
import { AGREEMENT_URL, PRIVACY_URL } from '@ohos/common/src/main/ets/constants/AppConstants';
import { TitleBarComponent } from '../view/TitleBarComponent';

@Builder
export function AboutUsBuilder() {
  AboutUsLayout()
}

/**
 * 设置页面
 */
@Component
export struct AboutUsLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack() {
        Column() {
          //标题栏
          TitleBarComponent({titleName:'关于我们', isShowTitle:true, isShowBack:true})

          Column(){
            Image($r('app.media.ic_app_logo'))
              .width('100vp')
              .height('100vp')
              .margin({ top: 120 })
              .align(Alignment.Center)

            Column() {
              Row() {
                Text('用户协议')
                  .fontSize(16)
                  .fontColor('#FF1A1A1A')
                  .textAlign(TextAlign.Start)
                  .borderRadius(12)
                  .fontWeight(1)
                  .align(Alignment.Center)
                  .layoutWeight(1)

                Image($r('app.media.ic_mine_arrow_right')).width('14vp').height('14vp').margin({ left: 8})
              }
              .width('100%')
              .height('52vp')
              .padding({ left: 14, right: 14})
              .onClick(() => {
                // 跳转内置WebView（用户协议）
                const params: WebParams = {
                  id: 1001,
                  name: "用户协议",
                  type: 1,
                  url: AGREEMENT_URL
                };
                this.pageStack.pushPathByName("WebLayout", params);
              })

              Divider().height(0.5).backgroundColor('#4dd8d8d8').margin({ left: 14, right: 14})

              Row() {
                Text('隐私政策')
                  .fontSize(16)
                  .fontColor('#FF1A1A1A')
                  .textAlign(TextAlign.Start)
                  .borderRadius(12)
                  .fontWeight(1)
                  .align(Alignment.Center)
                  .layoutWeight(1)

                Image($r('app.media.ic_mine_arrow_right')).width('14vp').height('14vp').margin({ left: 8})
              }
              .width('100%')
              .height('52vp')
              .padding({ left: 14, right: 14})
              .onClick(() => {
                // 跳转内置WebView（隐私政策）
                const params: WebParams = {
                  id: 1001,
                  name: "隐私政策",
                  type: 1,
                  url: PRIVACY_URL
                };
                this.pageStack.pushPathByName("WebLayout", params);
              })
            }
            .backgroundColor(Color.White)
            .width('100%')
            .borderRadius(12)
            .margin({ top: 30})
            .padding({ top: 6, bottom: 6})
          }
          .padding({ left: 16, right: 16})
        }
        .width('100%')
        .height('100%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF9F9F9')
    }
    .hideTitleBar(true)
  }
}

/**
 * 账号 item
 */
@Component
export struct AccountItem {
  @State isChecked: boolean = false;
  onChange: (checked: boolean) => void = () => {};

  item: DemoItem | null = null;

  build() {
    Row() {
      Stack(){
        Image(this.item?.icon)
          .width('100%')
          .height('100%')
          .onClick(() => {
          })
      }
      .width('60vp')
      .height('60vp')
      .margin({ left: 11, right: 11, top: 16, bottom: 16})
      .alignContent(Alignment.Center)
      .backgroundColor('#FFF3F3F3')
      .borderRadius(8)

      Column(){
        Text(this.item?.name)
          .width('100%')
          .layoutWeight(1)
          .fontSize(16)
          .fontColor('#FF1A1A1A')
          .textAlign(TextAlign.Start)
          .borderRadius(12)
          .fontWeight(FontWeight.Medium)

        Text('ID:123456')
          .width('100%')
          .fontSize(12)
          .fontColor('#FF767676')
          .textAlign(TextAlign.Start)
          .borderRadius(12)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .layoutWeight(1)
      .margin({ top: 16, bottom: 16 })

      Image(this.isChecked ?
        $r('app.media.ic_tick_circle_selected') : // 选中的图片资源
        $r('app.media.ic_tick_circle_normal') // 未选中的图片资源
      )
        .width(20)
        .height(20)
        .margin({ right: 16 })
        .objectFit(ImageFit.Contain)
        .onClick(() => {
          this.isChecked = !this.isChecked;
          this.onChange(this.isChecked);
        })
        // 可选：添加点击时的缩放动画，增加反馈感
        .animation({ duration: 200, curve: Curve.EaseInOut })
    }
    .width('100%')
    .height('80vp')
    .backgroundColor('#FFFFFFFF')
    .borderRadius(8)
    .shadow({
      radius: 5,           // 阴影模糊半径（数值越大越模糊）
      color: '#4DE5E5E5',  // 阴影颜色（建议带透明度，如 10% 透明的黑色）
      offsetX: 0,          // X 轴偏移
      offsetY: 0           // Y 轴偏移（正数向下，负数向上）
    })
    .margin({ bottom: 16 })
  }
}

