<template>
  <div>
    <h1>Select输入框</h1>
    <p class="fbg-text">当选项过多时，使用下拉菜单展示并选择内容。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseSelectStr">
      <el-select v-model="baseValue" placeholder="请输入" style="width:200px;">
        <el-option v-for="(item, index) in optionsList" :key="index" :value="item.value" :label="item.label" />
      </el-select>
    </demo>
    <h3 class="fbg-title">多选</h3>
    <demo :code="multipleSelectStr">
      <el-select v-model="dataList" multiple placeholder="请输入">
        <el-option :value="1" disabled label="测试01" />
        <el-option :value="2" label="测试02" />
      </el-select>
    </demo>
    <h3 class="fbg-title">可搜索</h3>
    <demo :code="filterableSelectStr">
      <el-select v-model="filterableValue" filterable placeholder="请输入">
        <el-option :value="1" label="测试01" />
        <el-option :value="2" label="测试02" />
      </el-select>
    </demo>
    <h3 class="fbg-title">禁用选项</h3>
    <demo :code="disabledSelectStr">
      <el-select v-model="disabledValue" placeholder="请输入">
        <el-option :value="1" disabled label="测试01" />
        <el-option :value="2" label="测试02" />
      </el-select>
    </demo>
    <h3 class="fbg-title">Select 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>multiple</td>
          <td>多选</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>filterable</td>
          <td>可搜索</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>true</td>
        </tr>
        <tr>
          <td>noDataText</td>
          <td>没有数据时展示文本</td>
          <td>string</td>
          <td>--</td>
          <td>暂无数据</td>
        </tr>
        <tr>
          <td>noMatchText</td>
          <td>没有匹配数据时展示文本</td>
          <td>string</td>
          <td>--</td>
          <td>无匹配数据</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Option 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>value</td>
          <td>值</td>
          <td>String|Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>label</td>
          <td>标题</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disabled</td>
          <td>禁用</td>
          <td>Boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Slot 插槽</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>名称</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>noData</td>
          <td>无数据展示</td>
        </tr>
        <tr>
          <td>noMatch</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>change</td>
          <td>选项发生变化</td>
          <td>value、label（选中的值与选中的标题）</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      baseValue: 1,
      filterableValue: 1,
      disabledValue: 2,
      dataList: [1],
      optionsList: [],
      baseSelectStr: `
      <el-select v-model="data" placeholder="请输入">
        <el-option :value="1" label="测试01" />
        <el-option :value="2" label="测试02" />
      </el-select>`,
      multipleSelectStr: `
      <el-select v-model="dataList" multiple placeholder="请输入">
        <el-option :value="1" label="测试01" />
        <el-option :value="2" label="测试02" />
      </el-select>`,
      filterableSelectStr: `
      <el-select v-model="data" filterable placeholder="请输入">
        <el-option :value="1" label="测试01" />
        <el-option :value="2" label="测试02" />
      <\/el-select>
      `,
      disabledSelectStr: `
      <el-select v-model="data" placeholder="请输入">
        <el-option :value="1" disabled label="测试01" />
        <el-option :value="2" label="测试02" />
      <\/el-select>
      `
    }
  },
  mounted() {
    setTimeout(() => {
      this.optionsList =[];
      for (let i = 0; i < 3000; i++) {
        this.optionsList.push({
          label: '测试' + i,
          value: i
        });
      }
    }, 2000);
    hljs.highlightCode();
  }
}
</script>