<template>
  <div class="select-demo">
    <h1>TUISelect 选择器</h1>
    <p class="component-desc">当选项过多时，使用下拉菜单展示并选择内容。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="基础的单选选择器。"
      :code="basicCode"
    >
      <div class="demo-row">
        <TUISelect v-model="value1" placeholder="请选择">
          <TUIOption
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
        <span class="demo-value">选中值: {{ value1 || '无' }}</span>
      </div>
    </DemoBlock>

    <!-- Disabled -->
    <DemoBlock
      title="禁用状态"
      description="通过 disabled 属性禁用选择器。"
      :code="disabledCode"
    >
      <div class="demo-row">
        <TUISelect v-model="value2" disabled placeholder="禁用状态">
          <TUIOption
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
      </div>
    </DemoBlock>

    <!-- Clearable -->
    <DemoBlock
      title="可清空"
      description="设置 clearable 属性可以清空选中的值。"
      :code="clearableCode"
    >
      <div class="demo-row">
        <TUISelect v-model="value3" clearable placeholder="可清空选择">
          <TUIOption
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
        <span class="demo-value">选中值: {{ value3 || '无' }}</span>
      </div>
    </DemoBlock>

    <!-- Long List -->
    <DemoBlock
      title="长列表滚动定位"
      description="当选项较多时，下拉菜单会自动滚动到选中项的位置。"
      :code="longListCode"
    >
      <div class="demo-row">
        <TUISelect v-model="value4" placeholder="打开查看是否自动滚动到选中项">
          <TUIOption
            v-for="item in longOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
        <span class="demo-value">选中值: {{ value4 }} (第 35 项)</span>
      </div>
    </DemoBlock>

    <!-- Different Sizes -->
    <DemoBlock
      title="不同尺寸"
      description="通过 size 属性设置选择器的尺寸。"
      :code="sizeCode"
    >
      <div class="demo-row">
        <TUISelect v-model="value5" size="small" placeholder="小型">
          <TUIOption
            v-for="item in options.slice(0, 5)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
        <TUISelect v-model="value6" size="medium" placeholder="中型">
          <TUIOption
            v-for="item in options.slice(0, 5)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
        <TUISelect v-model="value7" size="large" placeholder="大型">
          <TUIOption
            v-for="item in options.slice(0, 5)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </TUISelect>
      </div>
    </DemoBlock>

    <!-- API Documentation -->
    <section class="api-section">
      <h2>API</h2>

      <div class="api-table-wrapper">
        <h3>Select Props</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">属性名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">类型</div>
            <div class="api-table-cell">默认值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">modelValue</div>
            <div class="api-table-cell">绑定值</div>
            <div class="api-table-cell">string | number | boolean | object | any[]</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">disabled</div>
            <div class="api-table-cell">是否禁用</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">placeholder</div>
            <div class="api-table-cell">占位符文本</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">size</div>
            <div class="api-table-cell">尺寸</div>
            <div class="api-table-cell enum-type" title="'small' | 'medium' | 'large'">enum</div>
            <div class="api-table-cell">'medium'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">clearable</div>
            <div class="api-table-cell">是否可清空</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">multiple</div>
            <div class="api-table-cell">是否多选</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>Option Props</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">属性名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">类型</div>
            <div class="api-table-cell">默认值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">value</div>
            <div class="api-table-cell">选项的值</div>
            <div class="api-table-cell">string | number | boolean | object</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">label</div>
            <div class="api-table-cell">选项的标签</div>
            <div class="api-table-cell">string | number</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">disabled</div>
            <div class="api-table-cell">是否禁用该选项</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>Events</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">事件名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">回调参数</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">update:modelValue</div>
            <div class="api-table-cell">值更新时触发</div>
            <div class="api-table-cell">(value: any)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">change</div>
            <div class="api-table-cell">值改变时触发</div>
            <div class="api-table-cell">(value: any)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">focus</div>
            <div class="api-table-cell">获得焦点时触发</div>
            <div class="api-table-cell">(event: FocusEvent)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">blur</div>
            <div class="api-table-cell">失去焦点时触发</div>
            <div class="api-table-cell">(event: FocusEvent)</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUISelect, TUIOption } from '../src/components';
import DemoBlock from './components/DemoBlock.vue';

const value1 = ref('');
const value2 = ref('option1');
const value3 = ref('');
const value4 = ref('option35');
const value5 = ref('');
const value6 = ref('');
const value7 = ref('');

const options = Array.from({ length: 10 }, (_, i) => ({
  value: `option${i + 1}`,
  label: `选项 ${i + 1}`,
}));

const longOptions = Array.from({ length: 100 }, (_, i) => ({
  value: `option${i + 1}`,
  label: `选项 ${i + 1} - ${String.fromCharCode(65 + (i % 26))}`,
}));

// Code examples
const basicCode = `<template>
  <TUISelect v-model="value" placeholder="请选择">
    <TUIOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </TUISelect>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
const options = [
  { value: 'option1', label: '选项 1' },
  { value: 'option2', label: '选项 2' },
  { value: 'option3', label: '选项 3' },
];
<\/script>`;

const disabledCode = `<template>
  <TUISelect v-model="value" disabled placeholder="禁用状态">
    <TUIOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </TUISelect>
</template>`;

const clearableCode = `<template>
  <TUISelect v-model="value" clearable placeholder="可清空选择">
    <TUIOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </TUISelect>
</template>`;

const longListCode = `<template>
  <TUISelect v-model="value" placeholder="请选择">
    <TUIOption
      v-for="item in longOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </TUISelect>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('option35');
const longOptions = Array.from({ length: 100 }, (_, i) => ({
  value: \`option\${i + 1}\`,
  label: \`选项 \${i + 1}\`,
}));
<\/script>`;

const sizeCode = `<template>
  <TUISelect v-model="value1" size="small" placeholder="小型">...</TUISelect>
  <TUISelect v-model="value2" size="medium" placeholder="中型">...</TUISelect>
  <TUISelect v-model="value3" size="large" placeholder="大型">...</TUISelect>
</template>`;
</script>

<style lang="scss" scoped>
@import './styles/demo-common.scss';

.demo-value {
  padding: 8px 16px;
  background: var(--bg-color-secondary);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-color-secondary);
}
</style>
