import AppConstants from "../../app/AppConstant"
import { RuanseeAbilityStag } from "../../app/RuanseeAbilityStag"
import { HMRouterMgr } from "@hadss/hmrouter"
import { ToastUtil } from "@pura/harmony-utils/src/main/ets/action/ToastUtil"
import { FileUtil } from "@pura/harmony-utils"
import { FileUtils } from "../../util/FileUtils"
import { fileUri } from "@kit.CoreFileKit"
import { downLoadUserPhoto } from "../../request/Api"
import { AxiosError, AxiosResponse } from "@ohos/axios"
import { common } from "@kit.AbilityKit"
import { H5OperationType, WebAppPageParam } from "../../model/uiModel/WebAppPageParam"

/**
 * 主页组件
 */
@Preview({
  title: 'ContentTable'
})
@Component
export struct MyFragment {
  @State userPhoto: string | Resource = $r('app.media.icon_police_woman')
   context = getContext(this) as  common.UIAbilityContext;

  aboutToAppear(): void {
    this.getImage()
    this.context.eventHub.on("updateUserPhoto",()=>{
      this.userPhoto = fileUri.getUriFromPath(FileUtils.IMAGE_DIR + '/' + RuanseeAbilityStag.userCache.getProfilePhoto)
    })
  }

  aboutToDisappear(): void {
    this.context.eventHub.off("updateUserPhoto")
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      this.underlyingBackground()
      this.mainContent()
    }
    .width(AppConstants.PERCENTAGE_MAX)
    .height(AppConstants.PERCENTAGE_MAX)
    .backgroundColor($r('app.color.page_background'))

  }

  getImage() {
    if (FileUtil.accessSync(FileUtils.IMAGE_DIR + '/' + RuanseeAbilityStag.userCache.getProfilePhoto)) {
      this.userPhoto = fileUri.getUriFromPath(FileUtils.IMAGE_DIR + '/' + RuanseeAbilityStag.userCache.getProfilePhoto)
      return
    }
    downLoadUserPhoto(FileUtils.IMAGE_DIR + '/' + RuanseeAbilityStag.userCache.getProfilePhoto)
      .then((res:AxiosResponse)=>{
        console.info("result:"+ JSON.stringify(res.data));
        if(res.status == 200){
          this.userPhoto = fileUri.getUriFromPath(FileUtils.IMAGE_DIR + '/' + RuanseeAbilityStag.userCache.getProfilePhoto)
        }
      })
      .catch((error:AxiosError)=> {
        console.error("error:" + JSON.stringify(error));
      })
  }

  skipMyUserInfo() {
    HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "MyUserInfoPage" })
  }

  /**
   * 主内容
   */
  @Builder
  mainContent() {
    Column() {
      Stack({ alignContent: Alignment.Top }) {
        Column() {
          Row() {
            //警号
            Row() {
              Text("NO·")
                .fontColor($r('app.color.white'))
                .fontSize($r('app.float.text_size_6'))
                .backgroundColor($r('app.color.bull'))
                .borderRadius(50)// 50是宽高的一半
                .padding(3)
                .border({ radius: $r('app.float.default_50') })

              Text(RuanseeAbilityStag.userCache.getUserCode)
                .fontSize($r('app.float.text_size_14'))
                .fontColor($r('app.color.colorBluen6'))
                .margin({ left: $r('app.float.default_5') })

            }
            .alignItems(VerticalAlign.Center)
            .padding({
              left: $r('app.float.default_5'),
              right: $r('app.float.default_5'),
              top: $r('app.float.default_3'),
              bottom: $r('app.float.default_3')
            })
            .width('auto')
            .height('auto')
            .backgroundColor("#E9F4F3")
            .border({ radius: $r('app.float.default_50') })

            Blank()
              .layoutWeight(1)

            //修改图标
            Image($r('app.media.icon_edit_info'))
              .width($r('app.float.default_22'))
              .height($r('app.float.default_22'))
              .onClick(() => {
                this.skipMyUserInfo()
              })

          }
          .width(AppConstants.PERCENTAGE_MAX)
          .padding({ left: $r('app.float.default_10'), right: $r('app.float.default_10') })
          .alignItems(VerticalAlign.Center)
          .margin({ top: $r('app.float.default_10') })
          .height($r('app.float.default_40'))
          .onClick(() => {
            this.skipMyUserInfo()
          })

          Text(`姓名：${RuanseeAbilityStag.userCache.getUserName}`)
            .fontColor($r('app.color.white'))
            .fontSize($r('app.float.text_size_16'))
            .margin({
              left: $r('app.float.default_10'),
              right: $r('app.float.default_10'),
              top: $r('app.float.default_15')
            })

          Text(`工作号码：${RuanseeAbilityStag.userCache.getWorkPhone}`)
            .fontColor($r('app.color.white'))
            .fontSize($r('app.float.text_size_16'))
            .margin({
              left: $r('app.float.default_10'),
              right: $r('app.float.default_10'),
              top: $r('app.float.default_10')
            })

          Text(`单位：${RuanseeAbilityStag.userCache.getDeptName}`)
            .fontColor($r('app.color.white'))
            .fontSize($r('app.float.text_size_16'))
            .margin({
              left: $r('app.float.default_10'),
              right: $r('app.float.default_10'),
              top: $r('app.float.default_10')
            })


        }
        .alignItems(HorizontalAlign.Start)
        .width(AppConstants.PERCENTAGE_MAX)
        .margin({
          top: $r('app.float.default_80')
        })
        .border({ radius: $r('app.float.default_10') })
        .borderRadius($r('app.float.default_10'))
        .backgroundImageSize(ImageSize.FILL)
        .height($r('app.float.default_160'))
        .backgroundImagePosition(Alignment.Center) // 居中显示背景图
        .backgroundImage($r('app.media.icon_my_userbg'))
        .onClick(() => {
          this.skipMyUserInfo()
        })

        Column() {
          Column() {
            Image(this.userPhoto)
              .width($r('app.float.default_88'))
              .height($r('app.float.default_88'))
              .borderRadius(50)// 50是宽高的一半
              .clip(true)// 裁剪超出圆角部分
              .aspectRatio(1) // 确保宽高比例一致
          }
          .width($r('app.float.default_90'))
          .height($r('app.float.default_90'))
          .backgroundColor("#55e5e5e5")
          .margin({ top: $r('app.float.default_48') })
          .onClick(() => {
            this.skipMyUserInfo()
          })
          .border({
            width: $r('app.float.default_2'),
            radius: $r('app.float.default_50'),
            color: "#66e5e5e5"
          })

        }
        .width(AppConstants.PERCENTAGE_MAX)
      }
      .padding({
        left: $r('app.float.default_30'),
        right: $r('app.float.default_30')
      })
      .width(AppConstants.PERCENTAGE_MAX)
      .height('auto')

      Column() {
        Row() {
          Column() {
            Image($r('app.media.icon_operation_guide'))
              .width($r('app.float.default_32'))
              .height($r('app.float.default_32'))

            Text("应用指南")
              .fontSize($r('app.float.text_size_12'))
              .fontColor($r('app.color.colorGrey8'))
              .textAlign(TextAlign.Center)
              .margin({ top: $r('app.float.default_8') })

          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .padding({ top: $r('app.float.default_10'), bottom: $r('app.float.default_10') })
          .height('auto')
          .layoutWeight(1)
          .onClick(() => {
            HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "ApplicationGuidePage" })
          })

          Column() {
            Image($r('app.media.icon_feedback'))
              .width($r('app.float.default_32'))
              .height($r('app.float.default_32'))

            Text("意见建议")
              .fontSize($r('app.float.text_size_12'))
              .fontColor($r('app.color.colorGrey8'))
              .textAlign(TextAlign.Center)
              .margin({ top: $r('app.float.default_8') })

          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .padding({ top: $r('app.float.default_10'), bottom: $r('app.float.default_10') })
          .height('auto')
          .layoutWeight(1)
          .onClick(() => {
            HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "OpinionsSuggestionsPages" })
          })

          Column() {
            Image($r('app.media.icon_problen'))
              .width($r('app.float.default_32'))
              .height($r('app.float.default_32'))

            Text("常见问题")
              .fontSize($r('app.float.text_size_12'))
              .fontColor($r('app.color.colorGrey8'))
              .textAlign(TextAlign.Center)
              .margin({ top: $r('app.float.default_8') })

          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .padding({ top: $r('app.float.default_10'), bottom: $r('app.float.default_10') })
          .height('auto')
          .layoutWeight(1)
          .onClick(() => {
            HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "FrequentlyQuestionsPage" })
          })

        }
        .width(AppConstants.PERCENTAGE_MAX)
        .height('auto')
        .margin({ top: $r('app.float.default_10') })

        Blank()
          .backgroundColor($r('app.color.colorGrey2'))
          .width(AppConstants.PERCENTAGE_MAX)
          .height($r('app.float.default_10'))
          .margin({ top: $r('app.float.default_10') })

        Row() {
          Image($r('app.media.icon_authen'))
            .width($r('app.float.default_28'))
            .height($r('app.float.default_28'))

          Text("认证管理")
            .fontSize($r('app.float.text_size_16'))
            .fontColor($r('app.color.colorGrey8'))
            .textAlign(TextAlign.Start)
            .layoutWeight(1)
            .margin({ left: $r('app.float.default_10') })

          Image($r('app.media.arrow_right'))
            .width($r('app.float.default_22'))
            .height($r('app.float.default_22'))
        }
        .alignItems(VerticalAlign.Center)
        .padding({ left: $r('app.float.default_10'), right: $r('app.float.default_10') })
        .height($r('app.float.default_52'))
        .margin({ top: $r('app.float.default_5') })
        .onClick(() => {
          ToastUtil.showToast("功能开发中...")

          let pageParam :WebAppPageParam= {
            appName: '测试应用',
            appId: 'tastApp',
            secret: "35DB4R4GHN658S",
            linkUrl: "",
            operationType:H5OperationType.login,
          }
          HMRouterMgr.push({pageUrl:'WebAppPages',param: pageParam})
        })

        Divider()
          .backgroundColor($r('app.color.colorGrey2'))
          .width(AppConstants.PERCENTAGE_MAX)
          .height($r('app.float.default_1'))

        Row() {
          Image($r('app.media.icon_about'))
            .width($r('app.float.default_28'))
            .height($r('app.float.default_28'))

          Text("关于")
            .fontSize($r('app.float.text_size_16'))
            .fontColor($r('app.color.colorGrey8'))
            .textAlign(TextAlign.Start)
            .layoutWeight(1)
            .margin({ left: $r('app.float.default_10') })

          Image($r('app.media.arrow_right'))
            .width($r('app.float.default_22'))
            .height($r('app.float.default_22'))
        }
        .alignItems(VerticalAlign.Center)
        .padding({ left: $r('app.float.default_10'), right: $r('app.float.default_10') })
        .height($r('app.float.default_52'))
        .onClick(() => {
          HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "AboutPage" })
        })

        Divider()
          .backgroundColor($r('app.color.colorGrey2'))
          .width(AppConstants.PERCENTAGE_MAX)
          .height($r('app.float.default_1'))
      }
      .width(AppConstants.PERCENTAGE_MAX)
      .backgroundColor($r('app.color.white'))
      .margin({ top: $r('app.float.default_20') })
      .border({
        radius: {
          topLeft: $r('app.float.default_10'),
          topRight: $r('app.float.default_10')
        }
      })
      .layoutWeight(1)

    }
    .width(AppConstants.PERCENTAGE_MAX)
    .height(AppConstants.PERCENTAGE_MAX)
  }

  /**
   * 顶部背景图片
   */
  @Builder
  underlyingBackground() {
    Column() {
      Image($r('app.media.bg_two'))
        .width(AppConstants.PERCENTAGE_MAX)
        .height('40%')
    }
  }
}