<template>
  <div class="input-demo">
    <h1>TUIInput 输入框</h1>
    <p class="component-desc">通过鼠标或键盘输入字符。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="基础的输入框用法。"
      :code="basicCode"
    >
      <div class="demo-row">
        <TUIInput v-model="basicText" placeholder="请输入内容" type="number" :maxLength="6" style="width: 240px;" />
        <span class="demo-value">当前值: {{ basicText || '无' }}</span>
      </div>
    </DemoBlock>

    <!-- Mobile with Label -->
    <DemoBlock
      title="移动端带标签（label 属性）"
      description="移动端场景下使用 label 属性显示标签文字。"
      :code="mobileLabelCode"
    >
      <div class="demo-mobile-container">
        <TUIInput
          v-model="mobileText1"
          label="标签文字"
          placeholder="请输入文字"
        />
      </div>
    </DemoBlock>

    <!-- Mobile with Label Required -->
    <DemoBlock
      title="移动端必填标签"
      description="使用 required 属性显示必填标识。"
      :code="mobileLabelRequiredCode"
    >
      <div class="demo-mobile-container">
        <TUIInput
          v-model="mobileText2"
          label="标签文字"
          placeholder="请输入文字"
          required
        />
      </div>
    </DemoBlock>

    <!-- Mobile with Label Slot -->
    <DemoBlock
      title="移动端自定义标签（label 插槽）"
      description="使用 label 插槽自定义标签内容。"
      :code="mobileLabelSlotCode"
    >
      <div class="demo-mobile-container">
        <TUIInput
          v-model="mobileText3"
          placeholder="请输入文字"
        >
          <template #label>
            <div class="custom-label">自定义标签</div>
          </template>
        </TUIInput>
      </div>
    </DemoBlock>

    <!-- Mobile with Label Width -->
    <DemoBlock
      title="移动端标签宽度"
      description="使用 labelWidth 属性设置标签的固定宽度，支持数字（px）或字符串。"
      :code="mobileLabelWidthCode"
    >
      <div class="demo-mobile-container">
        <TUIInput
          v-model="mobileText4"
          label="用户名"
          placeholder="请输入用户名"
          :labelWidth="80"
        />
        <TUIInput
          v-model="mobileText5"
          label="手机号码"
          placeholder="请输入手机号码"
          labelWidth="80px"
        />
        <TUIInput
          v-model="mobileText6"
          label="详细地址"
          placeholder="请输入详细地址"
          labelWidth="6em"
        />
      </div>
    </DemoBlock>

    <!-- Mobile with Label Style -->
    <DemoBlock
      title="移动端标签样式"
      description="使用 labelStyle 属性自定义标签样式，支持字符串或对象格式。"
      :code="mobileLabelStyleCode"
    >
      <div class="demo-mobile-container">
        <TUIInput
          v-model="mobileText7"
          label="加粗标签"
          placeholder="请输入内容"
          :labelWidth="80"
          :labelStyle="{ fontWeight: 'bold', color: '#1890ff' }"
        />
        <TUIInput
          v-model="mobileText8"
          label="自定义"
          placeholder="请输入内容"
          :labelWidth="80"
          labelStyle="font-size: 14px; color: #52c41a;"
        />
      </div>
    </DemoBlock>

    <!-- Disabled -->
    <DemoBlock
      title="禁用状态"
      description="通过 disabled 属性禁用输入框。"
      :code="disabledCode"
    >
      <div class="demo-row">
        <TUIInput v-model="disabledText" disabled placeholder="禁用状态" style="width: 240px;" />
      </div>
    </DemoBlock>

    <!-- Clearable -->
    <DemoBlock
      title="可清空"
      description="设置 clearable 属性可以清空输入内容。"
      :code="clearableCode"
    >
      <div class="demo-row">
        <TUIInput v-model="clearableText" clearable placeholder="可清除文本" style="width: 240px;" />
        <span class="demo-value">当前值: {{ clearableText || '无' }}</span>
      </div>
    </DemoBlock>

    <!-- With Icons -->
    <DemoBlock
      title="带图标"
      description="使用 prefix-icon 和 suffix-icon 属性或插槽添加图标。"
      :code="iconCode"
    >
      <div class="demo-row">
        <TUIInput v-model="iconText1" placeholder="搜索内容" prefix-icon="IconSearchChat" style="width: 240px;" />
        <TUIInput v-model="iconText2" placeholder="选择日期" suffix-icon="IconCalendarChat" style="width: 240px;" />
      </div>
    </DemoBlock>

    <!-- Different Sizes -->
    <DemoBlock
      title="不同尺寸"
      description="通过 size 属性设置输入框的尺寸。"
      :code="sizeCode"
    >
      <div class="demo-row">
        <TUIInput v-model="sizeSmall" size="small" placeholder="小型输入框" style="width: 200px;" />
        <TUIInput v-model="sizeMedium" size="medium" placeholder="中型输入框" style="width: 200px;" />
        <TUIInput v-model="sizeLarge" size="large" placeholder="大型输入框" style="width: 200px;" />
      </div>
    </DemoBlock>

    <!-- Password -->
    <DemoBlock
      title="密码输入框"
      description="设置 type='password' 和 show-password 属性可以切换密码的显示状态。"
      :code="passwordCode"
    >
      <div class="demo-row">
        <TUIInput
          v-model="password"
          type="password"
          placeholder="请输入密码"
          show-password
          style="width: 240px;"
        />
        <span class="demo-value">密码长度: {{ password.length }}</span>
      </div>
    </DemoBlock>

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

      <div class="api-table-wrapper">
        <h3>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</div>
            <div class="api-table-cell">-</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">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">type</div>
            <div class="api-table-cell">输入框类型</div>
            <div class="api-table-cell enum-type" title="'text' | 'password' | 'number' | 'textarea'">enum</div>
            <div class="api-table-cell">'text'</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">showPassword</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">prefixIcon</div>
            <div class="api-table-cell">前缀图标</div>
            <div class="api-table-cell">string | Component</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">suffixIcon</div>
            <div class="api-table-cell">后缀图标</div>
            <div class="api-table-cell">string | Component</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">maxLength</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">autofocus</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">label</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">labelWidth</div>
            <div class="api-table-cell">标签宽度（移动端），数字类型单位为 px</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">labelStyle</div>
            <div class="api-table-cell">标签自定义样式（移动端）</div>
            <div class="api-table-cell">string | object</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">required</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: string | number)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">input</div>
            <div class="api-table-cell">输入时触发</div>
            <div class="api-table-cell">(value: string | number)</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 class="api-table-row">
            <div class="api-table-cell">change</div>
            <div class="api-table-cell">值改变时触发</div>
            <div class="api-table-cell">(value: string | number)</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>Slots</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">prefix</div>
            <div class="api-table-cell">前缀内容</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">suffix</div>
            <div class="api-table-cell">后缀内容</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">-</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

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

