<script setup lang="ts">
import { ref } from 'vue'
import QuantLabel from '../components/QuantLabel.vue'
import QuantInput from '../components/QuantInput.vue'
import QuantDatePicker from '../components/QuantDatePicker.vue'
import QuantComboBox from '../components/QuantComboBox.vue'
import QuantCheckBox from '../components/QuantCheckBox.vue'
import QuantRadio from '../components/QuantRadio.vue'
import QuantTextArea from '../components/QuantTextArea.vue'
import QuantAutoComplete from '../components/QuantAutoComplete.vue'
import QuantStatusChip from '../components/QuantStatusChip.vue'

const codeVal = ref('005930')
const dateVal = ref('20260722')
const currencyVal = ref('340500')
const comboVal = ref('ACTIVE')
const checkVal = ref(true)
const radioVal = ref('A')
const textVal = ref('더존 회계시스템 기준 6대 표준 입력 컴포넌트 템플릿 설정')
const autoVal = ref('')

const comboOptions = [
  { label: 'ACTIVE (운영)', value: 'ACTIVE' },
  { label: 'LIMIT (제한)', value: 'LIMIT' },
  { label: 'ARCHIVED (보관)', value: 'ARCHIVED' }
]

const radioOptions = [
  { label: '유형 A (표준)', value: 'A' },
  { label: '유형 B (확장)', value: 'B' }
]

const autoSuggestions = [
  { label: '삼성전자', value: '005930' },
  { label: 'SK하이닉스', value: '000660' },
  { label: 'NAVER', value: '035420' }
]
</script>

<template>
  <!-- Type 4: Standardized High-Density Input Components Template View -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background: #F4F6F9; overflow-y: auto; padding: 16px;">
    <div style="background: #34495E; color: white; padding: 10px 16px; font-weight: bold; border-radius: 4px 4px 0 0; display: flex; justify-content: space-between;">
      <span><i class="ti ti-forms me-1"></i> SCR-07: 더존 ERP 표준 컴포넌트 & 입력 UX 마스크 통합 템플릿 (Type 4)</span>
      <div>
        <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>

    <!-- High-Density Form Grid -->
    <div style="background: white; border: 1px solid #CBD5E1; border-top: none; padding: 16px; border-radius: 0 0 4px 4px;">
      <h4 style="margin-top: 0; color: #2C3E50; border-bottom: 2px solid #2C3E50; padding-bottom: 6px;">
        표준 입력 컴포넌트 마스크 및 기본 CRUD 입력 UX 규격
      </h4>

      <table style="width: 100%; border-collapse: collapse; margin-top: 12px;">
        <tbody>
          <tr>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="종목 코드" required />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantInput v-model="codeVal" placeholder="코드 입력" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="수집 영업일자" required />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantDatePicker v-model="dateVal" />
            </td>
          </tr>

          <tr>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="통화 금액(원)" required />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantInput v-model="currencyVal" type="currency" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="상태 선택" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantComboBox v-model="comboVal" :options="comboOptions" />
            </td>
          </tr>

          <tr>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="체크박스 옵션" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantCheckBox v-model="checkVal" label="Anti-Late Entry Gate 활성화" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="라디오 선택" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantRadio v-model="radioVal" name="typeGroup" :options="radioOptions" />
            </td>
          </tr>

          <tr>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="Auto Complete" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantAutoComplete v-model="autoVal" :suggestions="autoSuggestions" placeholder="종목명 자동완성..." />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="상태 칩 가드" />
            </td>
            <td style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantStatusChip type="PASS" label="PASS (정상)" />
            </td>
          </tr>

          <tr>
            <td style="padding: 8px; border: 1px solid #CBD5E1; background: #F8FAFC;">
              <QuantLabel text="상세 비고 내용" />
            </td>
            <td colspan="3" style="padding: 8px; border: 1px solid #CBD5E1;">
              <QuantTextArea v-model="textVal" :rows="3" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
