<!--
 * @Author: Devin
 * @Date: 2022-11-16 10:48:53
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:36
 * @Description: 公共抽屉弹窗
-->
<template>
  <el-dialog
    v-bind="dialogData.drawerData"
    v-model="drawer"
    :destroy-on-close="true"
    custom-class="__common-dialog"
    :show-close="true"
    :before-close="handleClose"
    :width="dialogWidth"
    :fullscreen="fullscreen"
  >
    <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-dialog>
</template>

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

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

const props = defineProps({
  dialogData: {
    type: Object,
    default: () => {
      return {
        drawerData: {},
        btns: []
      };
    }
  },
  width: {
    type: String,
    default: 'middle'
  },
  fullscreen: {
    type: Boolean,
    default: () => false
  }
});

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

// 确认
const confirmDialog = () => {
  emits('confirmDialog');
};
const dialogWidth = ref<any>('middle');
function parseDialog() {
  const w = props.width;
  switch (w) {
    case 'big':
      dialogWidth.value = '960px';
      break;
    case 'middle':
      dialogWidth.value = '831px';
      break;
    case 'small':
      dialogWidth.value = '560px';
      break;
    case 'full':
      dialogWidth.value = '831px';
      break;
    default:
      dialogWidth.value = w;
      break;
  }
}

onMounted(() => {
  parseDialog();
});
</script>

<script lang="ts">
export default {
  name: 'CommonDialog'
};
</script>
<style lang="scss">
.__common-dialog {
  max-height: 96vh;
}
.el-dialog__body {
  border-bottom: 1px solid #ebebeb !important;
  border-top: 1px solid #ebebeb !important;
  max-height: 60vh;
  min-height: 40vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-dialog__header {
  border-bottom: 1px solid #ebebeb !important;
  margin-bottom: 0px;
  padding-bottom: 15px;
}
.el-dialog__footer {
  border-top: 1px solid #ebebeb !important;
  padding-top: 15px;
}
</style>