<template>
  <el-dialog
    v-model="drawer"
    class="lj-dialog"
    :class="[globalStore.assemblySize, ifoverflow ? 'lj-dialog-overflow' : '']"
    v-bind="{ ...drawerDefineProp, ...$attrs }"
    @closed="closed"
  >
    <template #header>
      <slot name="header">
        <div class="flx-1">
          <span class="text-h5-b">{{ title }}</span>
        </div>
      </slot>
    </template>
    <template #default>
      <template v-if="Object.keys(dlStyle).length">
        <div :style="dlStyle">
          <slot />
        </div>
      </template>
      <template v-else>
        <slot />
      </template>
    </template>
    <template #footer v-if="slots.footer || confirmed">
      <slot name="footer" v-if="slots.footer"></slot>
      <template v-if="confirmed">
        <el-button type="primary" @click="confirmClick">确定</el-button>
        <el-button @click="hide">取消</el-button>
      </template>
    </template>
  </el-dialog>
</template>

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

// 接收父组件参数并设置默认值
interface LjDialogProps {
  // /**
  //  * @description 遮罩的自定义类名
  //  */
  // modalClass?: string;
  // // /**
  // //  * @description 布局参数
  // //  */
  // // layout?: any;
  title?: string;
  closed?: () => void;
  confirmed?: () => void;
  height?: string | number;
  show?: boolean; // moadl开关
  /**
   * @description 是否超出隐藏
   */
  ifoverflow?: boolean;
}
const props = withDefaults(defineProps<LjDialogProps>(), {
  ifoverflow: false
});
const globalStore = useGlobalStore();

/**
 * @description 高度样式
 */
const dlStyle = computed(() => {
  let style: any = {};
  if (!props.height) return style;
  if (typeof props.height == "number") {
    style.height = `${props.height}px`;
  } else {
    if (props?.height.indexOf("%") > -1 || props.height?.indexOf("px") > -1 || props.height?.indexOf("vh") > -1) {
      style.height = props.height;
    } else {
      style.height = `${props.height}px`;
    }
  }
  return style;
});
/**
 * @description 抽屉默认属性
 */
const drawerDefineProp = {
  draggable: true,
  overflow: true,
  destroyOnClose: true
};

const state = reactive({
  drawer: props.show
});
const { drawer } = toRefs(state);

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

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

<style lang="scss">
.lj-dialog {
  border-radius: $br-md;
  &.is-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .el-dialog__body {
    flex: 1;
    padding: $space-b2 $space-b3 $space-b3 $space-b3;
  }
  &.lj-dialog-overflow {
    overflow: hidden;
    .el-dialog__body {
      overflow: hidden;
    }
  }
  .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 {
      padding: 12px $space-b2;
      color: $color-black;
      background: $color-primary-100;
      height: 15px;
    }
    .el-dialog__headerbtn {
      width: 44px;
      height: 44px;
      .el-icon {
        position: relative;
        z-index: 1;
        font-size: 20px;
        color: $color-black;
      }
    }
    .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 {
        padding: 0 $space-b2 0 $space-b1;
        margin-top: 0;
      }
    }

    // .filter {
    //   padding: 0 $space-b1 $space-b1 $space-b2;
    // }
    .lj-header-menu {
      margin-bottom: $space-b2;
      box-shadow: $shadow-0-down;
    }
  }
  &.find-dialog {
    .el-dialog__header {
      padding: 0 20px;
    }
  }
}
</style>
