<template>
  <div class="QdmDialog">
    <el-dialog
    center
    :title="title"
    v-model="showStatus"
    :custom-class="showStatus && animation ? 'animationShow' : 'animationHide'"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :show-close="showClose"
    @open="dialogOpen">
      <slot v-if="show"></slot>
      <template v-slot:footer>
        <div v-show="footerShow" class="dialog-footer">
          <QdmButton
          @click="handleClose"
          v-show="cancelShow"
          :name="cancelText"
          :background="cancelBackground"
          :color="cancelColor"></QdmButton>
          <QdmButton
          v-show="confirmShow"
          :name="confirmText"
          :background="confirmBackground"
          :color="confirmColor"
          @click="submit"></QdmButton>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import QdmButton from '@/components/QdmButton'
export default {
  name: "QdmDialog",
  components: {
    QdmButton
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '30%'
    },
    footerShow: {
      type: Boolean,
      default: true
    },
    cancelShow: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    cancelBackground: {
      type: String,
      default: '#f4f4f5'
    },
    cancelColor: {
      type: String,
      default: '#333'
    },
    confirmShow: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    confirmBackground: {
      type: String,
      default: '#409EFF'
    },
    confirmColor: {
      type: String,
      default: '#fff'
    },
    showClose: {
      type: Boolean,
      default: true
    },
    animation: {
    	type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showStatus: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    dialogOpen() {
      this.$emit('dialogOpen')
    },
    submit() {
    	this.$emit('submit')
    }
  },
  watch: {
    show(val) {
      this.showStatus = val
    }
  }
}
</script>
<style lang="less">
@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-out-hor-top {
  0% {
    transform: rotateX(0);
    opacity: 1;
  }
  100% {
    transform: rotateX(70deg);
    opacity: 0;
  }
}
.QdmDialog {
  .el-dialog {
  	&.animationShow {
  		animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  	}
  	&.animationHide {
  		animation: flip-out-hor-top 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  	}
    .el-dialog__header {
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      text-align: left;
      border-bottom: 1px solid #D9D9D9;
      .el-dialog__title {
        font-size: 14px;
        font-weight: bold;
      }
      .el-dialog__headerbtn {
        top: 8px;
      }
    }
    .el-dialog__body {
      padding: 12px;
    }
    .el-dialog__footer {
      border-top: 1px solid #D9D9D9;
      padding: 8px 12px;
      .dialog-footer {
        .QdmButton {
          float: none;
          display: inline-block;
        }
      }
    }
  }
}
</style>