<template>
  <div class="zui-landscape" :class="{ 'is-full': fullScreen }">
    <zui-popup
      v-model="isLandscapeShow"
      :mask-closable="maskClosable"
      prevent-scroll
      prevent-scroll-exclude=".zui-landscape-content"
      :has-mask="!fullScreen && hasMask"
      :transition="transition"
      @input="$emit('input', false)"
      @show="$emit('show')"
      @hide="$emit('hide')"
    >
      <div class="zui-landscape-body" :class="{ scroll }" @click="$_click">
        <div class="zui-landscape-content">
          <slot></slot>
        </div>
        <zui-icon class="zui-landscape-close" :class="{ dark: !hasMask || fullScreen }" @click="$_close" :name="fullScreen ? 'close' : 'close'" />
      </div>
    </zui-popup>
  </div>
</template>

<script>
export default {
  name: 'Landscape',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    scroll: {
      type: Boolean,
      default: false,
    },
    fullScreen: {
      type: Boolean,
      default: false,
    },
    hasMask: {
      type: Boolean,
      default: true,
    },
    maskClosable: {
      type: Boolean,
      default: false,
    },
    transition: {
      type: String,
      default() {
        return this.fullScreen ? 'zui-fade' : 'zui-punch';
      },
    },
  },
  data() {
    return {
      isLandscapeShow: this.value,
    };
  },
  watch: {
    value(val) {
      this.isLandscapeShow = val;
    },
  },
  methods: {
    // MARK: private methods
    $_close() {
      this.isLandscapeShow = false;
    },
    $_click() {
      this.$emit('click');
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>
