import { defineComponent, nextTick, onMounted, ref } from 'vue'
import styles from './index.module.less'

import IconMall from '../../images/icon-mall.png'
import IconSearch from '../../images/icon-search.png'
import IconScan from '../../images/icon-scan.png'
import IconMessage from '../../images/icon-message.png'
import { postMessage } from '@/helpers/native-message'
import TheHomeHeader from '@/views/shop-mall/components/TheHomeHeader'
import { useRect } from '@vant/use'
import ColSticky from '@/components/col-sticky'

export default defineComponent({
  name: 'TheHomeHeader',
  emits: ['cart', 'more', 'search', 'headerDom'],
  setup(props, { emit, expose }) {
    const navBarHeight = ref(sessionStorage.getItem('navHeight'))
    const init = () => {
      // 设置是否显示导航栏 0 显示 1 不显示
      postMessage({ api: 'setBarStatus', content: { status: 0 } })
      if (navBarHeight.value) return
      postMessage({ api: 'getNavHeight' }, res => {
        const { content } = res as any
        const dpi = content.dpi || 2
        if (content.navHeight) {
          const navHeight = content.navHeight / dpi + ''
          sessionStorage.setItem('navHeight', navHeight)
          navBarHeight.value = navHeight
        }
      })
    }
    init()
    const homeHeaderDom = ref(null)

    onMounted(() => {
      nextTick(() => {
        setTimeout(() => {
          const { height } = useRect(homeHeaderDom as any)
          emit('headerDom', height)
        }, 300)
      })
    })

    return () => (
      <ColSticky position="top">
        <div class={styles.theHomeHeader} ref={homeHeaderDom}>
          <div
            style={{ height: navBarHeight.value + 'px', background: '#fff' }}
          ></div>
          <div class={styles.content}>
            <img class={styles.mall} src={IconMall} />
            <div class={styles.searchBox} onClick={() => emit('search')}>
              <img class={styles.iconSearch} src={IconSearch} />
              <span>搜索你喜欢的内容</span>
            </div>

            <img
              class={styles.cart}
              src={IconScan}
              onClick={() => emit('cart')}
            />

            <img
              class={styles.cart}
              src={IconMessage}
              onClick={() => emit('more')}
            />
          </div>
        </div>
      </ColSticky>
    )
  }
})