<template>
  <div class="settings-page">
    <div class="nav-bar">
      <div class="back-icon" @click="$router.back()">
        <div>
          <VanIcon size="18" name="arrow-left"/>
        </div>
      </div>
      <div class="nav-title">交易设置</div>
      <div class="nav-right"></div>
    </div>

    <div class="tabs-header">
      <div
        class="tab-item"
        :class="{ active: currentTab === 'mode' }"
        @click="currentTab = 'mode'"
      >
        交易模式
        <div class="active-line" v-if="currentTab === 'mode'"></div>
      </div>
      <div
        class="tab-item"
        :class="{ active: currentTab === 'pref' }"
        @click="currentTab = 'pref'"
      >
        偏好
        <div class="active-line" v-if="currentTab === 'pref'"></div>
      </div>
      <div
        class="tab-item"
        :class="{ active: currentTab === 'ui' }"
        @click="currentTab = 'ui'"
      >
        界面
        <div class="active-line" v-if="currentTab === 'ui'"></div>
      </div>
    </div>

    <div class="content-scroll">

      <div v-if="currentTab === 'mode'" class="tab-content fade-in">
        <div class="list-item">
          <div class="item-label">账户模式</div>
          <div class="item-value">合约模式</div>
        </div>

        <div class="list-item clickable">
          <div class="item-label">仓位模式</div>
          <div class="item-value" @click="showModal1 = true">{{selectedLabel1}}
            <div style="margin: 3px 0 0 2px;">
              <VanIcon size="16" name="arrow"/>
            </div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">合约交易单位</div>
          <div class="item-value">数量</div>
        </div>

        <div class="list-item">
          <div class="item-label">期权交易单位</div>
          <div class="item-value">币</div>
        </div>

        <div class="list-item">
          <div class="item-label">稳定币偏好</div>
          <div class="item-value">USDT</div>
        </div>
      </div>

      <div v-if="currentTab === 'pref'" class="tab-content fade-in">
        <div class="list-item clickable">
          <div class="item-label">交易通知</div>
          <div class="item-value" @click="showNotifyPopup = true">
            <div class="arrow1" style="margin: 3px 0 0 2px;">
              <VanIcon size="16" name="arrow"/>
            </div>
<!--            <span class="arrow">›</span>-->
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">点击K线带入价格</div>
          <div class="switch-box" :class="{ active: prefState.klinePrice }" @click="toggle('klinePrice')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">点击订单表带入数量</div>
          <div class="switch-box" :class="{ active: prefState.orderBookQty }" @click="toggle('orderBookQty')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="group-title">二次下单确认</div>

        <div class="list-item">
          <div class="item-label">下单确认</div>
          <div class="switch-box" :class="{ active: prefState.orderConfirm }" @click="toggle('orderConfirm')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">限价单</div>
          <div class="switch-box" :class="{ active: prefState.limitOrder }" @click="toggle('limitOrder')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">市价单</div>
          <div class="switch-box" :class="{ active: prefState.marketOrder }" @click="toggle('marketOrder')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">限价止盈止损订单</div>
          <div class="switch-box" :class="{ active: prefState.limitTPSL }" @click="toggle('limitTPSL')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">市价止盈止损</div>
          <div class="switch-box" :class="{ active: prefState.marketTPSL }" @click="toggle('marketTPSL')">
            <div class="switch-circle"></div>
          </div>
        </div>

        <div class="list-item">
          <div class="item-label">杠杆交易自动借还款</div>
          <div class="switch-box" :class="{ active: prefState.autoBorrow }" @click="toggle('autoBorrow')">
            <div class="switch-circle"></div>
          </div>
        </div>
      </div>

      <div v-if="currentTab === 'ui'" class="tab-content fade-in">
        <div class="list-item clickable">
          <div class="item-label">主题模式</div>
          <div class="item-value text-gray" @click="showThemeModal = true">{{ currentThemeLabel }}
             <div class="arrow1" style="margin: 3px 0 0 2px;">
              <VanIcon size="16" name="arrow"/>
            </div>
          </div>
        </div>

        <div class="list-item clickable">
          <div class="item-label">颜色设置</div>
          <div class="item-value text-gray" @click="showColorModal = true">
            <span v-if="currentColor === 'green_up'">
                 <span class="green">绿涨</span><span class="red">红跌</span> <span class="green">↑</span><span class="red">↓</span>
            </span>
              <span v-else>
                 <span class="red">红涨</span><span class="green">绿跌</span> <span class="red">↑</span><span class="green">↓</span>
              </span>
             <div class="arrow1" style="margin: 3px 0 0 2px;">
              <VanIcon size="16" name="arrow"/>
            </div>
          </div>
        </div>

        <div class="layout-section">
          <div class="section-label">交易页K线</div>
          <div class="layout-grid">

            <div class="layout-card" :class="{ selected: uiState.klineLayout === 'pull' }" @click="uiState.klineLayout = 'pull'">
              <div class="preview-box">
                <img src="../../../../assets/icon/bitcoin/xialadaka.svg" alt="">
