<template>
  <div class="main-page  min-h-screen" :class="mainBg">
    <van-overlay :show="loading" z-index="2000" :lock-scroll="false" class="flex items-center justify-center">
      <van-loading color="#fff" />
    </van-overlay>
    <div class="header-wrapper fixed top-0 left-0 w-screen z-50" :class="headerBg">
      <div class="header relative flex justify-center items-center py-3 h-12">
        <div class="h-action-wrapper absolute left-4 top-1/2 transform -translate-y-1/2 flex justify-center items-center">
          <div v-if="leftArrow">
            <app-icon
              type="png"
              class-name="w-6.5 w-6.5"
              icon-name="left-arrow"
              @click="clickLeft"
            />
          </div>
          <slot name="left" />
        </div>
        <div
          v-if="pageTitle"
          class="title w-3/5 text-center font-bold truncate"
          :class="titleColor"
        >
          {{ pageTitle }}
        </div>
        <slot v-else name="header" />
        <div class="h-action-wrapper absolute flex justify-center items-center right-4 top-1/2 transform -translate-y-1/2">
          <slot name="right" />
        </div>
      </div>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Overlay, Loading } from 'vant'

Vue.use(Overlay).use(Loading)

export default Vue.extend({
  name: 'MainPage',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    leftArrow: {
      type: Boolean,
      default: false
    },
    mainBg: {
      type: String,
      default: 'bg-common-bg'
    },
    headerBg: {
      type: String,
      default: 'bg-common-bg'
    },
    titleColor: {
      type: String,
      default: 'text-text-primary'
    },
    title: String,
    loading: Boolean
  },
  computed: {
    pageTitle(): string {
      return this.title || this.$route.meta?.title
    }
  },
  methods: {
    clickLeft() {
      this.$emit('click-left')
    }
  }
})
</script>

<style lang="less">

</style>
