<template>
  <view class="Layer-custom">
    <!-- 遮罩层 -->
    <view v-if="visible" class="layer-mask" @click="onMaskClick"></view>
    <!-- 底部弹出层 -->
    <view v-if="visible" class="layer-popup">
      <view class="layer-panel">
        <!-- 头部插槽或默认头部 -->
        <slot name="header">
          <view class="layer-header" v-if="!customHeader">
            <text v-if="showCancel" @click="onCancel" class="layer-cancel"
              >取消</text
            >
            <text v-if="title" class="layer-title">{{ title }}</text>
            <text v-if="showConfirm" @click="onConfirm" class="layer-confirm"
              >确定</text
            >
          </view>
        </slot>
        <!-- 内容插槽 -->
        <view class="layer-content">
          <slot></slot>
        </view>
        <!-- 底部插槽 -->
        <slot name="footer"></slot>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch, defineEmits, defineProps } from "vue";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  title: { type: String, default: "" },
  showCancel: { type: Boolean, default: true },
  showConfirm: { type: Boolean, default: true },
  maskClosable: { type: Boolean, default: true },
  customHeader: { type: Boolean, default: false },
});
const emit = defineEmits([
  "update:modelValue",
  "confirm",
  "cancel",
  "open",
  "close",
]);

const visible = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
    if (val) emit("open");
    else emit("close");
  }
);

function open() {
  visible.value = true;
  emit("update:modelValue", true);
  emit("open");
}
function close() {
  visible.value = false;
  emit("update:modelValue", false);
  emit("close");
}
function onConfirm() {
  emit("confirm");
  close();
}
function onCancel() {
  emit("cancel");
  close();
}
function onMaskClick() {
  if (props.maskClosable) {
    onCancel();
  }
}

defineExpose({ open, close });
</script>
<style lang="less" scoped>
.layer-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3999;
}
.layer-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: layer-up 0.3s;
}
@keyframes layer-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.layer-panel {
  width: 100vw;
  min-height: 20vh;
  background: #f6f8fa;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 140rpx;
  box-sizing: border-box;
  background: #f6f8fa;
  padding: 0 32rpx;
  .layer-cancel {
    color: #6f6d67;
    font-size: 28rpx;
    width: 136rpx;
    height: 74rpx;
    border-radius: 20rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .layer-confirm {
    color: #ffffff;
    font-size: 28rpx;
    width: 136rpx;
    height: 74rpx;
    border-radius: 20rpx;
    background: #d3a358;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .layer-title {
    color: #222;
    font-size: 32rpx;
    font-weight: bold;
    flex: 1;
    text-align: center;
  }
}
.layer-content {
  flex: 1;
  padding: 32rpx;
  box-sizing: border-box;
}
</style>