<template>
    <div class="app_header">
        <el-icon v-if="showBack" class="left_back" @click="$router.go(-1)"><ArrowLeftBold /></el-icon>
        {{ headerTitle }}
    </div>
</template>

<script setup lang="ts">
import {computed,ref} from 'vue'
import { useRoute } from 'vue-router'

import { useStore } from 'vuex'

const route = useRoute()
const store = useStore()

const showBack = computed(()=>{
  if(route.path.startsWith('/app') && route.path !== '/app' 
      && route.path !== '/app/' && !route.path.startsWith('/app/questionnaireTaskListPage')){
    return true
  }else{
    return false
  }
})

const headerTitle = computed(()=>{
    if( route.path.startsWith('/app/questionnaireCommit') ){
        return store.state.subjectQuestionnaireTitle
    }else{
        return '智能教学评价系统'
    }
})

</script>


<style lang="scss" scoped>
.app_header{
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(44 * var(--app-rpx));
    border-bottom:calc(1 * var(--app-rpx)) solid #F3F3F3;;
    background-color: white;
    font-weight: 600;
    font-size: calc(16 * var(--app-rpx));
    color: #333;
    .left_back{
        position: absolute;
        left: calc(20 * var(--app-rpx));
    }
}
</style>