<template>
  <div class="commonDialog-container">
    <el-dialog
      style="padding: 0 !important"
      v-model="showDialog"
      :width="dialogWidth"
      append-to-body
      :close-on-click-modal="closeOnClickModal"
      :before-close="handleClose"
      center
      :show-close="false"
    >
      <template #header>
        <div class="titleBox">{{ dialogTitle }}</div>
      </template>
      <div class="content">
        <slot></slot>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <!-- 取消按钮 -->
          <el-button type="info" plain v-if="showCancle" @click="close">{{ cancleText }}</el-button>
          <!-- 确认按钮 -->
          <el-button type="primary" v-if="showConfirm" @click="confirm">{{
            confirmText
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, defineExpose } from 'vue'
const props = defineProps({
  dialogTitle: {
    type: String,
    default: ''
  },
  cancleText: {
    type: String,
    default: '取消'
  },
  showCancle: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: '确认'
  },

  showConfirm: {
    type: Boolean,
    default: true
  },
  dialogWidth: {
    type: [String, Number],
    default: '500px'
  },
  // 是否点击遮罩层关闭弹窗
  closeOnClickModal: {
    type: Boolean,
    default: true
  },
  // 打开弹窗
  openDialog: {
    type: Boolean,
    default: true
  },
  // 打开弹窗
  center: {
    type: Boolean,
    default: true
  }
})
const showDialog = ref(props.openDialog)
const emit = defineEmits(['confirm', 'close'])
const close = () => {
  showDialog.value = false
  emit('close')
}
const confirm = () => {
  showDialog.value = false
  emit('confirm')
}
const handleClose = done => {
  close()
  done()
}
watch(
  () => props.openDialog,
  val => {
    showDialog.value = val
  }
)
</script>

<style scoped lang="scss">
.commonDialog-container {
  width: 100%;
  box-sizing: border-box;
}
.titleBox {
  width: 100%;
  background: rgba(0, 82, 217, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}
.content {
  padding: 0 15px;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
