<template>
  <page-container title="Input 输入框">
    <template #content>
      需要用户输入表单域内容时。
      <br />
      提供组合型输入框，带搜索的输入框，还可以进行大小选择。
    </template>
    <h-card :bordered="false">
      <h-row :gutter="32">
        <h-col :sm="24" :md="12">
          <h5>基本使用</h5>
          <div>
            <h-input v-model:value="state.value" placeholder="Basic usage" />
          </div>
        </h-col>
        <h-col :sm="24" :md="12">
          <h5>搜索</h5>
          <h-input-search
            v-model:value="state.value"
            placeholder="input search text"
            style="width: 100%"
            @search="handleSearch"
          />
        </h-col>
      </h-row>
      <h-row :gutter="32" style="margin-top: 24px">
        <h-col :sm="24" :md="12">
          <h5>文本域</h5>
          <h-textarea v-model:value="state.value" placeholder="Basic usage" :rows="4" />
        </h-col>
        <h-col :sm="24" :md="12">
          <h5>密码框</h5>
          <h-input-password v-model:value="state.value" placeholder="input password" />
        </h-col>
      </h-row>
      <h-row :gutter="32" style="margin-top: 24px">
        <h-col :sm="24" :md="12">
          <h5>前置/后置标签</h5>
          <div>
            <div style="margin-bottom: 16px">
              <h-input addon-before="Http://" addon-after=".com" v-model:value="state.value1" />
            </div>
            <div style="margin-bottom: 16px">
              <h-input v-model:value="state.value2">
                <template #addonBefore>
                  <h-select v-model:value="state.value3" style="width: 90px">
                    <h-select-option value="Http://">Http://</h-select-option>
                    <h-select-option value="Https://">Https://</h-select-option>
                  </h-select>
                </template>
                <template #addonAfter>
                  <h-select v-model:value="state.value4" style="width: 80px">
                    <h-select-option value=".com">.com</h-select-option>
                    <h-select-option value=".jp">.jp</h-select-option>
                    <h-select-option value=".cn">.cn</h-select-option>
                    <h-select-option value=".org">.org</h-select-option>
                  </h-select>
                </template>
              </h-input>
            </div>
            <div style="margin-bottom: 16px">
              <h-input v-model:value="state.value5">
                <template #addonAfter>
                  <setting-outlined />
                </template>
              </h-input>
            </div>
          </div>
        </h-col>
        <h-col :sm="24" :md="12">
          <h5>搜索框 loading</h5>
          <h-input-search
            v-model:value="state.value"
            placeholder="input search loading deault"
            loading
          />
          <br />
          <br />
          <h-input-search
            v-model:value="state.value"
            placeholder="input search loading with enterButton"
            loading
            enter-button
          />
        </h-col>
      </h-row>
    </h-card>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { SettingOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  name: 'InputExample',
  setup() {
    const state = reactive({
      value: undefined,
      value1: 'mysite',
      value2: 'mysite',
      value3: 'Http://',
      value4: '.com',
      value5: 'mysite',
    });

    const handleSearch = (value: string) => {
      console.log('or use this.value', value, state.value);
    };

    return {
      state,

      handleSearch,
    };
  },
  components: {
    SettingOutlined,
  },
});
</script>

<style lang="less" scoped>
h5 {
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.2em;
}
</style>