<!--                <div class="draw-kline top-part">-->
<!--                  <div class="draw-candle red"></div>-->
<!--                  <div class="draw-candle green"></div>-->
<!--                </div>-->
<!--                <div class="draw-bar bottom-part">-->
<!--                  <div class="draw-btn red"></div>-->
<!--                  <div class="draw-btn green"></div>-->
<!--                </div>-->
              </div>
              <div class="card-text">下拉打开</div>
            </div>

            <div class="layout-card" :class="{ selected: uiState.klineLayout === 'bottom' }" @click="uiState.klineLayout = 'bottom'">
              <div class="preview-box">
                <div class="draw-bar top-part compact">
                  <div class="draw-btn red"></div>
                  <div class="draw-btn green"></div>
                </div>
                <div class="draw-kline bottom-part">
                  <div class="draw-candle red"></div>
                  <div class="draw-candle green"></div>
                </div>
              </div>
              <div class="card-text">底部显示</div>
            </div>

            <div class="layout-card" :class="{ selected: uiState.klineLayout === 'none' }" @click="uiState.klineLayout = 'none'">
              <div class="preview-box row-mode">
                 <div class="draw-col left">
                   <div class="draw-btn red full"></div>
                 </div>
                 <div class="draw-col right"></div>
              </div>
              <div class="card-text">不显示</div>
            </div>
          </div>
        </div>

        <div class="layout-section">
          <div class="section-label">下单布局</div>
          <div class="layout-grid two-col">

            <div class="layout-card" :class="{ selected: uiState.orderLayout === 'left' }" @click="uiState.orderLayout = 'left'">
              <div class="preview-box row-mode">
                <div class="draw-col left selected-border">
                  <div class="draw-btn green full"></div>
                  <div class="draw-btn red full"></div>
                </div>
                <div class="draw-col right"></div>
              </div>
              <div class="card-text">左侧下单</div>
            </div>

            <div class="layout-card" :class="{ selected: uiState.orderLayout === 'right' }" @click="uiState.orderLayout = 'right'">
              <div class="preview-box row-mode">
                <div class="draw-col left"></div>
                <div class="draw-col right selected-border">
                   <div class="draw-btn green full"></div>
                   <div class="draw-btn red full"></div>
                </div>
              </div>
              <div class="card-text">右侧下单</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div>
      <FundingOptions
          v-model:visible="showModal1"
          :selected-id="currentId1"
          @confirm="handleConfirm1"
      ></FundingOptions>
    </div>

    <SelectionSheet
      v-model:visible="showThemeModal"
      title="主题模式"
      :options="themeOptions"
      v-model="currentTheme"
      @confirm="onThemeConfirm"
    />

    <SelectionSheet
      v-model:visible="showColorModal"
      title="颜色设置"
      :options="colorOptions"
      v-model="currentColor"
      @confirm="onColorConfirm"
    >
      <template #option="{ item }">
        <div v-if="item.value === 'green_up'">
          <span class="green">绿涨</span><span class="red">红跌</span>
          <span class="green icon-arrow">↑</span><span class="red icon-arrow">↓</span>
        </div>
        <div v-else>
           <span class="red">红涨</span><span class="green">绿跌</span>
           <span class="red icon-arrow">↑</span><span class="green icon-arrow">↓</span>
        </div>
      </template>
    </SelectionSheet>
    <div>
      <TradeNotificationPopup v-model:visible="showNotifyPopup" />
    </div>
  </div>
