<template>
  <transition name="fade">
    <div v-if="visible" class="shade flex-box fullscreen" :style="styleData">
      <div
        class="dialog-area"
        :class="{
          'pl-54': isFullscreen && !opened,
          'pl-210': isFullscreen && opened
        }"
      >
        <div class="title-area">
          <slot name="title">
            <span class="title">
              {{ title }}
            </span>
          </slot>
          <div class="icon-area ml-auto">
            <i class="el-icon-minus pointer" />
            <svg-icon
              v-if="!isFullscreen"
              icon-class="fullscreen"
              class="change-fullscreen-icon pointer"
              @click="fullscreen"
            />
            <svg-icon
              v-else
              icon-class="exit-fullscreen"
              class="change-fullscreen-icon pointer"
              @click="exitFullscreen"
            />
            <i class="el-icon-close pointer" @click="handleCancel" />
          </div>
        </div>
        <div class="slot-place">
          <div class="content-warp">
            <div class="content">
              <slot>
                <p v-text="content"></p>
              </slot>
            </div>
            <div class="action-bar">
              <el-button size="small" type="primary" @click="handleConfirm">{{
                confirmButtonText
              }}</el-button>
              <el-button size="small" @click="handleCancel">{{
                cancelButtonText
              }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ConfirmLayer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: ''
    },
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    dialogStyle: {
      type: Object,
      default: () => ({
        '--dialog-width': '422px',
        '--dialog-height': '211px',
        '--title-height': '51px'
      }),
      require: true
    }
  },
  data() {
    return {
      isFullscreen: false,
      styleData: {},
      styleTmp: {}
    }
  },
  computed: {
    opened() {
      return this.$store.state.app.sidebar.opened
    }
  },
  created() {
    this.styleData = this.dialogStyle
  },
  methods: {
    fullscreen() {
      this.styleTmp = this.dialogStyle
      this.styleData = {
        '--dialog-width': '100vw',
        '--dialog-height': '100vh',
        '--dialog-border-radius': 0,
        '--title-height': this.dialogStyle['--title-height']
      }
      this.isFullscreen = true
      this.$emit('fullscreen')
    },
    exitFullscreen() {
      this.styleData = this.styleTmp
      this.isFullscreen = false
      this.$emit('exitFullscreen')
    },
    handleConfirm() {
      this.visible = false
      this.$emit('confirm')
      this.callback && this.callback('confirm', this)
    },
    handleCancel() {
      this.visible = false
      this.$emit('cancel')
      this.callback && this.callback('cancel', this)
    }
  }
}
</script>

<style lang="scss" scoped>
.shade {
  --dialog-width: 0;
  --dialog-height: 0;
  --dialog-border-radius: 15px;
  --title-height: 0;

  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999;

  .pl-54 {
    padding-left: 54px;
  }

  .pl-210 {
    padding-left: 210px;
    margin-top: 128px;
  }

  .dialog-area {
    overflow: hidden;
    width: var(--dialog-width);
    height: var(--dialog-height);
    border-radius: var(--dialog-border-radius);
    background-color: #fff;
    box-shadow: 1px 1px 50px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    animation: enter 0.3s;

    @keyframes enter {
      0% {
        opacity: 0;
        transform: translateY(-27px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .title-area {
      display: flex;
      align-items: center;
      height: var(--title-height);
      background-color: #fff;
      border: 1px solid #e9e9e9;

      .title {
        margin-left: 24px;
        font: 400 16px PingFangSC-Regular, PingFang SC;
        color: #333;
      }

      .icon-area {
        width: 102px;

        .change-fullscreen-icon {
          margin: 0 20px 0 17px;
          color: #333;
        }
      }
    }

    .slot-place {
      overflow: auto;
      position: relative;
      width: 100%;
      height: calc(var(--dialog-height) - var(--title-height));
      border: 0 solid transparent;

      padding-left: 20px;
      padding-right: 20px;
    }
  }
}

.content-warp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .content {
    display: flex;
    align-items: center;
    height: 100px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
