<template>
  <div
    class="xd-full-screen"
    :style="style"
  >
    <div class="xd-full-screen-icon" @click="handleScreen">
      <i class="xd_admin_iconfont xdicon_fangda" v-if="isScreen"></i>
      <i class="xd_admin_iconfont xdicon_pingmusuoxiao" v-else></i>
    </div>
    <div class="xd-full-screen-content" :style="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "XdFullScreen",
  props:{
    value:{
      type:Boolean,
      default:false
    },
    zIndex:{
      type:Number,
      default:2000
    },
    border:{
      type:Number,
      default:1
    },
    padding: {
      type: String,
      default: '10px'
    }
  },

  computed:{
    style(){
      let style = {
        border:`${this.border}px solid #eee`,
        padding: this.padding,
        position: 'relative',
        zIndex: this.zIndex || 2000
      };
      if(this.isScreen) {
        style['top'] = 0;
        style['right'] = 0;
        style['left'] = 0;
        style['bottom'] = 0;
        style['position'] = 'fixed';
        style['backgroundColor'] = '#fff';
      }
      return style
    },
    content(){
      if(this.isScreen) {
        const otherHeight = this.border * 2 +  parseInt(this.padding) * 2;
        return {
          height: `calc(100vh - ${otherHeight}px)`
        }
      }
      else return '';
    },
  },
  data(){
    return {
      isScreen: false
    }
  },
  created() {
    this.isScreen = this.value;
  },
  methods:{
    handleScreen(){
      this.isScreen = !this.isScreen;
      this.$emit('input',this.isScreen)
    }
  }
}
</script>


<style scoped lang="scss">
  .xd-full-screen {
    &-icon {
      position: absolute;
      right: 0;
      top:0;
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;


      & > i {
        font-size: 16px;
      }
    }
  }
</style>