</template>

<script setup>
        import {ref, reactive,computed,} from 'vue'
        import { Icon as VanIcon } from 'vant';
        import FundingOptions from './components/PositionMode.vue'
        import SelectionSheet from './components/SelectionSheet.vue' // 引入上面的组件
        import TradeNotificationPopup from './components/TradeNotificationPopup.vue'
        const showNotifyPopup = ref(false)
                // --- 状态管理 ---
        const showThemeModal = ref(false)
        const showColorModal = ref(false)

        const currentTheme = ref('system') // 默认值
        const currentColor = ref('green_up') // 默认值

        // --- 数据配置 ---
        const themeOptions = [
          { label: '跟随系统', value: 'system' },
          { label: '日间模式', value: 'light' },
          { label: '夜间模式', value: 'dark' },
        ]

        const colorOptions = [
          { label: '绿涨红跌', value: 'green_up' },
          { label: '红涨绿跌', value: 'red_up' },
        ]

        // --- 计算属性：用于在列表显示当前选中的文字 ---
        const currentThemeLabel = computed(() => {
          const item = themeOptions.find(opt => opt.value === currentTheme.value)
          return item ? item.label : ''
        })

        // --- 回调函数 ---
        const onThemeConfirm = (val) => {
          console.log('主题已确认修改为:', val)
          // 这里可以调用 API 或者修改全局 CSS 变量
        }

        const onColorConfirm = (val) => {
          console.log('颜色已确认修改为:', val)
          // 这里处理红绿涨跌的全局逻辑
        }

        /*账户模式*/
        const showModal1 = ref(false);

        // 定义状态用于存储
        const currentId1 = ref(1); // 默认选中第一个
        const selectedLabel1 = ref('单向持仓'); // 默认值
        const selectedUnit1 = ref('%');      // 默认值

        // 回调函数：子组件选中后触发
        const handleConfirm1 = (item) => {
          // console.log('子组件返回的对象:', item);

          // 保存ID用于下次打开时回显高亮
          currentId1.value = item.id;
          // const a = item.label.slice(-2)

          // 核心需求：在这里将值“拆开”为两个字符串
          selectedLabel1.value = item.label.slice(0); // 字符串1: "涨跌幅"
          selectedUnit1.value = item.unit;   // 字符串2: "%"
        };

        // 状态管理
        const currentTab = ref('mode') // 默认显示偏好

        // 偏好设置数据 (对应图1)
        const prefState = reactive({
          klinePrice: false,
          orderBookQty: true, // 默认开启
          orderConfirm: false,
          limitOrder: false,
          marketOrder: true,
          limitTPSL: false,
          marketTPSL: true,
          autoBorrow: false
        })

        // 界面设置数据 (对应图3)
        const uiState = reactive({
          klineLayout: 'pull', // pull | bottom | none
          orderLayout: 'left', // left | right
        })

      // 切换开关
      const toggle = (key) => {
        prefState[key] = !prefState[key]
      }
</script>

<style scoped>

