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 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 { Badge, Popover } from 'vant'
import { postMessage } from '@/helpers/native-message'
import { cartCount } from '../../shop-mall'
import { useRect } from '@vant/use'
import { state } from '@/state'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'TheHomeHeader',
  emits: ['cart', 'more', 'search', 'headerDom'],
  setup(props, { emit }) {
    const navBarHeight = ref(sessionStorage.getItem('navHeight'))
    const homeHeaderDom = ref(null)
    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')} />
      )
    }

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

    const popoverShow = ref(false)
    const actions = [
      { text: '我的订单', icon: IconOrder, url: '/goodsOrder' },
      { text: '我的地址', icon: IconLocation, url: '/' }
    ]
    return () => (
      <div class={styles.theHomeHeader} ref={homeHeaderDom}>
        {/* state.sourcType === 'kt' ? 0 : */}
        {/* 课堂乐器进来时不显示头部 */}
        {state.sourcType === 'kt' ? (
          <ColHeader />
        ) : (
          <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>
          <Badge content={cartCount.value} showZero={false}>
            <img
              class={styles.cart}
              src={IconCart}
              onClick={() => emit('cart')}
            />
          </Badge>

          <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>
    )
  }
})
