<template>
  <uni-popup
    ref="popupRef"
    type="bottom"
    background-color="transparent"
    mask-background-color="rgba(0, 0, 0, 0)"
    :safe-area="false"
    :is-mask-click="false"
  >
    <view class="photo-pick-drawer">
    <view class="photo-pick-close" @tap="emit('close')">
      <uni-icons type="closeempty" size="30" color="#8fa2ba" />
    </view>

    <text class="photo-pick-title">选择照片</text>

    <view class="photo-pick-card">
      <view class="photo-pick-plus">+</view>
      <text class="photo-pick-card-title">上传照片或视频素材</text>
      <text class="photo-pick-card-desc">
        选择后会自动进行清晰度、人脸数量和遮挡检测
      </text>
    </view>

    <view class="photo-pick-actions">
      <view class="photo-pick-action" hover-class="is-pressed" @tap="emit('camera')">
        拍照
      </view>
      <view class="photo-pick-action" hover-class="is-pressed" @tap="emit('album')">
        相册
      </view>
    </view>

    <text class="photo-pick-hint">建议使用半身照，避免墨镜、口罩、强逆光。</text>
    </view>
  </uni-popup>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";

const emit = defineEmits(["close", "camera", "album"]);
const popupRef = ref(null);

onMounted(async () => {
  await nextTick();
  popupRef.value?.open();
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
