<template>
  <div>
    <h1>Input输入框</h1>
    <p class="fbg-text">通过鼠标或键盘输入字符</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseInputStr">
      <el-input v-model="data" :autocomplete="autocompleteFun" placeholder="请输入"/>
    </demo>
    <h3 class="fbg-title">密码输入框</h3>
    <demo :code="passwordInputStr">
      <el-input v-model="passwordData" type="password" placeholder="请输入密码"/>
    </demo>
    <h3 class="fbg-title">尺寸</h3>
    <demo :code="sizeInputStr">
      <el-input placeholder="请输入" size="lg"/>
      <el-input placeholder="请输入" class="input-margin"/>
      <el-input placeholder="请输入" size="sm" class="input-margin"/>
    </demo>
    <h3 class="fbg-title">禁用</h3>
    <demo :code="disabledInputStr">
      <el-input placeholder="请输入" disabled/>
    </demo>
    <h3 class="fbg-title">可自适应文本高度的文本域</h3>
    <p class="fbg-text">通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。</p>
    <demo :code="textareaInputStr">
      <el-input type="textarea" autosize placeholder="请输入"/>
    </demo>
    <h3 class="fbg-title">限制可输入字符长度</h3>
    <demo :code="maxlengthInputStr">
      <el-input :maxlength="3" placeholder="请输入"/>
      <el-input type="textarea" :maxlength="3" placeholder="请输入" class="input-margin"/>
    </demo>
    <h3 class="fbg-title">图标</h3>
    <demo :code="iconInputStr">
      <el-input icon="search" placeholder="请输入"/>
    </demo>
    <h3 class="fbg-title">可清除</h3>
    <demo :code="clearableInputStr">
      <el-input ref="test" clearable placeholder="请输入"/>
    </demo>
    <h3 class="fbg-title">复合输入框</h3>
    <demo :code="complexInputStr">
      <el-input ref="test" clearable v-model="text" placeholder="请输入">
        <el-select v-model="selectValue" style="width: 90px;" slot="selection">
          <el-option :value="1" label="测试1"/> 
          <el-option :value="2" label="测试2"/> 
        </el-select>
      </el-input>
    </demo>
    <h3 class="fbg-title">自动提示输入框</h3>
    <demo :code="autocompleteStr">
      <el-autocomplete ref="test01" :fetch-suggestions="querySearch" @select="handleSelect" clearable v-model="text" placeholder="请输入" />
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>类型</td>
          <td>string</td>
          <td>text | textarea | password</td>
          <td>text</td>
        </tr>
        <tr>
          <td>disbaled</td>
          <td>禁用状态</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>size</td>
          <td>文本框大小（仅限type='text'类型）</td>
          <td>string</td>
          <td>lg | md | sm</td>
          <td>md</td>
        </tr>
        <tr>
          <td>maxlength</td>
          <td>可输入字符长度</td>
          <td>number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>autosize</td>
          <td>自动改变输入框大小（仅限type='textarea'类型）</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>clearable</td>
          <td>是否显示清除按钮</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名称</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>blur</td>
          <td>失焦</td>
          <td>--</td>
        </tr>
        <tr>
          <td>focus</td>
          <td>聚焦</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>blur</td>
          <td>失焦事件</td>
          <td>(event: Event)</td>
        </tr>
        <tr>
          <td>focus</td>
          <td>聚焦事件</td>
          <td>(event: Event)</td>
        </tr>
        <tr>
          <td>input</td>
          <td>输入事件</td>
          <td>(value: string | number)</td>
        </tr>
        <tr>
          <td>change</td>
          <td>内容改变事件</td>
          <td>(value: string | number)</td>
        </tr>
        <tr>
          <td>clear</td>
          <td>清除事件</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      passwordData: '',
      selectValue: 1,
      text: '',
      baseInputStr: `
      <el-input v-model="data" placeholder="请输入"/>`,
      passwordInputStr: `
      <el-input v-model="passwordData" type="password" placeholder="请输入密码"/>`,
      sizeInputStr: `
      <el-input placeholder="请输入" size="lg" />
      <el-input placeholder="请输入" />
      <el-input placeholder="请输入" size="sm" />`,
      iconInputStr: `
      <el-input placeholder="请输入" icon="search"/>`,
      disabledInputStr: `
      <el-input placeholder="请输入" disabled/>`,
      textareaInputStr: `
      <el-input type="textarea" autosize placeholder="请输入" />`,
      maxlengthInputStr: `
      <el-input :maxlength="3" placeholder="请输入"/>
      <el-input type="textarea" :maxlength="3" placeholder="请输入"/>`,
      clearableInputStr: `
      <el-input clearable placeholder="请输入"/>`,
      complexInputStr: `
        <el-input ref="test" clearable placeholder="请输入">
          <el-select :value="1" style="width: 90px;" slot="selection">
            <el-option :value="1" label="测试"/> 
          </el-select>
        </el-input>
      `,
      autocompleteStr: `
        <el-autocomplete  :fetch-suggestions="querySearch" clearable @select="handleSelect" v-model="text" placeholder="请输入" />
        <script>
          export default {
            data() {
              return {
                text: ''
              }
            },
            methods: {
              querySearch(value) {
                const arr = [{value: 'test01'}, {value: 'test02'}, {value: 'test03'}]; // 也支持这种格式 ['tets01', 'test02']
                return arr.filter((item) => {
                  return item.value.indexOf(value) > -1;
                })
              },
              handleSelect(item) {
                console.log(item)
              }
            }
          }
        <\/script>
      `
    }
  },
  mounted() {
    hljs.highlightCode();
    this.$refs.test.focus();
  },
  methods: {
    test(e) {
      console.log(e)
    },
    querySearch(value) {
      const arr = [{value: 'test01'}, {value: 'test02'}, {value: 'test03'}];
      return arr.filter((item) => {
        return item.value.indexOf(value) > -1;
      });
    },
    handleSelect(item){
      console.log(item)
    },
    async autocompleteFun(value) {
      const list = [{label: 'test1'}, {label: 'test2'}, {label: 'test3'}];
      return list.filter(item => item.label.indexOf(value) > -1);
    }
  }
}
</script>
<style scoped>
.input-margin {
  margin-top: 10px;
}
</style>