<template>
  <div class="Layout font-sans text-base bg-app-drak-1 page text-white">
      <div class="header flex px-3 py-3">
          <div class="w-1/12  transform rotate-180 " @click="navigatTo">
              <app-icon customize type='icon-arrow-right-copy-copy'  size='24px'></app-icon>
          </div>
          <div class="w-10/12 text-center">
              {{meta.text}}
          </div>
          <div class="text-sm flex items-center flex-shrink-0 pr-1.5" @click="rightHandle">
            {{ rightText }}
          </div>
      </div>
      <slot></slot>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';



export default Vue.extend({
  name: 'ChildView',
  components:{
      'app-icon':()=>import('@/components/common/Icon.vue')
    // 'app-overlay':()=>import('./overlay.vue'),
    // 'app-navigator':()=>import('./navigator.vue'),
    // 'app-picker':()=>import('@/components/common/Picker.vue')
  }, 
  data() {
      return{
          meta:{}
      }
  },
  props: {
      rightText: {
          type: String
      }
  },
  mounted(){
      this.meta = this.$route.meta
  },
  methods:{
      navigatTo(){
          this.$router.go(-1)
      },
      rightHandle() {
          this.$emit('rightHandle')
      }
  }
});
</script>
<style scoped>
.Layout{
    height:100vh;
    width: 100%;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('../assets/home/banner.png');
    background-size: 100%;
    background-position-x: 50%;
    background-position-y: top;
    background-repeat: no-repeat;
}

</style>