<!--
 * @Author: Devin
 * @Date: 2022-11-16 10:48:53
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:32
 * @Description: 公共抽屉弹窗
-->
<template>
  <el-drawer
    v-bind="dialogData.drawerData"
    v-model="drawer"
    custom-class="common-drawer"
    :show-close="true"
    :before-close="handleClose"
    :size="width"
  >
    <slot></slot>
    <template #footer>
      <div v-if="dialogData?.btns?.length" class="btns">
        <template v-for="(btn, index) in dialogData?.btns" :key="index">
          <el-button :type="btn?.type || ''" @click.stop="btn.onClick()">
            {{ btn?.label }}
          </el-button>
        </template>
      </div>
      <template v-else>
        <el-button @click.stop="closeDialog">关闭并返回</el-button>
        <el-button type="primary" @click.stop="confirmDialog">提交</el-button>
      </template>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emits = defineEmits(['closeDialog', 'confirmDialog']);
const drawer = ref(true);

defineProps({
  dialogData: {
    type: Object,
    default: () => {
      return {
        drawerData: {},
        btns: []
      };
    }
  },
  width: {
    type: String,
    default: '900'
  }
});

const handleClose = () => {
  drawer.value = false;
  emits('closeDialog');
};
// 取消
const closeDialog = () => {
  emits('closeDialog');
};

// 确认
const confirmDialog = () => {
  emits('confirmDialog');
};
</script>
<script lang="ts">
export default {
  name: 'CommonDrawer'
};
</script>

<style lang="scss">
// .common-drawer {
//   .el-drawer__header {
//     border-bottom: 1px solid #ebebeb !important;
//     margin-bottom: 0px;
//     padding-bottom: 15px;
//   }
// }
// :deep(.el-drawer__header) {
//   border-bottom: 1px solid #ebebeb !important;
//   margin-bottom: 20px;
// }
.el-drawer__header {
  border-bottom: 1px solid #ebebeb !important;
  margin-bottom: 0px;
  padding-bottom: 15px;
}
.el-drawer__footer {
  border-top: 1px solid #ebebeb !important;
  padding-top: 15px;
}
</style>