<template>
  <el-dialog class="drawer-dialog"
             :title="title"
             :visible="visible"
             :show-close="showClose"
             :modal="modal"
             :close-on-click-modal="closeOnClickModal"
             top="0"
             :width="dialogWidth"
             @update:visible="hide">
    <slot></slot>
    <div class="drawer-footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'DrawerDialog',
    props: {
      value: null,
      title: {
        type: String
      },
      visible: {
        type: Boolean,
        default: false
      },
      showClose: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '500'
      },
      modal: {},
      closeOnClickModal: {}
    },
    computed: {
      ...mapGetters([
        'device'
      ]),
      dialogWidth () {
        if (this.device === 'mobile') {
          return '100%';
        } else {
          return this.width + 'px';
        }
      }
    },
    data: function () {
      return {}
    },
    methods: {
      hide () {
        this.$emit('update:visible', false);
        this.$emit('close');
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss">
  .drawer-dialog {
    .el-dialog {
      right: 0;
      left: auto;
      bottom: 0;
      top: 0;
      margin: 0;
      position: fixed;
      height: 100%;
    }
    /*取消弹窗*/
    .drawer-footer {
      position: absolute;
      bottom: 30px;
      margin: -20px;
      width: 100%;
      text-align: right;
      padding: 20px;
    }
    .el-dialog__header {
      padding: 10px 20px;
      background: #409EFF;
    }
    .el-dialog__headerbtn {
      top: 13px;
    }
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .drawer-dialog.dialog-fade-leave-active {
    animation: mymoveout .5s;
  }
  /*划出弹窗*/
  .drawer-dialog.dialog-fade-enter-active {
    animation: mymove .5s;
  }
  @keyframes mymove {
    from {
      /*opacity: 0;*/
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes mymoveout {
    from {
      /*opacity: 1;*/
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    to {
      /*opacity: 0;*/
      -webkit-transform: translate3d(120%, 0, 0);
      transform: translate3d(120%, 0, 0);
    }
  }

</style>
