import router from '@ohos.router'
import web_webview from '@ohos.web.webview';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

/**
 * 暂时使用的页面
 */
@Entry
@Component
export default struct CommonWebPage {
  private url: string = '';
  private title: string = ''
  private webController: WebviewController = new web_webview.WebviewController;
  @State barHeight:number = 0;
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext

  async setSystemBar() {
    // 获取当前应用窗口
    let windowClass: window.Window = await window.getLastWindow(this.context)
    // 获取状态栏高度
    this.barHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
    // 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
    await windowClass.setWindowSystemBarProperties({
      navigationBarColor: "#00000000",
      statusBarColor: "#00000000",
      navigationBarContentColor: "#FFFFFFFF",
      statusBarContentColor: "#FFFFFFFF"
    })
  }

  async resetSystemBar() {
    // 获取当前应用窗口
    let windowClass: window.Window = await window.getLastWindow(this.context)
    // 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
    await windowClass.setWindowSystemBarProperties({
      navigationBarColor: "#00000000",
      statusBarColor: "#00000000",
      navigationBarContentColor: "#FFFFFFFF",
      statusBarContentColor: "#FFFFFFFF"
    })
  }

  aboutToAppear() {
    this.setSystemBar()

    const routerParam = router.getParams() as Record<string, string>;
    this.url = routerParam.url;
    this.title = routerParam.title || '';
  }

  aboutToDisappear(){
    this.resetSystemBar()
    try {
      this.webController.stop()
    } catch (e) {
      // WebView may already be detached.
    }
  }

  build() {
    Column() {
      Blank().height(px2vp(this.barHeight) +2).color($r('app.color.subpage_title_red')).width('100%')
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
        Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
          Column() {
            Image($r('app.media.toolbar_arrow_left'))
              .width(19)
              .height(24)
              .fillColor('#FFFFFF')
          }.margin({ right: 16 })
          .onClick(() => {
            router.back();
          })
          .padding(10)
          Text(this.title).fontSize(19).fontColor('#FFFFFF')
        }.margin({ left: 16 })
      }
      .height(44).backgroundColor($r('app.color.navbar_bg_red')).width('100%')

      Web({
        src: this.url,
        controller: this.webController
      }).domStorageAccess(true)
        .mixedMode(MixedMode.All)
        .flexGrow(1)
        .flexShrink(1)
    }
    .height('100%')
    .width('100%')
  }
}