<template>
  <component :is="Teleport" to="body" v-if="type === 'old'">
    <div
      v-if="type === 'old'"
      v-bind="$attrs"
      class="common_dialog"
      :class="{ t_mask: showMask, t_mask2: showMask2 }"
      @click="ClickingBackground"
    >
      <div class="dialog_content" @click.stop>
        <i
          class="iconfont iconjiufuqianbaoicon08"
          v-if="!close"
          @click.stop="closePopup"
        ></i>
        <slot></slot>
      </div>
    </div>
  </component>
  <el-dialog
    v-if="type === 'element'"
    v-bind="elementDialogProps"
    :modelValue="visible"
    :modal="showMask"
    :custom-class="getCustomClass"
    :width="getWidth"
    @close="$emit('closePopup')"
    @closed="$emit('closed')"
    @opened="$emit('opened')"
  >
    <slot name="default"></slot>
    <template #title>
      <div class="el-dialog__title relative">
        <div
          :class="{
            'text-center': titleAlignCenter,
          }"
        >
          {{ elementDialogProps && elementDialogProps.title }}
        </div>
        <div class="absolute left-0 top-0">
          <slot name="titleLeft"></slot>
        </div>
      </div>
      <i
        class="iconchahao iconfont closeIcon cursor-pointer"
        @click="$emit('closePopup')"
      ></i>
    </template>
    <template #footer>
      <div
        v-if="btnConfig"
        :class="{
          'dialog-btns': btnConfig.type === 'noBorder',
          'dialog-withBorder-btns': btnConfig.type === 'withBorder',
        }"
      >
        <div v-if="btnConfig.type === 'withBorder'" class="btn-line"></div>
        <Button
          v-for="btn in btnConfig.btns"
          :key="btn.name"
          mode="elementBtn"
          size="large"
          :type="btn.type"
          :disabled="btn.disabled"
          :loading="btn.loading"
          @click="
            () => {
              btnConfig?.btnFunctions
                .find((i) => i.name === btn.name)!
                .click()
                .then((close) => {
                  close && $emit('closePopup');
                });
            }
          "
          >{{ btn.name }}</Button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElDialog } from "element-plus";
import { syButton as Button } from "cqk-sy-ui";
import {
  Teleport as teleport_,
  TeleportProps,
  VNodeProps,
  defineEmits,
  onMounted,
} from "vue";

import { computed } from "vue";

const Teleport = teleport_ as {
  new (): {
    $props: VNodeProps & TeleportProps;
  };
};

const props = withDefaults(
  defineProps<{
    showMask?: boolean;
    showMask2?: boolean;
    close?: boolean;
    type?: "old" | "element";
    visible?: boolean;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    elementDialogProps?: any;
    elementDialogSize?: "small" | "medium" | "big";
    noPadding?: boolean;
    titleAlignCenter?: boolean;
    btnConfig?: {
      type: "noBorder" | "withBorder";
      btns: {
        name: string;
        disabled?: boolean;
        loading?: boolean;
        type: "primary" | "default";
      }[];
      btnFunctions: {
        click: () => Promise<boolean>;
        name: string;
      }[];
    };
  }>(),
  {
    showMask2: false,
    showMask: false,
    close: false,
    titleAlignCenter: false,
    elementDialogSize: "small",
    type: "old",
    visible: false,
    noPadding: false,
  }
);

const getCustomClass = computed(() => {
  const classList = [] as string[];
  if (!props.noPadding) classList.push("element-dialog");
  else classList.push("element-dialog-noPadding");
  if (
    !props.elementDialogProps ||
    props.elementDialogProps?.title === "" ||
    props.elementDialogProps?.title === undefined
  )
    classList.push("element-dialog-noTitle");
  if (props.elementDialogProps && props.elementDialogProps.classes) {
    classList.push(...props.elementDialogProps.classes);
  }
  return classList.join(" ");
});

const getWidth = computed(() => {
  if (props.elementDialogProps && props.elementDialogProps.width) {
    return props.elementDialogProps.width;
  }
  switch (props.elementDialogSize) {
    case "big":
      return "940px";
    case "medium":
      return "600px";
    case "small":
      return "469px";
    default:
      return "";
  }
});

const emit = defineEmits([
  "ClickingBackground",
  "closePopup",
  "update:visible",
  "closed",
  "opened",
]);
const ClickingBackground = () => {
  emit("ClickingBackground");
};
const closePopup = () => {
  emit("closePopup");
};
</script>
<style lang="scss">
$px: 40px;

.element-dialog-noPadding {
  .el-dialog__body {
    padding: 0 !important;
  }
}

.element-dialog-noTitle {
  .el-dialog__body {
    padding-top: 0 !important;
  }
  .el-dialog__body {
    border-top: 0 !important;
  }
}

.element-dialog,
.element-dialog-noPadding.el-dialog {
  --el-dialog-border-radius: var(--sy-border-radius);
  .el-dialog__headerbtn {
    display: none !important;
  }
  top: 50vh;
  margin-top: 0 !important;
  transform: translateY(-50%);
  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18) !important;
  .el-dialog__header {
    box-sizing: content-box;
    height: 25px;
    line-height: 25px;
    padding-left: $px;
    padding-top: 15px;
    padding-bottom: 15px;
    .closeIcon {
      color: #b6b5ba;
      position: absolute;
      right: $px;
      transform: translateX(100%);
      top: 15px;
      font-size: 20px;
    }
    .el-dialog__title {
      height: 25px;
      line-height: 25px !important;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      padding-right: 0px;
    }
  }
  .el-dialog__body {
    padding-left: $px;
    padding-right: $px;
    padding-top: 38px;
    padding-bottom: 0px;
    border-top: 1px solid rgba(240, 241, 245, 1);
  }
  .el-dialog__footer {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: $px;
    padding-right: $px;
    padding-bottom: 38px;
    position: relative;
    .btn-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background-color: #e2e2e2;
    }
    .dialog-withBorder-btns {
      padding-top: 14px;
      margin-bottom: calc(14px - 38px);
    }
    .dialog-btns {
      padding-top: 38px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
<style scoped lang="scss">
.common_dialog {
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.t_mask {
  background: rgba(0, 0, 0, 0.1);
}
.t_mask2 {
  background-color: rgba(55, 55, 55, 0.6);
}
.dialog_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: left;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(61, 118, 249, 0.18);
  max-height: 80vh;
  .iconjiufuqianbaoicon08 {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>
