<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="visible" class="modal-mask" @click="close"></div>
    </Transition>

    <Transition name="slide-up">
      <div v-if="visible" class="modal-panel" @click.stop>
        <div class="handle-bar-wrap">
          <div class="handle-bar"></div>
        </div>

        <div class="panel-title">{{ title }}</div>

        <div class="options-list">
          <div 
            v-for="item in options" 
            :key="item.value" 
            class="option-item"
            @click="selectItem(item.value)"
          >
            <div class="option-label" :class="{ active: tempValue === item.value }">
              <slot name="option" :item="item">
                {{ item.label }}
              </slot>
            </div>

            <div v-if="tempValue === item.value" class="check-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
                <circle cx="12" cy="12" r="10" fill="#E54755"/>
                <path d="M7 12L10 15L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="btn-area">
          <button class="confirm-btn" @click="handleConfirm">确认</button>
        </div>
        
        <div class="safe-area-bottom"></div>
      </div>
    </Transition>
  </Teleport>
</template>

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

const props = defineProps({
  visible: Boolean,
  title: String,
  options: Array,   // 格式: [{ label: 'xxx', value: 'xxx' }]
  modelValue: [String, Number] // 当前选中的值
})

const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm'])

// 临时选中的值（还没点确认前，不改变父组件的值）
const tempValue = ref(props.modelValue)

// 监听弹窗打开，每次打开时重置 tempValue 为父组件当前的值
watch(() => props.visible, (val) => {
  if (val) {
    tempValue.value = props.modelValue
  }
})

const selectItem = (val) => {
  tempValue.value = val
}

const handleConfirm = () => {
  emit('update:modelValue', tempValue.value) // 更新父组件 v-model
  emit('confirm', tempValue.value) // 触发确认事件，带回值
  close()
}

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

<style scoped>
.modal-mask {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); z-index: 3000;
}
.modal-panel {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background: white; border-radius: 16px 16px 0 0;
  z-index: 3001; padding-bottom: 20px;
}

.handle-bar-wrap { display: flex; justify-content: center; padding-top: 10px; }
.handle-bar { width: 36px; height: 4px; background: #E0E0E0; border-radius: 2px; }

.panel-title {
  font-size: 18px; font-weight: bold; color: #333;
  padding: 20px 16px;
}

.options-list { padding: 0 16px; margin-bottom: 20px; }

.option-item {
  display: flex; justify-content: space-between; align-items: center;
  height: 54px; cursor: pointer;
}

.option-label {
  font-size: 16px; color: #333; flex: 1;
  /* 选中时文字加粗 */
}
.option-label.active { font-weight: 600; }

.btn-area { padding: 0 16px; }
.confirm-btn {
  width: 100%; height: 48px;
  background-color: #E54755; color: white;
  border: none; border-radius: 24px;
  font-size: 16px; font-weight: 600;
}
.confirm-btn:active { opacity: 0.9; }

.safe-area-bottom { height: env(safe-area-inset-bottom); }

/* 动画 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s; }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
</style>