import { defineComponent, onMounted, ref } from 'vue'
import styles from './member-active.module.less'
import p1 from './images/active-o/1.png'
import p2 from './images/active-o/2.png'
import p3 from './images/active-o/3.png'
import btn from './images/active-o/btn.png'
import { useRouter } from 'vue-router'
import { postMessage } from '@/helpers/native-message'
import { Icon } from 'vant'
import { browser } from '@/helpers/utils'
import ColSticky from '@/components/col-sticky'

export default defineComponent({
  setup() {
    const router = useRouter()
    const navBarHeight = ref(0)

    const onDetail = () => {
      router.push('/memberCenter')
    }

    const onBack = () => {
      if (browser().isApp) {
        postMessage({ api: 'goBack' })
      } else {
        router.back()
      }
    }

    onMounted(() => {
      postMessage({ api: 'getNavHeight' }, res => {
        const { content } = res as any
        const dpi = content.dpi || 2
        if (content.navHeight) {
          const navHeight = content.navHeight / dpi
          navBarHeight.value = navHeight
        }
      })
    })
    return () => (
      <div class={[styles.memberActive, styles.memberActiveO]}>
        <Icon
          name="arrow-left"
          class={styles.backIcon}
          style={{
            top: `calc(${navBarHeight.value}px + 12px)`
          }}
          onClick={onBack}
        />

        <img src={p1} style={{ 'margin-bottom': '-1px' }} />
        <img src={p2} />
        <img src={p3} />

        <ColSticky position="bottom">
          <div class={styles.memberBtn}>
            <img src={btn} onClick={onDetail} />
          </div>
        </ColSticky>
      </div>
    )
  }
})