(function(){
    Vue.component('page-header', {
        template: `<div class="bgc-fff">
            <div class="c-border-b bgc-f5f5f5 c-666">
                <div class="container">
                    <div class="row ptb10">
                        <div class="col-md-6">公众健康服务平台</div>
                        <div class="col-md-6 c-t-right">
                            <span class="plr10 c-border-r " @click="download">下载APP</span>
                            <span class="plr10 c-border-r " @click="login">{{loginText}}</span>
                            <span class="plr10 " @click="logout">退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-0">
                            <img src="../../images/LOGO.png">
                        </div>
                        <div class="ui-col-1 pl30">
                            <div class="input-group search-box">
                                <i class="search-icon"></i>
                                <input type="text" class="form-control search-input" v-model="searchText" placeholder="请输入医院、医生姓名">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary bgc-0ad8c8">搜 索</button>
                                </span>
                            </div>
                            <div class=" c-909090 mt5"><span class="mr10">糖尿病</span><span class="mr10">胃炎</span><span class="mr10">协和医院</span><span class="mr10">林舜国</span></div>
                        </div>
                        <div class="ui-col-0 ptb10">
                            <img src="" width="80" height="80">
                            <div class=" c-909090 c-t-center mt5">手机扫一扫</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bgc-0ad8c8 h45">
                <div class="container">
                    <div class="row">
                        <div class="nav">
                            <a v-for="(item, index) in navList" class="nav-item" :class="{'active': selectedNav==index}" @click="chooseNav(index)">{{item.text}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>`,
        props: [],
        data: function(){
            return {
                loginText: '您好，请登录',
                searchText: '',
                navList: [{
                    text: "预约挂号",
                    link: ''
                },{
                    text: "健康档案",
                    link: ''
                },{
                    text: "我的就诊",
                    link: ''
                }],
                selectedNav: 0
            }
        },
        methods: {
            login: function(){
                //跳转到登录页面
            },
            logout: function(){
                
            },
            download: function(){
                //下载APP
            },
            chooseNav: function(val){
                this.selectedNav = val;
            }
        }
    })
})()