<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">资金费率触发值设置</div>

        <div class="panel-content">
          <div class="input-wrapper">
            <input
              type="text"
              class="custom-input"
              v-model="localValue"
              placeholder="0.000"
            />
            <span class="suffix">触发值(%)</span>
          </div>

          <p class="desc-text">
            资金费率为正，表做多仓位;资金费率为负，表做空仓位。您将在对应方向仓位的资金费率达到触发值时收到通知。
          </p>

          <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,
  modelValue: [String, Number]
})
const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm'])

const localValue = ref(props.modelValue)

watch(() => props.visible, (val) => {
  if (val) localValue.value = props.modelValue
})

const close = () => emit('update:visible', false)
const handleConfirm = () => {
  emit('update:modelValue', localValue.value)
  emit('confirm', localValue.value)
  close()
}
</script>

<style scoped>
.modal-mask {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: 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 10px; }
.panel-content { padding: 0 16px; }

.input-wrapper {
  background: #F7F8FA; border-radius: 4px; height: 48px;
  display: flex; align-items: center; padding: 0 12px; margin-bottom: 12px;
}
.custom-input { flex: 1; background: transparent; border: none; font-size: 16px; outline: none; }
.suffix { color: #999; font-size: 14px; }
.desc-text { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 30px; text-align: justify; }

.confirm-btn {
  width: 100%; height: 48px; background: #DF384C; color: white;
  border: none; border-radius: 24px; font-size: 16px; font-weight: 600;
}
.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>