<template>
  <div>
    <div
      class="modalMask"
      :style="style"
      @click="onClose"
    />
    <div
      class="modalWrapper"
      :style="style"
    >
      <div class="modalHeader">{{ title }}</div>
      <div class="modalContent"><slot /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    title: {
      type: String,
    },
    isShow: {
      type: Boolean,
    },
    onClose: {
      type: Function,
      default: function() {}
    },
  },
  computed: {
    style() {
      return {
        '--isShow': this.isShow ? 'block' : 'none',
      }
    },
  },
}
</script>

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

.modalMask,
.modalWrapper {
  --isShow: none;
  display: var(--isShow);
}

.modalMask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  height: 100%;
  z-index: 1000;
}
.modalWrapper {
  line-height: 1.5;
  color: palette(black, dark);
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  background-color: palette(white, base);
  border-radius: 4px;
  z-index: 1000;
}

.modalHeader {
  padding: 16px 24px;
  border-radius: 4px 4px 0 0;
  background: #fff;
  color: palette(black, dark);
  border-bottom: 1px solid palette(gray, base);
}

.modalContent {
  padding: 24px 0 0;
  margin: 0 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
</style>
