<template>

</template>

<script>
import { onMounted, onUpdated, watch } from 'vue'
import { useModel } from '@/store'

export default {
  props: {
    title: undefined,
    back: Boolean,
    actions: Array,
  },

  emits: ['click'],

  setup(props, context) {
    const {
      setPageTitle,
      setBack,
      setClick,
      setActions,
     } = useModel('pageHeader')

    // watch 不能正常监控所有类型的 props 变化
    const handlePropsChange = () => {
      if (props.title) {
        setPageTitle(props.title)
      }

      if (typeof props.back === 'boolean') {
        setBack(props.back)
      }

      if (props.actions && props.actions.length) {
        setActions(props.actions)
      }
    }

    onMounted(() => {
      setClick(e => {
        context.emit('click', e)
      })
      
      handlePropsChange()
    })

    onUpdated(() => {
      handlePropsChange()
    })

    return {}
  }
}
</script>
