<script setup lang="ts">
import { ref } from 'vue'

const rows = ref([
  { id: 'WF-20260722-01', symbol: '005930', name: '삼성전자', reason: '손절가(-3.5%) 하향 이탈', target_qty: '120 주', executed_qty: '120 주', status: 'PASS' },
  { id: 'WF-20260722-02', symbol: '000660', name: 'SK하이닉스', reason: '익절 목표가(+8.0%) 도달', target_qty: '50 주', executed_qty: '50 주', status: 'PASS' },
  { id: 'WF-20260722-03', symbol: '035420', name: 'NAVER', reason: 'RSI(14) 과매도 진입 경고', target_qty: '30 주', executed_qty: '0 주', status: 'LIMIT' }
])
</script>

<template>
  <!-- Type 1: Single Grid View (Sell Waterfall Execution History) -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background: #F4F6F9;">
    <!-- Top Filter Header -->
    <div style="background: #34495E; color: white; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-weight: bold;"><i class="ti ti-waterfall me-1"></i> SCR-03: 단일 Sell Priority Table 매도 Waterfall 실행 내역 (Type 1)</span>
      <div>
        <button style="background: #2C3E50; color: white; border: 1px solid #5D7D9A; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer; margin-right: 8px;">
          <span class="hotkey-badge">F3</span>Waterfall 이력 조회
        </button>
        <button style="background: #27AE60; color: white; border: none; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer;">
          <span class="hotkey-badge">F7</span>엑셀 다운로드
        </button>
      </div>
    </div>

    <!-- Grid Body -->
    <div style="flex: 1; padding: 12px; overflow: auto;">
      <table style="width: 100%; border-collapse: collapse; background: white; border: 1px solid #CBD5E1;">
        <thead>
          <tr style="background: #E2E8F0; color: #2C3E50;">
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">Waterfall ID</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">종목코드</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">종목명</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">매도 실행 사유 (Sell Priority)</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">목표 수량</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">체결 수량</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">게이트 상태</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id" style="border-bottom: 1px solid #ECF0F1;">
            <td style="padding: 8px; border: 1px solid #CBD5E1; font-family: monospace;">{{ row.id }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; font-family: monospace;">{{ row.symbol }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; font-weight: bold;">{{ row.name }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; color: #C0392B; font-weight: bold;">{{ row.reason }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">{{ row.target_qty }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold;">{{ row.executed_qty }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">
              <span
                :style="{
                  backgroundColor: row.status === 'PASS' ? '#E8F8F5' : '#FEF9E7',
                  color: row.status === 'PASS' ? '#117864' : '#B9770E',
                  border: '1px solid ' + (row.status === 'PASS' ? '#2ECC71' : '#F39C12')
                }"
                style="padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">
                {{ row.status }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Bottom Footer Row -->
    <div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
      <span>매도 Waterfall 트리거: 3건 | 성공 체결: 2건 | 대기/제한: 1건</span>
      <span style="color: #2ECC71;">단일 Sell Priority Table Waterfall 준수</span>
    </div>
  </div>
</template>
