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

import IconMall from '../../images/icon-mall.png'
import IconSearch from '../../images/icon-search.png'
import IconCart from '../../images/icon-cart.png'
import IconMore from '../../images/icon-more.png'
import IconLocation from '../../images/icon-location.png'
import IconOrder from '../../images/icon-order.png'
import { Popover } from 'vant'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'TheHomeHeader',
  emits: ['cart', 'more', 'search'],
  setup(props, { emit }) {
    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 popoverSlots = {
      reference: () => (
        <img class={styles.more} src={IconMore} onClick={() => emit('more')} />
      )
    }

    const popoverShow = ref(false)
    const actions = [
      { text: '我的订单', icon: IconLocation, url: '/goodsOrder' },
      { text: '我的地址', icon: IconOrder, url: '/' }
    ]
    return () => (
      <div class={styles.theHomeHeader}>
        <div style={{ height: navBarHeight.value + 'px' }}></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={IconCart}
            onClick={() => emit('cart')}
          />
          <Popover
            placement="bottom-end"
            class={styles.popover}
            v-model:show={popoverShow.value}
            v-slots={popoverSlots}
            actions={actions}
            onSelect={action => emit('more', action)}
          ></Popover>
        </div>
      </div>
    )
  }
})