<template>
  <div style="pointer-events: none" :class="props.parentClass">
    <el-dialog :top="props.top" style="pointer-events: auto !important;" :modal="false" draggable v-model="props.modelValue" :destroy-on-close="true"
      :show-close="false" :close-on-click-modal="false" :width="width"  :custom-class="coumClass">
      <template #title>
        <div class="my-header">
          <span class="imgIcon"> {{props.title}}</span>
          <el-icon color="#ffffff" size="20px" @click="closeDialog" style="cursor: pointer;">
            <Close />
          </el-icon>
        </div>
      </template>
      <div class="contant-dragger-dialog mt5">
        <slot></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import { defineProps, defineEmits } from "vue";
const emits = defineEmits(["update:modelValue", "close"]);
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  parentClass: String,
  top: {
    type: String,
    default: "110px"
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: "50%"
  },
  coumClass: {
  type: String,
  default: "zdy-model-dialog"
 }

});

// 關閉
function closeDialog(params) {
  emits("update:modelValue", false);
  emits("close", false);
}
</script>

<style lang="scss" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  font-size: 16px;
  color: #fff;
  padding: 0 0 0 30px;
  box-sizing: border-box;
  background: url("~@/assets/images/bg44.png") no-repeat -14px -9px;
  background-size: 268px;
}
.contant-dragger-dialog {
  min-height: 80px;
  overflow: hidden;
  padding: 0px 8px;
  box-sizing: border-box;
  color: #fff;
}
</style>

<style>
.zdy-model-dialog {
  background: url("~@/assets/images/bg46.png") no-repeat center center;
  background-size: 100% 100%;
  padding: 8px 10px;
  box-sizing: border-box;
  pointer-events: auto !important;
  height:calc(100% - 300px);
  overflow: auto;

}
.zdy-model-dialog .el-dialog__header {
  padding: 0 !important;
}
:v-deep .el-dialog__header{
  padding: 0 !important;
}
:v-deep .el-dialog__body{
  padding: 0 !important;
}
.zdy-model-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
