<template>
  <uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{width: '100%', height: '100vh', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999}">
    <view class="recording-popup">
      <view class="recording-wave">
        <!-- 波形动画 -->
        <view class="wave-animation"></view>
      </view>
      <view class="recording-text">
        {{ isSlideToText ? '松开发送 转文字' : '松开发送' }}
      </view>
      <view class="recording-cancel" @click="handleCancel">
        取消
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  isSlideToText: Boolean
})

const emit = defineEmits(['cancel'])

const popupRef = ref(null)

// 打开弹窗
const open = () => {
  if (popupRef.value) {
    popupRef.value.open()
  }
}

// 关闭弹窗
const close = () => {
  if (popupRef.value) {
    popupRef.value.close()
  }
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
  close()
}

// 暴露方法
defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
/* 录音弹窗样式 */
.recording-popup {
  width: 100% !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 40px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.recording-wave {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(76, 217, 100, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.wave-animation {
  width: 160px;
  height: 160px;
  /* 这里可以添加波形动画 */
  background-image: url('/static/wave_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.recording-text {
  font-size: 20px;
  margin-bottom: 40px;
}

.recording-cancel {
  font-size: 18px;
  color: #CCCCCC;
  margin-top: 20px;
}
</style>