<template>
    <header class="flexacenter" id="pageHeader">
        <div class="flexacenter top">
            <a href="./index.html"><img class="logo" @click="handleLogo" alt="寄托问答" src="./img/logo.png" /></a>
            <div class="right flexacenter flex1">
                <div class="searchInput flexacenter">
                    <input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
                    <div class="clear-search flexacenter" v-if="isSearchMode">
                        <img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png" />
                        <div class="halving-line"></div>
                    </div>
                    <img class="input-icon" src="./img/input-icon.png" @click="searchClick()" />
                    <div class="history-box" v-if="historicalSearchState" @click.stop="">
                        <div class="history-title">
                            历史搜索
                        </div>
                        <div class="history-list">
                            <div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
                        </div>
                    </div>
                </div>
                <div class="btn-list flexacenter">
                    <div class="item flex1" @click="handleMy('collect')">
                        我的收藏
                    </div>
                    <div class="item flex1" @click="handleMy('questions')">
                        我的提问
                    </div>
                    <div class="item flex1" @click="handleMy('answers')">
                        我的回答
                    </div>
                </div>
                <div class="add-btn flexcenter" @click="questionsInit()">
                    <img class="add-icon" src="./img/add-icon.svg" />
                    我要提问
                </div>
            </div>
        </div>
        <div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
            <div class="tab-list flexacenter">
                <div class="item flexcenter" :class="{pitch: typePitch == null}" @click="cutType(null)">All</div>
                <template v-for="(item, index) in typeList" :key="index">
                    <div class="halving-line">|</div>
                    <div class="item flexcenter" :class="{pitch: typePitch == it['id']}" v-for="it in item" :key="it" @click="cutType(it.id)">{{ it["name"] }}</div>
                </template>
            </div>
        </div>
    </header>
</template>
