<template>
  <view id="dialog1" class="dialog-container">
    <view class="dialog-content">
      <text>title: {{ title }}</text>
      <text class="mt-10">onBackPress return true</text>
      <button class="mt-10" id="dialog1-go-next-page" @click="goNextPage">
        go next page
      </button>
      <button class="mt-10" id="dialog1-open-dialog2" @click="openDialog2">
        openDialog2
      </button>
      <button class="mt-10" id="dialog1-close-dialog" @click="closeDialog">
        closeDialog
      </button>
      <button class="mt-10" id="dialog1-close-this-dialog" @click="closeThisDialog">
        closeThisDialog
      </button>
      <button class="mt-10" @click="checkGetParentPage">
        check getParentPage
      </button>
      <button class="mt-10" @click="checkGetElementById">
        check getElementById
      </button>
      <button class="mt-10" @click="toggleBackgroundColor">
        toggleBackgroundColor
      </button>
      <button class="mt-10" id="dialog1-back" @click="back">back</button>
    </view>
  </view>
</template>

<script>
  import {
    state,
    setLifeCycleNum
  } from '@/store/index.uts'

  export default {
    data() {
      return {
        title: 'dialog 1',
        backgroundColorContent: 'transparent'
      }
    },
    onLoad(options : OnLoadOptions) {
      console.log('dialog 1 onLoad', options)
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum + 1)
      if (options['name'] == 'dialog1') {
        // 自动化测试
        setLifeCycleNum(state.lifeCycleNum + 1)
      }
    },
    onShow() {
      console.log('dialog 1 onShow')
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum + 1)
    },
    onReady() {
      console.log('dialog 1 onReady')
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum + 1)
      const currentPages = getCurrentPages()
      const parentPage = this.$page.getParentPage()!
      const grandParentPage = parentPage.getParentPage()
      const dialogPages = parentPage.getDialogPages()
      const dialogPage = this.$page
      if (
        currentPages.length == 1 &&
        grandParentPage == null &&
        dialogPages.indexOf(dialogPage) != -1
      ) {
        // 自动化测试
        setLifeCycleNum(state.lifeCycleNum + 1)
      }
    },
    onHide() {
      console.log('dialog 1 onHide')
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum - 1)
    },
    onUnload() {
      console.log('dialog 1 onUnload')
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum - 5)
    },
    onBackPress(options : OnBackPressOptions) : boolean | null {
      console.log('dialogPage1 onBackPress', options)
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum + 1)
      return true
    },
    methods: {
      goNextPage() {
        uni.navigateTo({ url: '/pages/API/dialog-page/next-page' })
      },
      openDialog2() {
        uni.openDialogPage({
          url: '/pages/API/dialog-page/dialog-2',
          disableEscBack: true,
          success(res) {
            console.log('openDialog2 success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('openDialog2 fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('openDialog2 complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      closeDialog() {
        uni.closeDialogPage({
          success(res) {
            console.log('closeDialog success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('closeDialog fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('closeDialog complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      closeThisDialog() {
        uni.closeDialogPage({
          dialogPage: this.$page,
          success(res) {
            console.log('closeThisDialog success', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          },
          fail(err) {
            console.log('closeThisDialog fail', err)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum - 4)
          },
          complete(res) {
            console.log('closeThisDialog complete', res)
            // 自动化测试
            setLifeCycleNum(state.lifeCycleNum + 1)
          }
        })
      },
      checkGetParentPage() : boolean {
        const parentPage = this.$page.getParentPage()
        console.log('checkGetParentPage', parentPage)
        const res = parentPage != null
        uni.showToast(res ? {
          title: 'check success'
        } : {
          title: 'check fail',
          icon: 'error'
        })
        return res
      },
      checkGetElementById() : boolean {
        const page = this.$page
        const element = page.getElementById('dialog1-go-next-page')
        let res = element != null
        // #ifndef APP-ANDROID
        if (res) {
          const elPage = element!.getPage()
          console.log('elPage', elPage)
          res = elPage === page
        }
        // #endif
        console.log('check getElementById', res)
        uni.showToast(res ? { title: 'check success' } : { title: 'check fail', icon: 'error' })
        return res
      },
      toggleBackgroundColor() {
        this.backgroundColorContent = this.backgroundColorContent == 'transparent' ? 'rgb(0, 122, 255)' : 'transparent'
        this.$page.setPageStyle({
          backgroundColorContent: this.backgroundColorContent
        })
      },
      back() {
        uni.navigateBack()
      }
    }
  }
</script>

<style>
  .dialog-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-content {
    width: 80%;
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
  }

  .mt-10 {
    margin-top: 10px;
  }
</style>