<template>
  <div class="dialog_layout" v-if="visible">
    <div class="_ctx" :style="{ width }">
      <h2 class="_title">
        {{ title }}<i class="_close el-icon-close" @click="onCancel" v-if="showClose" />
      </h2>
      <div class="_body" :style="{ height: bodyHeight }"><slot /></div>
      <ActionBar
        :class="{ shadow_bar: shadowBar }"
        center
        v-bind="actionBarOption"
        v-on="$listeners"
      />
    </div>
  </div>
</template>

<script>
import ActionBar from './ActionBar.vue'

export default {
  components: { ActionBar },

  props: {
    visible: { type: Boolean },
    shadowBar: { type: Boolean, default: true },
    title: { type: String },
    showClose: { type: Boolean, default: true },
    width: { type: String },
    bodyHeight: { type: String },
    actionBarOption: { type: Object }
  },

  watch: {
    visible: {
      immediate: true,
      handler (v) {
        if (!v) return

        this.$nextTick(() => document.body.appendChild(this.$el))
      }
    }
  },

  beforeDestroy () {
    this.$emit('update:visible', false)
    this.$el.parentNode?.removeChild(this.$el)
  },

  methods: {
    onCancel () {
      this.$emit('onCancel')
    }
  }
}
</script>

<style lang="scss">
.dialog_layout {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);

  > ._ctx {
    min-width: 300px;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;

    > ._title {
      padding: 12px;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      background-color: #87d2d9;
      position: relative;

      > ._close {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        cursor: pointer;
      }
    }

    > ._body {
      padding: 12px;
      max-height: 80vh;
      overflow: hidden auto;
    }

    > .action_bar {
      padding: 0 12px 12px;

      &.shadow_bar {
        padding: 8px 12px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
