import { webview } from '@kit.ArkWeb'
import { BasicType } from '../models'
import { router } from '@kit.ArkUI'
import { YTAvoid } from '../utils/YTAvoid'
import { AppStorageKeyCollect } from '../constants'

@Component
@Entry
struct PrivacyPage {
  @State safeTop: number = 30
  // 倒计时
  @State time: number = 5
  private webviewController: WebviewController = new webview.WebviewController()
  private forEach: Array<BasicType> = [
    {
      text: '隐私政策',
      message: 'https://file.ytmdm.com/小易旅记隐私协议.html'
    }, {
    text: '用户协议',
    message: 'https://file.ytmdm.com/小易旅记用户协议.html'
  }
  ]

  _onBack() {
    router.back()
    return true
  }

  // 同意
  _onConfirm() {
    AppStorage.set(AppStorageKeyCollect.FIRST_ENTER_APP, true)
    this.getUIContext().getRouter().pushUrl({
      url: 'pages/Index'
    })
  }

  aboutToAppear(): void {
    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number

    let _c = setInterval(() => {
      this.time--
      if (this.time == 0) {
        clearInterval(_c)
      }
    }, 1000)
  }

  build() {
    NavDestination() {
      Column({ space: 40 }) {
        Text('隐私政策及用户协议')
          .fontSize(18)
          .fontWeight(500)
          .fontColor(Color.Black)
        // Main
        Column({ space: 10 }) {
          ForEach(this.forEach, (item: BasicType) => {
            Column({ space: 8 }) {
              Text(item.text)
                .fontColor(Color.Black)
              Row() {
                Web({
                  src: item.message,
                  controller: this.webviewController,
                  renderMode: RenderMode.ASYNC_RENDER // 设置渲染模式
                })
              }
              .height(225)
              .width('100%')
              .padding(8)
              .border({ width: 1 })
            }
            .alignItems(HorizontalAlign.Start)
          })

          Blank().height(10)

          Row() {
            Text('我不同意并返回')
              .fontSize(16)
              .fontWeight(400)
              .fontColor('#676767')
              .onClick(() => {
                this._onBack()
              })

            Text(`我已全部了解${this.time != 0 ? ' (' + this.time + ')' : ''}`)
              .fontSize(18)
              .fontWeight(500)
              .borderRadius(20)
              .fontColor('#FAFAFA')
              .enabled(this.time == 0)
              .backgroundColor(this.time == 0 ? '#7186F9' : '#ffacbaf3')
              .padding({
                left: 20,
                top: 8,
                right: 20,
                bottom: 8
              })
              .onClick(() => {
                this._onConfirm()
              })
          }
          .width('100%')
          .padding({ top: 5, bottom: 5 })
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.SpaceBetween)

          Row() {
            Text('*请仔细阅读以上协议内容，点击同意表示您已充分理解并接受协议条款')
              .fontSize(10)
              .fontWeight(400)
              .fontColor('#F50000')
          }
          .padding({ top: 5 })
          .width("100%")
          .justifyContent(FlexAlign.Center)
        }
        .width('100%')
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.Start)
      }
      .width('100%')
      .height('100%')
      .padding({ left: 16, right: 16 })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
    .backgroundColor(Color.White)
    .hideTitleBar(true)
    .padding({ top: this.safeTop })
    .onBackPressed(() => {
      return this._onBack()
    })
  }
}