`<template>
  <eye-popup v-model="currentVisible"
             :class="b( { [position]: position } )"
             :style="popupStyle"
             :overlay="hasPopupBottom || overlay"
             :position="position">

      <div :class="b('root--'+position)">

          <eye-nav-bar v-if="!hasPopupTop"
                       :title="title"
                       :fixed="fixed"
                       @clickBack="handlerClickBack">

              <slot name="left" slot="left">
                  <i v-if="hasPopupBottom" class="eye-icon eye-icon-close" />
              </slot>
              <slot name="title" slot="title"></slot>
              <slot name="right" slot="right">
                  <div v-if="hasPopupBottom">
                      <eye-button class="eye-nav-submit"
                                  @click="handlerOnSubmit">{{rightText}}</eye-button>
                  </div>
              </slot>

          </eye-nav-bar>

          <div :class="['eye-scroll',b('inner',{
                fixed,
                'footer' : this.$slots && this.$slots.footer
            })]"
               :style="bodyStyle">
              <slot></slot>
          </div>

          <div class="footer">
              <slot name="footer"></slot>
          </div>

      </div>

  </eye-popup>

</template>

<script>

import { Component,SyncVisible } from 'eye-core';

export default Component({

    name: 'page-popup',

    mixins:[ SyncVisible ],

    props: {

        title: {
            type:String,
            default:'请选择'
        },
        rightText: {
            type:String,
            default:'确定'
        },
        mode: {
            type:String,
            default:'nav'
        },
        position:{
            type:String,
            default:'right'
        },
        fixed: {
            type: Boolean,
            default: true
        },
        overlay: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 10000
        }
    },


    data() {
        return {
        }
    },

    onInit() {
        //debugger
        //document.body.appendChild(this.$el);
        // setTimeout(() => {
        //     document.body.appendChild(this.$el);
        // },200)
    },


    computed: {

        bodyStyle:function () {
            return this.hasPopupTop ? { top: 0 } : {}
        },

    },
    methods: {


        handlerClickBack() {
            this.close();
            this.$emit('clickBack')
        },

        handlerClickSubmit() {
            this.close();
            this.$emit('submit')
        },

        handlerOnSubmit() {
            this.$emit('submit')
        },

        close() {
            this.setVisible(false)
        }
    }

});
</script>
