<template>
    <div>
        <!--基本用法-->
        <div id="autocomplete-example">
            <h2>1.实例演示</h2>
            <ul class="tab">
                <li v-for="(tab,index) in tabItems" @click="tabChange(tab.componentName)" :class="{tabSelectd:currentTabName==tab.componentName}" :key="index" >{{tab.title}}</li>
            </ul>

            <div v-show="currentTabName=='basic'">
                <basic></basic>
            </div>

            <div v-show="currentTabName=='tools'">
                <tools></tools>
            </div>

            <div v-show="currentTabName=='custom'">
                <custom></custom>
            </div>

            <div v-show="currentTabName=='customsize'">
                <customsize></customsize>
            </div>

            <div v-show="currentTabName=='api'">
                <api></api>
            </div>

        </div>
        
        <!--测试数据-->
        <div id="testData" v-show="currentTabName!='api'">
            <p class="red">注:当前所有的输入查询操作,输入内容匹配的是测试数据的name字段</p>
            <hr>
            <h2>2.测试数据</h2>
            <table class="tableData">
                <thead>
                    <tr>
                        <template>
                            <th v-for="(vulue,key) in data[0]" :key="key" >{{key}}</th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in data" :key="index" >
                        <td v-for="(vulue,key) in data[0]" :key="key" >{{item[key]}}</td>
                    </tr>
                </tbody>
            </table>

        </div>

    </div>
</template>

<script>


import data from '../../mock/tableData.js'//测试数据

import basic from './basic.md';//基本用法

import tools from './tools.md';//工具配置

import custom from './custom.md';//自定义数据模板

import customsize from './customsize.md'//尺寸设置

import api from './api.md';//api文档

export default{
    name:'AutoComplete',
    data(){
        return{
            data:data,
            tabItems:[{
                title:"基本用法",
                componentName:"basic"
            },{
                title:"工具配置",
                componentName:"tools"
            },{
                title:"自定义数据模板",
                componentName:"custom"
            },
            {
                title:"尺寸选择",
                componentName:"customsize"
            },{
                title:"api文档",
                componentName:"api"
            }],
            currentTabName:"basic"
        };
    },
    components:{
        'basic':basic,
        'tools':tools,
        'custom':custom,
        'customsize':customsize,
        'api':api
    },
    methods:{
        tabChange(componentName){
            this.currentTabName=componentName;
        }
    }
}

</script>


<style>

#autocomplete-example{
    margin-bottom: 100px;
}

#autocomplete-example .tab{
    margin: 0;
    padding: 0;
}

#autocomplete-example .tab li{
    list-style: none;
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

.tabSelectd{
    background-color: orange;
    color: white;
}

.p{
    color: green;
}
.red{
    color: red;
}
.tableData th,td{
    padding: 5px;
    text-align: center;
}

</style>