<template>
  <div>
    <el-dialog
      v-if="type==''"
      :class="{'notitle':!title.length,'nofooter':!hasFooter}"
      :title="title"
      :visible.sync="dialogVisible"
      :style="{'--width':width}"
      :append-to-body="appendToBody"
      :center="center"
      :close-on-click-modal="closeOnClickModal"
      :custom-class="popperClassCom"
      :before-close="handleClose">
      <slot></slot>
      <div slot="footer" class="dialog-footer" v-if="isSlotted">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
    <el-drawer
      v-else-if="type=='drawer'"
      :custom-class="popperClassCom"
      :title="title"
      :visible.sync="dialogVisible"
      :style="{'--width':width}"
      :direction="direction"
      :append-to-body="appendToBody"
      :with-header="widthHeader"
      :close-on-click-modal="closeOnClickModal"
      :before-close="handleClose">
      <slot></slot>
      <div class="drawer-dialog-footer" v-if="isSlotted" :class="{'noBottom':noBottom}">
        <slot name="footer"></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                isSlotted:false
            }
        },
        props:{
            noBottom:{
                type:Boolean,
                default:false
            },
            customClass:{
                type:String,
                default:''
            },
            width:{
                type:String,
                default:'720px'
            },
            type:{
                type:String,
                default:''
            },
            title:{
                type:String,
                default:''
            },
            dialogVisible:{
                type:Boolean,
                default:true
            },
            appendToBody:{
                type:Boolean,
                default:true
            },
            center:{
                type:Boolean,
                default:false
            },
            direction:{
                type:String,
                default:'rtl'
            },
            widthHeader:{
                type:Boolean,
                default:true
            },
            closeOnClickModal:{
                type:Boolean,
                default:true
            }
        },
        methods:{
            handleClose(done){
                this.$emit('beforeClose',done);
            }
        },
        computed:{
            hasFooter(){
                if(this.$slots['footer']&&this.$slots['footer'].length){
                    return true
                }
                return false
            },
            popperClassCom(){
                var popClass='al-dial ';
                popClass+=this.customClass;
                return popClass;
            }
        },
        mounted(){

            //检查是否传入slot,有传入slot的话，则隐藏默认的文本元素
            if(this.$slots.footer&&this.$slots.footer.length){
                this.isSlotted=true;
            }

        },
        created(){
        }
    }
</script>

<style lang="scss">
  .al-dial{
    &.el-dialog{
      border-radius:8px;
      width: #{'var(--width)'} !important;
    }
    &.el-drawer{
      width: #{'var(--width)'} !important;
    }

    .el-dialog__header{
      padding: 20px 24px 12px;
      border-bottom: 1px solid #EBEEF5;
    }
    .el-dialog__body{
      padding: 24px;
    }
    .el-dialog__footer{
      padding: 10px 24px 10px;
      border-top: 1px solid #EBEEF5;
    }
    .el-drawer__header{
      padding: 16px 24px;
      margin-bottom: 0;
      border-bottom: 1px solid #EBEEF5;
      font-size: 18px;
      span{
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        text-align: left;
      }
    }
    .el-dialog__close{
      font-size: 24px;
      color: #333;
    }
    .el-drawer__body{
      padding: 24px;
      color: #606266;
      overflow: auto;
      padding-bottom: 57px;
    }
  }
  .notitle{
    .el-dialog__header{
      border-bottom: none;
    }
  }
  .nofooter{
    .el-dialog__footer{
      border-top: none;
    }
  }
  *{
    outline: none;
  }
  .drawer-dialog-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;text-align: right;
    padding: 10px 24px 10px;
    border-top: 1px solid #EBEEF5;
    background: #fff;
    &.noBottom{
      border-top: none;
    }
  }
</style>
