<template>
  <view v-if="visible" class="drawer" @click="handleMaskClick">
    <view class="drawer__content" :style="{ width }" @click.stop>
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  visible: Boolean,
  width: { type: String, default: '600rpx' }
})

const emit = defineEmits(['close'])

function handleMaskClick() {
  emit('close')
}
</script>

<style lang="scss" scoped>
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 999;

  &__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: $bg-secondary;
    border-left: 1rpx solid $border-color;
    animation: slideIn 0.3s ease;
    display: flex;
    flex-direction: column;
  }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
</style>
