<template>
  <view>
    <view
      class="action-sheet-mask"
      :class="{ 'action-sheet-mask-show': show }"
      @click.stop="handleClose"
      @touchmove.prevent
    ></view>
    <view class="action-sheet pb-safe" :class="{ 'action-sheet-show': show }" @touchmove.prevent>
      <template v-if="!lazyRender || show">
        <view class="action-sheet-header" v-if="title">
          <text class="action-sheet-title">{{ title }}</text>
          <view
            class="i-carbon-close absolute right-[32rpx]"
            v-if="showClose"
            @click.stop="handleClose"
          ></view>
        </view>
        <slot name="title"></slot>
        <scroll-view class="action-sheet-content" :scroll-y="true">
          <slot></slot>
        </scroll-view>
        <view class="action-sheet-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </view>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{
  show: boolean
  title?: string
  lazyRender?: boolean
  showClose?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
}>()

const handleClose = () => {
  emit('update:show', false)
}
</script>

<style lang="scss" scoped>
.action-sheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  &-show {
    opacity: 1;
    visibility: visible;
  }
}

.action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  transform: translateY(100%);
  transition: all 0.3s ease;
  z-index: 1000;
  border-radius: 24rpx 24rpx 0 0;
  display: flex;
  flex-direction: column;

  &-show {
    transform: translateY(0);
  }

  &-header {
    padding: 24rpx 32rpx 30rpx;
    text-align: center;
    position: relative;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #303030;
  }

  &-content {
    max-height: 55vh;
    min-height: 500rpx;
    flex: 1 1 auto;
  }

  // &-footer {
  //   padding: 20rpx 32rpx;
  //   border-top: 2rpx solid #f5f5f5;
  //   box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225, 225, 225, 0.2);
  // }
}
</style>
