<template>
  <!-- Teleport 确保弹窗挂载到 body，层级最高 -->
  <Teleport to="body">
    <!-- 1. 遮罩层 -->
    <Transition name="fade">
      <div v-if="visible" class="modal-mask" @click="handleClose"></div>
    </Transition>

    <!-- 2. 弹窗面板 -->
    <Transition name="slide-up">
      <div v-if="visible" class="modal-panel" @click.stop>

        <!-- 顶部小横条 -->
        <div class="panel-handle-wrap">
          <div class="panel-handle"></div>
        </div>

        <div class="panel-title">常用功能</div>

        <!-- 九宫格菜单 -->
        <div class="grid-container">
          <div
            v-for="(item, index) in menuItems"
            :key="index"
            class="grid-item"
            @click="handleItemClick(item)"
          >
            <div class="icon-box">
             <component :is="item.icon" class="grid-icon-svg" />
            </div>
            <span class="label">{{ item.name }}</span>
          </div>
        </div>

        <div class="safe-area-bottom"></div>
      </div>
    </Transition>
    <TradeRules
    v-model:visible="showRules"
    />
  </Teleport>
</template>

<script setup>
import {toRef, watch} from 'vue'
import { useRouter } from 'vue-router'
import { ref, defineAsyncComponent } from 'vue';
// 引入
import TradeRules from  './GeneralLevel2/TradeRules.vue';
import { useBodyScrollLock } from '@/composables/useBodyScrollLock' // 2. 引入 Hook
import shezhi from '@/views/bitcoin/components/Icons/shezhi.vue'
import jilu from '@/views/bitcoin/components/Icons/jilu.vue'
import jisuan from '@/views/bitcoin/components/Icons/jisuan.vue'
import feilv from '@/views/bitcoin/components/Icons/feilv.vue'
import huazhuan from '@/views/bitcoin/components/Icons/huazhuan.vue'
import jiaoyi from '@/views/bitcoin/components/Icons/jiaoyi.vue'
import guizhe from '@/views/bitcoin/components/Icons/guizhe.vue'
import yuyanqiehuan from '@/views/bitcoin/components/Icons/yuyanqiehuan.vue'

// 控制显示的变量
const showRules = ref(false);

// 1. 接收父组件 (TradeLayout) 传来的 visible 状态
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
useBodyScrollLock(toRef(props, 'visible'))
// 2. 定义事件，用于通知父组件修改 visible
const emit = defineEmits(['update:visible'])

const router = useRouter()

// --- 关闭逻辑 ---
const handleClose = () => {
  // 通知父组件把 visible 设为 false
  // 这样 TradeLayout 里的 showFunctions 就会变成 false
  emit('update:visible', false)
}

// --- 点击菜单项逻辑 ---
const handleItemClick = (item) => {
  // 1. 先关闭弹窗
  // handleClose()

  // 2. 再跳转路由
  // 注意：根据我们定好的路由表，这里跳转会离开 TradeLayout，
  // 进入全屏的设置页/计算器页，这是符合预期的。
  setTimeout(() => {
    if (item.name === '交易设置') {
      router.push({ name: 'TradeSettings' })
    } else if (item.name === '交易规则') {
      showRules.value = true
    } else if (item.name === '计算器') {
      router.push({ name: 'calculator' })
    }else if(item.name === '语言切换'){
       router.push({ name: "LanguageSwitch" })

    }else {
      console.log('点击了其他:', item.name)
    }
  }, 200) // 稍微延迟一点点，让关闭动画看起来更自然（可选）
}

// --- 图标加载 ---
// const getIconPath = (iconName) => {
//   try {
//     return require(`../../../assets/icon/bitcoin/${iconName}`)
//   } catch (e) {
//     return ''
//   }
// }

const menuItems = [
  { name: '交易设置', icon: shezhi },
  { name: '交易记录', icon: jilu },
  { name: '计算器', icon: jisuan },
  { name: '费率', icon: feilv },
  { name: '资金划转', icon: huazhuan },
  { name: 'OTC交易', icon: jiaoyi },
  { name: '交易规则', icon: guizhe },
  {name: '语言切换', icon: yuyanqiehuan },
]
</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: 2000; /* 保证层级够高 */
}

/* 弹窗面板 */
.modal-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px; /* 限制最大宽度，适配桌面端 */
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 10px 0 0 0;
  z-index: 2001; /* 比遮罩层高 */
}

/* 把手装饰 */
.panel-handle-wrap {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.panel-handle {
  width: 36px;
  height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
}

/* 标题 */
.panel-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 0 20px 20px 20px;
}

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

/* --- 动画相关 --- */
/* 淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 底部滑入滑出 */
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.3s ease;
}
.slide-up-enter-from, .slide-up-leave-to {
  transform: translate(-50%, 100%);
}

/* --- Grid 布局 --- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 25px;
  padding: 0 10px 20px 10px;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* 添加点击反馈效果 */
  active {
    opacity: 0.7;
  }
}
.icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

/* 【核心修改 4】：新增 SVG 样式控制 */
.grid-icon-svg {
  width: 100%;
  height: 100%;
  /* 如果你的 SVG 内部没有写死颜色，这里可以控制颜色 */
   fill: #333;
}
.label {
  font-size: 12px;
  color: #666;
  text-align: center;
}
</style>