<template>
	<div class="headerBox">
        <div class="tabBox" v-if="store.bottomProgressNum>0">
            <div class="fileName">
                <img src="@/assets/icons/pdf-icon.png" alt="   ">
                <span class="text-tip-1-bold">{{ store.uploadFileList[0]?.name||'文件错误' }}</span>
            </div>
            <div class="tab">
                <div class="tabList text-tip-1-bold" v-for="(item,index) in store.tabList" :key="index" :class="{'on':store.headerTabType==item.type}" 
                :style="!item.active?'color:#bfbfbf;cursor: no-drop;':''" 
                @click="onTabListClick(item.type,item.active)">{{ item.name }}</div>
            </div>
            <div class="switch" v-if="store.headerTabType=='translate'">
               <el-switch v-model="store.isShowOriginal"/>
               <div class="iconBOx">
                    <img src="@/assets/icons/translate-icon.png" alt="">
                    <span class="text-tip-1">显示原文</span>
               </div>
               <el-button @click="store.handleIsSsearchFor"><img style="width: 16px;" src="@/assets/icons/aiBox/search.png" alt=""> 查找</el-button>
               
            </div>
            <div v-else style="margin-right: 22px;">
               <el-button @click="onExport">导出</el-button>
            </div>
        </div>

		<div class="logo" v-else>
            <img src="@/assets/icons/tool-item-icon1.png" alt="">
            <span class="text-title-3-bold">智能写库</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick ,computed,watch} from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const emit = defineEmits(["onExport"]);
// 子组件直接获取Pinia Store（核心优化）
const store = useWrittingAsstaintStore();

const onTabListClick= (type,active)=>{
    if(!active) return
    store.handleHeaderTab(type)
}

const onExport=()=>{
    if(store.headerTabType=='mind'){
        emit('onExport')
    }else if(store.headerTabType=='message'){
        store.exportContent
    }
}

</script>
<style lang="scss" scoped>
.headerBox{
    background-color: #fff;
    border-bottom: 1px solid rgb(234, 236, 238);
    .logo{
        height: 60px;
        display: flex;
        align-items: center;
        img{
            width: 30px;
            height: 30px;
            margin-left: 28px;
            margin-right: 20px;
        }
    }

    .tabBox{
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .fileName{
            display: flex;
            align-items: center;
            img{
                width: 24px;
                height: 24px;
                margin-left: 28px;
                margin-right: 16px;
            }
        }
        .tab{
            width: 232px;
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            .tabList{
                cursor: pointer;
                height: 59px;
                line-height: 66px;
            }
            .on{
                border-bottom: 4px solid var(--color-primary-100);
                color:var(--color-primary-100) ;
                transition: all 0.1s;
            }
        }
        .btns{
            margin-right: 23px;
        }
    }
    
    .switch{
        display: flex;
        align-items: center;
        margin-right: 23px;
        .iconBOx{
            display: flex;
            align-items: center;
            margin-right: 12px;
            img{
                width: 16px;
                height: 16px;
                margin:0 5px;
            }
        }
    }
}





</style>