<template>
  <el-dialog
    :dialogHeight="dialogHeight"
    :title="dialogTitle"
    class="dialog min-w-70"
    v-model="dialogVisible"
    append-to-body
    :modal="dialogModal"
    :fullscreen="fullscreen"
    :close-on-click-modal="dialogClickModalClose"
    :draggable="dialogDraggable"
    :show-close="false"
    :width="dialogWidth"
    :align-center="dialogAlignCenter"
    :center="dialogContentCenter"
    @open="open"
    @close="close"
  >
    <template #header>
      <div class="flex justify-between items-content">
        <div class="titleClass">{{ dialogTitle }}</div>
        <div class="icon-content">
          <!-- <el-icon class="single-uploader__icon text-[12px]">
              <i-ep-minus v-if="fullscreen" />
              <i-ep-plus v-else />
            </el-icon>-->
          <div :title="!fullscreen ? '全屏' : '還原'">
            <svg-icon
              class="icon-item-content"
              v-if="showExpand"
              @click="zoom"
              :icon-class="fullscreen ? 'fullscreen-exit' : 'fullscreen'"
            />
          </div>
          <div title="關閉">
            <el-icon
              v-if="showClose"
              @click="close"
              title="關閉"
              class="single-uploader__icon icon-item-content"
            >
              <i-ep-close />
            </el-icon>
          </div>
        </div>
      </div>
    </template>
    <div :style="{ height: dialogBodyHeight }" class="overflow-auto">
      <slot></slot>
    </div>
    <template #footer v-if="dialogFooterBtn">
      <el-button type="primary" @click="SaveSubmit">確 定</el-button>
      <el-button @click="CloseSubmit">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 【接口】接受傳參字段
interface IProps {
  // 是否顯示 Dialog
  visible: boolean;
  // 對話框的標題
  dialogTitle?: string;
  // 內(nèi)容區(qū)域高度
  dialogHeight?: string;
  // 對話框的寬度
  dialogWidth?: string;
  // 是否需要遮罩層
  dialogModal?: boolean;
  // 是否水平垂直對齊對話框
  dialogAlignCenter?: boolean;
  // 是否讓 Dialog 的 header 和 footer 部分居中排列
  dialogContentCenter?: boolean;
  // 是否可以通過點擊 modal 關閉 Dialog
  dialogClickModalClose?: boolean;
  // 為 Dialog 啟用可拖拽功能
  dialogDraggable?: boolean;
  // 是否顯示底部按鈕
  dialogFooterBtn?: boolean;
  // 是否顯示全屏按鈕
  showExpand?: boolean;
  // 是否顯示關閉按鈕
  showClose?: boolean;
}

// 初始化默認參數(shù)
const props = withDefaults(defineProps<IProps>(), {
  dialogTitle: "默認標題",
  dialogWidth: "40%",
  dialogHeight: "auto",
  dialogModal: true,
  dialogAlignCenter: false,
  dialogContentCenter: false,
  dialogClickModalClose: false,
  dialogDraggable: false,
  dialogFooterBtn: true,
  showExpand: false,
  showClose: true,
});

const emit = defineEmits([
  "save",
  "cancellation",
  "open",
  "close",
  "zoom",
  "update:visible",
]);

const dialogVisible = useVModel(props, "visible", emit);
let fullscreen = ref(false);
const dialogBodyHeight = ref<string | number>(); // 初始值為字符串類型

// watch監(jiān)聽
watch(
  [() => props.visible, () => props.dialogHeight, () => props.dialogFooterBtn],
  () => {
    nextTick(() => {
      menuDialogZoom();
    });
  },
  { deep: true, immediate: true }
);

// 保存提交回調(diào)函數(shù)
const SaveSubmit = () => {
  emit("save"); //emit方法供父級組件調(diào)用
};

// 取消保存回調(diào)函數(shù)
const CloseSubmit = () => {
  emit("cancellation"); //emit方法供父級組件調(diào)用
};

// 打開事件回調(diào)函數(shù)
const open = () => {
  emit("open"); //emit方法供父級組件調(diào)用
};

// 關閉事件回調(diào)函數(shù)(當顯示頭部關閉按鈕時需調(diào)用該回調(diào)函數(shù)方法 -> dialogShowClose = true 反之)
const close = () => {
  emit("close"); //emit方法供父級組件調(diào)用
};

// 縮放彈窗
const zoom = () => {
  fullscreen.value = !fullscreen.value;
  menuDialogZoom();
  console.log(fullscreen.value);
  emit("zoom", fullscreen.value); //emit方法供父級組件調(diào)用
};

/* 分配權限縮放彈窗 */
const menuDialogZoom = () => {
  if (props.visible && fullscreen.value && props.dialogFooterBtn) {
    dialogBodyHeight.value = "calc(100vh - 120px)";
  } else if (props.visible && fullscreen.value && !props.dialogFooterBtn) {
    dialogBodyHeight.value = "calc(100vh - 80px)";
  } else {
    dialogBodyHeight.value = props.dialogHeight;
  }
};
</script>

<style scoped>
.titleClass {
  font-weight: bold;
}

.icon-content {
  display: flex;
  align-items: center;
}

.icon-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.icon-item-content:nth-child(1) {
  margin-right: 10px;
}

.icon-item-content:hover {
  color: #1f6feb;
  cursor: pointer;
}

.single-uploader__icon {
  font-size: 18px;
}
</style>

<Dialog
	dialogHeight="350px"
	v-model:visible="menuDialogVisible"
	:dialogTitle="'【' + checkedRole.name + '】權限分配'"
	:dialogDraggable="true"
	dialogWidth="30%"
	@close="menuDialogVisible = false"
	@save="handleRoleMenuSubmit"
	@cancellation="menuDialogVisible = false"
>
	內(nèi)容區(qū)域
</Dialog>

let menuDialogVisible = ref(false);

<template #header>
  <!-- 省略部分代碼，詳見完整代碼示例 -->
</template>

const zoom = () => {
  fullscreen.value = !fullscreen.value;
  menuDialogZoom();
  emit("zoom", fullscreen.value);
};

const menuDialogZoom = () => {
  // 省略部分代碼，詳見完整代碼示例
};