/* 定义红绿颜色，用于颜色设置弹窗 */
.green { color: #2EBD85; }
.red { color: #E54755; }
.icon-arrow { font-weight: bold; margin-left: 2px; }
/* ================== 全局布局 ================== */
.settings-page {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: #fff; z-index: 2000;
  display: flex; flex-direction: column;
}

.content-scroll {
  flex: 1; overflow-y: auto; padding-bottom: 40px;
}

/* 简单的淡入动画 */
.fade-in {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================== 顶部导航 & Tab ================== */
.nav-bar {
  height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;
  background: #fff;
  margin-top: 12px;
}
.nav-title { font-size: 17px; font-weight: 600; color: #333; }

.tabs-header {
  display: flex; padding-left: 16px; margin-top: 5px;
  border-bottom: 1px solid #f9f9f9;
}
.tab-item {
  margin-right: 24px; font-size: 16px; color: #999;
  position: relative; padding-bottom: 10px; cursor: pointer;
  transition: all 0.2s;
}
.tab-item.active { color: #333; font-weight: bold; font-size: 19px; }
.active-line {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; background-color: #333; border-radius: 2px;
}

/* ================== 列表通用样式 ================== */
.tab-content { padding: 0 16px; }
.list-item {
  display: flex; justify-content: space-between; align-items: center;
  height: 56px; font-size: 15px; color: #333;
}
.item-value { display: flex; align-items: center; }
.text-gray { color: #999; font-size: 14px; }
.arrow { color: #ccc; margin-left: 8px; font-size: 18px; font-family: serif; position: relative; top: -1px; }

.group-title {
  margin-top: 24px; margin-bottom: 8px; font-size: 14px; color: #333; font-weight: 600;
}

/* ================== 开关组件 (Switch) ================== */
.switch-box {
  width: 50px; height: 30px; border-radius: 15px; background-color: #F0F0F0;
  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.2);
}
/* 激活状态：使用你截图中的红色 */
.switch-box.active { background-color: #E54755; }
.switch-box.active .switch-circle { transform: translateX(20px); }

/* ================== 界面布局选择 (CSS 绘图核心) ================== */
.layout-section { margin-top: 30px; }
.section-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }

.layout-grid { display: flex; gap: 12px; }
.layout-grid.two-col { justify-content: flex-start; }

.layout-card {
  width: 100px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
}
.card-text { margin-top: 8px; font-size: 12px; color: #999; }
.layout-card.selected .card-text { color: #E54755; }

/* 预览盒子 */
.preview-box {
  width: 100%; height: 120px; border-radius: 8px; border: 1px solid #eee;
  padding: 6px; background: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  box-sizing: border-box; overflow: hidden;
}
/* 选中状态：红框 */
.layout-card.selected .preview-box { border: 1px solid #E54755; background: rgba(229, 71, 85, 0.02); }

/* --- CSS 绘图元件 --- */

/* 1. K线图部分 (灰色背景 + 红绿柱子) */
.draw-kline {
  background: #F5F7FA; border-radius: 4px; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.draw-candle { width: 4px; border-radius: 1px; }
.draw-candle.red { height: 60%; background: #E54755; margin-top: 10%; }
.draw-candle.green { height: 40%; background: #2EBD85; margin-bottom: 10%; }

/* 2. 操作区部分 (灰色背景 + 红绿按钮条) */
.draw-bar {
  background: #F5F7FA; border-radius: 4px; padding: 4px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
}
.draw-btn { height: 4px; width: 60%; border-radius: 2px; }
.draw-btn.red { background: #E54755; }
.draw-btn.green { background: #2EBD85; width: 80%; }
.draw-btn.full { width: 100%; height: 6px; margin-bottom: 4px; }

/* 上下结构高度调整 */
.top-part { height: 60%; }
.bottom-part { height: 35%; }
.compact { height: 45%; } /* 底部布局时中间部分变矮 */

/* 3. 左右布局模式 */
.row-mode { flex-direction: row; gap: 4px; height: 100%; }
.draw-col { flex: 1; background: #F5F7FA; border-radius: 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px; box-sizing: border-box; }
.selected-border { border: 1px solid #1989fa; } /* 模拟选中边框 */

/* 细节微调 */
.layout-card:hover .preview-box { border-color: #ccc; }
.layout-card.selected:hover .preview-box { border-color: #E54755; }

</style>