<!-- src/App.vue -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header><Header/></el-header>
      <div class="ebody">
        <router-view/>
      </div>
      <el-footer style="padding: 0">
        <Footer/>
      </el-footer>
    </el-container>
  </div>
  <!--登录弹框-->
  <el-dialog
      v-model="state.loginDialogVisible"
      title=" "
      width="20em"
      :closeOnClickModal="false"
      :show-close="false"
  >
  <template #header>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">登录</h3>
      <el-icon @click="closeLoginDialog" class="el-dialog__headerbtn"><Close /></el-icon>
    </div>
  </template>
  <!-- 在这里放置登录内 容 -->
  <Login/>
  </el-dialog>

  <!--更改成绩弹框-->
  <el-dialog
      v-model="state.editScoreDialogVisible"
      title=" "
      width="40em"
      :closeOnClickModal="false"
      :show-close="false"
  >
  <template #header>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">请填写您的高考信息</h3>
      <el-icon @click="closeLoginDialog" class="el-dialog__headerbtn"><Close /></el-icon>
    </div>
  </template>
  <!-- 在这里放置登录内 容 -->
  <EditScoreInfo/>
  </el-dialog>
</template>

<script setup>
import { ref, computed ,provide, reactive} from "vue";
import { useRouter } from 'vue-router';
// i18n
import { useI18n } from "vue-i18n";
import Header from "@/components/Header.vue";
const state = reactive({
  loginDialogVisible:false,//登录弹框是否显示
  editScoreDialogVisible:false,//更改成绩弹框是否显示
})
const router = useRouter();
const { locale } = useI18n({ useScope: "global" }); // vue-i18n提供了一个钩子函数 useI18n(),暴露出locale属性用于切换语言
locale.value = localStorage.getItem("locale") || "zh_CN"; // 页面首次加载显示的语言
if (localStorage.getItem("locale") === undefined ||localStorage.getItem("locale") === null || localStorage.getItem("locale") === '') {
  //默认是中文
  localStorage.setItem("locale",'zh_CN')
}


//打开登录弹框
const openLogin = () => {
  state.loginDialogVisible=true
};
provide('openLogin', openLogin);

//打开更改成绩弹框
const openEditScore = () => {
  state.editScoreDialogVisible=true
};
provide('openEditScore', openEditScore);

//关闭登录弹框
const closeLoginDialog=()=>{
  // 在这里可以处理弹出层关闭时的逻辑
  state.loginDialogVisible = false
  state.editScoreDialogVisible = false
  //console.log(router.currentRoute.value.path)
  // let nowPath = router.currentRoute.value.path
  // if(nowPath === '/fillVolunteer'){
  //   router.push({path: "/index"});
  // }else if(nowPath === '/index'){
  // }
}


// Element Plus全局配置国际化
//import zhCn from "element-plus/dist/locale/zh-cn.mjs";
//import en from "element-plus/dist/locale/en.mjs";
// const elLocale = computed(() => (locale.value === "zh_CN" ? zhCn : en)); // Element Plus组件国际化
// // 中英文切换开关
// const langSwitch = ref(locale.value === "zh_CN");
// // 中英文切换事件
// const handleChangeI18n = (val) => {
//   locale.value = val ? "zh_CN" : "en_US"; // true为中文，false为英文
//   localStorage.setItem("locale", locale.value); // 本地缓存当前页面语言
// };
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.ebody{
  margin: 0;
  padding: 10px 0;
  width: auto;
  min-height: 700px;
}
</style>
