<template>
  <el-row class="header">
    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="header-left" @click="router.push('/')">
        <el-image :src="logUrl" :fit="'scale-down'" class="logo" />
        <div style="display: flex;align-items: flex-start;">
          <span class="name">{{ title }}</span>
          <span class="verson">{{ version }}</span>
        </div>
      </div>
    </el-col>
    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="header-center">
        {{ props.craneName }}
      </div>
    </el-col>
    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="header-right">
        <el-button v-if="props.isShowHomeButton" @click="router.push('/')" type="primary">返回首页</el-button>
        <el-button v-if="userStore.basicInfo.is_superuser" type="warning" @click="openAdminPage">后台管理</el-button>
        <el-button type="danger" @click="logout">注销</el-button>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { useRouter } from 'vue-router'
import logImg from '@/assets/images/logo.png'
import { useConfigStore,useUserStore } from "@/store";

const configStore = useConfigStore();
const title = configStore.configData.sys_web_title.config_value;
const version = configStore.configData.sys_web_version.config_value;
const logUrl = logImg
const router = useRouter()
const userStore = useUserStore();
const logout = () => {
  ElMessageBox.confirm(
    '确定要注销吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      userStore.logout().then(() => {
        router.push(`/login`);
      });
    })
    .catch(() => {
      ElMessageBox.close();
    });
}

const props = defineProps({
  craneName: {
    type: String,
    default: ''
  },
  isShowHomeButton: {
    type: Boolean,
    default: false
  },
})

const openAdminPage = () => {
  // 1. 解析路由
  const routeData = router.resolve({ path: '/admin' });
  // 2. 新标签页打开
  window.open(routeData.href, '_blank');
};
</script>
<style scoped>
.header {
  padding: 0 20px;
  background: rgba(19, 30, 46, 0.6);
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.header-left .logo {
  width: 63px;
  height: 43px;
}

.header-left .verson {
  font-size: 14px;
  color: #FF7800;
  margin-left: 10px;
  margin-top: 5px;
}

.header-left .name {
  font-size: 26px;
  color: #ffffff;
  margin-left: 15px;
  letter-spacing: 2px;
}

.header-center {
  font-size: 20px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
