<template>
    <div class="content">
        <e-row :gutter="24">
            <!-- 基本用法 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <e-select v-model="value" placeholder="请选择">
                            <e-option
                            ref="select1"
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                        <!-- <e-button @click="clickFocus('select1')">测试</e-button> -->
                    </div>
                </e-card>
            </e-col>
            <!-- 有禁用选项 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>有禁用选项</span>
                    </div>
                    <div>
                        <e-select v-model="value1" placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
             <!-- 禁用状态 -->
             <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>禁用状态</span>
                    </div>
                    <div>
                        <e-select v-model="value2" disabled placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 可清空单选 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>可清空单选</span>
                    </div>
                    <div>
                        <e-select v-model="value4" clearable placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 基础多选 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基础多选</span>
                    </div>
                    <div>
                        <div class="block"> 
                        <e-select v-model="value5" multiple placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                         </div>
                         <div class="block">
                        <e-select
                            v-model="value6"
                            multiple
                            collapse-tags
                            style="margin-left: 20px;"
                            placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 自定义模板 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>自定义模板</span>
                    </div>
                    <div>
                        <e-select v-model="value7" placeholder="请选择">
                            <e-option
                            v-for="item in cities"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 分组 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>分组</span>
                    </div>
                    <div>
                        <e-select v-model="value8" placeholder="请选择">
                        <e-option-group
                        v-for="group in options1"
                        :key="group.label"
                        :label="group.label">
                        <e-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </e-option>
                        </e-option-group>
                    </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 可搜索 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>可搜索</span>
                    </div>
                    <div>
                        <e-select v-model="value9" filterable placeholder="请选择">
                            <e-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 远程搜索 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>远程搜索</span>
                    </div>
                    <div>
                        <e-select
                            v-model="value10"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            :loading="loading">
                            <e-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 创建条目 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>创建条目</span>
                    </div>
                    <div>
                        <e-select
                            v-model="value11"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择文章标签">
                            <e-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </e-option>
                        </e-select>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶',
            disabled: true
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
            value: '',
            value1: '',
            value2: '',
            value4: '',
            value5: [],
            value6: [],
            value7: '',
            options1: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value8: '',
        value9: '',
        options3: [],
        value10: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
        options4: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value11: []
        }
    },
    mounted() {
        this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
        clickFocus(name){
            console.info("this:::::",this.$refs['select1'])
            this.$refs[name].focus()
          
        },
        remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options3 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options3 = [];
        }
      }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