const basicText = ref('');
const disabledText = ref('禁用状态示例');
const clearableText = ref('可清除的内容');
const iconText1 = ref('');
const iconText2 = ref('');
const sizeSmall = ref('');
const sizeMedium = ref('');
const sizeLarge = ref('');
const password = ref('');
const mobileText1 = ref('');
const mobileText2 = ref('');
const mobileText3 = ref('');
const mobileText4 = ref('');
const mobileText5 = ref('');
const mobileText6 = ref('');
const mobileText7 = ref('');
const mobileText8 = ref('');

// Code examples
const basicCode = `<template>
  <TUIInput v-model="value" placeholder="请输入内容" />
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
<\/script>`;

const mobileLabelCode = `<template>
  <TUIInput
    v-model="value"
    label="标签文字"
    placeholder="请输入文字"
  />
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
<\/script>`;

const mobileLabelRequiredCode = `<template>
  <TUIInput
    v-model="value"
    label="标签文字"
    placeholder="请输入文字"
    required
  />
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
<\/script>`;

const mobileLabelSlotCode = `<template>
  <TUIInput v-model="value" placeholder="请输入文字">
    <template #label>
      <div class="custom-label">自定义标签</div>
    </template>
  </TUIInput>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
<\/script>`;

const mobileLabelWidthCode = `<template>
  <!-- 数字类型（单位为 px） -->
  <TUIInput
    v-model="value1"
    label="用户名"
    placeholder="请输入用户名"
    :labelWidth="80"
  />
  <!-- 字符串类型（带单位） -->
  <TUIInput
    v-model="value2"
    label="手机号码"
    placeholder="请输入手机号码"
    labelWidth="80px"
  />
  <!-- 使用 em 单位 -->
  <TUIInput
    v-model="value3"
    label="详细地址"
    placeholder="请输入详细地址"
    labelWidth="6em"
  />
</template>

<script setup>
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
<\/script>`;

const mobileLabelStyleCode = `<template>
  <!-- 对象格式 -->
  <TUIInput
    v-model="value1"
    label="加粗标签"
    placeholder="请输入内容"
    :labelWidth="80"
    :labelStyle="{ fontWeight: 'bold', color: '#1890ff' }"
  />
  <!-- 字符串格式 -->
  <TUIInput
    v-model="value2"
    label="自定义"
    placeholder="请输入内容"
    :labelWidth="80"
    labelStyle="font-size: 14px; color: #52c41a;"
  />
</template>

<script setup>
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
<\/script>`;

const disabledCode = `<template>
  <TUIInput v-model="value" disabled placeholder="禁用状态" />
</template>`;

const clearableCode = `<template>
  <TUIInput v-model="value" clearable placeholder="可清除文本" />
</template>`;

const iconCode = `<template>
  <TUIInput v-model="value1" placeholder="搜索内容" prefix-icon="IconSearchChat" />
  <TUIInput v-model="value2" placeholder="选择日期" suffix-icon="IconCalendarChat" />
</template>`;

const sizeCode = `<template>
  <TUIInput v-model="value1" size="small" placeholder="小型输入框" />
  <TUIInput v-model="value2" size="medium" placeholder="中型输入框" />
  <TUIInput v-model="value3" size="large" placeholder="大型输入框" />
</template>`;

const passwordCode = `<template>
  <TUIInput
    v-model="password"
    type="password"
    placeholder="请输入密码"
    show-password
  />
</template>

<script setup>
import { ref } from 'vue';
const password = ref('');
<\/script>`;
</script>

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

.demo-mobile-container {
  width: 100%;
  max-width: 375px;
  background-color: var(--bg-color-page, #f5f5f5);
  border-radius: 8px;
  overflow: hidden;
}

.custom-label {
  font-size: 16px;
  color: var(--text-color-primary);
  font-weight: 500;
}
</style>
