<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="content-list">

          <div class="notify-item">
            <div class="item-header">
              <span class="item-title">止盈止损通知</span>
              <div class="switch-box" :class="{ active: state.tpsl }" @click="toggle('tpsl')">
                <div class="switch-circle"></div>
              </div>
            </div>
            <div class="item-desc">当止盈止损委托触发或成交时，您将收到通知</div>
          </div>

          <div class="notify-item">
            <div class="item-header">
              <span class="item-title">市价委托成交通知</span>
              <div class="switch-box" :class="{ active: state.market }" @click="toggle('market')">
                <div class="switch-circle"></div>
              </div>
            </div>
            <div class="item-desc">当市价委托完全成交时，您将收到通知。极端情况下，通知可能会延迟</div>
          </div>

          <div class="notify-item">
            <div class="item-header">
              <span class="item-title">限价委托成交通知</span>
              <div class="switch-box" :class="{ active: state.limit }" @click="toggle('limit')">
                <div class="switch-circle"></div>
              </div>
            </div>
            <div class="item-desc">当限价委托完全成交时，您将收到通知</div>
          </div>

          <div class="notify-item">
            <div class="item-header">
              <span class="item-title">只减仓改撤单通知</span>
              <div class="switch-box" :class="{ active: state.reduce }" @click="toggle('reduce')">
                <div class="switch-circle"></div>
              </div>
            </div>
            <div class="item-desc">当只减仓委托被系统修改或撤单时，您将收到通知</div>
          </div>

          <div class="notify-item">
            <div class="item-header">
              <span class="item-title">资金费率通知</span>
              <div class="switch-box" :class="{ active: state.funding }" @click="toggle('funding')">
                <div class="switch-circle"></div>
              </div>
            </div>
            <div class="item-desc">
              当预估资金费率达到+/-{{ triggerValue }}%时，您将在结算前的30分钟收到通知
              <span class="red-link" @click="showTriggerSheet = true">调整触发值</span>
            </div>
          </div>

          <div class="safe-area-bottom"></div>
        </div>

        <TriggerValueSheet
          v-model:visible="showTriggerSheet"
          v-model="triggerValue"
          @confirm="onTriggerConfirm"
        />

      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, reactive } from 'vue'
import TriggerValueSheet from './TriggerValueSheet.vue'

const props = defineProps({
  visible: Boolean
})

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

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

// 内部开关状态
const state = reactive({
  tpsl: false,
  market: true,
  limit: false,
  reduce: true,
  funding: true
})

const toggle = (key) => {
  state[key] = !state[key]
}

// 资金费率弹窗逻辑
const showTriggerSheet = ref(false)
const triggerValue = ref('0.375')

const onTriggerConfirm = (val) => {
  triggerValue.value = val
  // 这里可以调用 API 保存设置
}
</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: 2100; /* 层级高于设置页(2000) */
}

.modal-panel {
  position: fixed; bottom: 0; left: 0; width: 100%;
  max-height: 85vh; /* 限制最大高度，大概占屏幕 85% */
  background: white; border-radius: 16px 16px 0 0;
  z-index: 2101; /* 比遮罩高 */
  display: flex; flex-direction: column;
}

/* 顶部灰色把手 */
.handle-bar-wrap {
  display: flex; justify-content: center; padding: 10px 0;
}
.handle-bar {
  width: 36px; height: 4px; background: #E0E0E0; border-radius: 2px;
}

/* 内容列表区域 */
.content-list {
  flex: 1; overflow-y: auto; padding: 10px 16px 20px 16px;
}

/* ================== 列表项样式 ================== */
.notify-item {
  margin-bottom: 24px;
}

.item-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}

.item-title {
  font-size: 16px; font-weight: 600; color: #333;
}

.item-desc {
  font-size: 13px; color: #888; line-height: 1.5;
  text-align: justify; /* 两端对齐更整齐 */
}

/* 红色链接 */
.red-link {
  color: #DF384C; margin-left: 5px; cursor: pointer;
}

/* 底部安全区适配 */
.safe-area-bottom { height: env(safe-area-inset-bottom); }

/* ================== 开关组件 (红色) ================== */
.switch-box {
  width: 50px; height: 30px; border-radius: 15px; background-color: #F5F5F5;
  position: relative; cursor: pointer; transition: background-color 0.3s;
}
.switch-circle {
  width: 26px; height: 26px; background: white; border-radius: 50%;
  position: absolute; top: 2px; left: 2px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.switch-box.active { background-color: #DF384C; } /* 红色激活态 */
.switch-box.active .switch-circle { transform: translateX(20px); }

/* ================== 动画效果 ================== */
.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 cubic-bezier(0.25, 0.8, 0.5, 1); }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%); }
</style>