<template>
  <el-dialog
    v-model="drawer"
    class="lj-dialog"
    :class="globalStore.assemblySize"
    v-bind="{ ...drawerDefineProp, ...$attrs }"
    :key="drawerKey"
    @closed="closed"
  >
    <template #header v-if="slots.header">
      <slot name="header" />
    </template>
    <template #default>
      <slot />
    </template>
    <template #footer v-if="slots.footer">
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="LjDialog">
import { ref, useSlots, watch } from "vue";
import { useGlobalStore } from "@/stores/modules/global";

// 接收父组件参数并设置默认值
interface LjDialogProps {
  // /**
  //  * @description 遮罩的自定义类名
  //  */
  // modalClass?: string;
  // // /**
  // //  * @description 布局参数
  // //  */
  // // layout?: any;
  closed?: () => void;
}
const props = withDefaults(defineProps<LjDialogProps>(), {});
const globalStore = useGlobalStore();
const drawerKey = ref(0);

/**
 * @description 抽屉默认属性
 */
const drawerDefineProp = {
  draggable: true,
  overflow: true
};

const drawer = ref(false);
const slots = useSlots();
function show(refresh = false) {
  refresh && drawerKey.value++;
  drawer.value = true;
}
function hide() {
  drawer.value = false;
}
function confirmClick() {
  // ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
  //   .then(() => {
  //     drawer.value = false;
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
}

watch(
  () => drawer.value,
  val => {
    if (!val) {
      drawerKey.value++;
    }
  }
);

defineExpose({ show, hide });
</script>

<style lang="scss">
.lj-dialog {
  border-radius: $br-md;
  overflow: hidden;
  .el-dialog__body {
    padding: $space-b2 $space-b3 $space-b3 $space-b3;
  }
  .el-dialog__headerbtn {
    top: 0;
  }

  &.small {
    .el-dialog__header {
      padding: 12px 20px;
    }
    .el-dialog__headerbtn {
      width: 44px;
      height: 44px;
    }
    .el-dialog__body {
      padding: $space-b2 $space-b3 $space-b2 $space-b3;
    }
  }
  &.is-selector {
    .el-dialog__header {
      background: $color-primary-500;
      color: $color-gray-1;
      padding: 12px $space-b2;
    }
    .el-dialog__headerbtn {
      width: 44px;
      height: 44px;

      .el-icon {
        position: relative;
        color: $color-gray-1;
        z-index: 1;
        font-size: 20px;
      }
    }
    .el-dialog__body {
      padding: 0;
      padding-bottom: $space-b1;
    }
    .longjoe-fold-layout-main {
      .table-search {
        padding: 0 $space-b2 0 $space-b1;
        box-shadow: unset;
      }
      .table-main {
        margin-top: 0;
        padding: 0 $space-b2 0 $space-b1;
      }
    }
    // .filter {
    //   padding: 0 $space-b1 $space-b1 $space-b2;
    // }

    .lj-header-menu {
      box-shadow: $shadow-0-down;
      margin-bottom: $space-b2;
    }
  }

  &.find-dialog {
    .el-dialog__header {
      padding: 0 20px;
    }
  }
}
</style>
