<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />

    <!-- 强制修改密码对话框 -->
    <force-change-password
      v-if="passwordChangeDialog"
      v-model:visible="passwordChangeDialog"
      :is-first-login="isFirstLogin"
      :is-force-change="isForceChange"
      @success="onPasswordChangeSuccess"
    />
    <!-- 全局水印 -->
     <watermark/>
  </el-config-provider>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useSettingsStore } from '@/store/modules/settings';
import { useUserStore } from '@/store/modules/user';
import { useAppStore } from '@/store/modules/app';
import { handleThemeStyle } from '@/utils/theme';
import ForceChangePassword from '@/components/User/ForceChangePassword.vue';
import Watermark from '@/components/Watermark/index.vue';

const appStore = useAppStore();
const userStore = useUserStore();

// 强制修改密码对话框显示标志
const passwordChangeDialog = ref(false);

// 是否是首次登录（检查最后密码修改时间是否为空）
const isFirstLogin = computed(() => {
  return !userStore.lastPwdUpdateTime && userStore.pwdFirstChange;
});

// 是否是强制修改密码（管理员重置后）
const isForceChange = computed(() => {
  return userStore.forcePwdChange;
});

// 监听用户状态，检查是否需要修改密码
// 使用统一的计算属性，更简洁和集中
watch(
  () => userStore.needsPasswordChange,
  (newVal) => {
    if (newVal === true) {
      passwordChangeDialog.value = true;
    }
  },
  { immediate: true }
);

// 密码修改成功后的回调
const onPasswordChangeSuccess = () => {
  userStore.setPwdChanged();
  passwordChangeDialog.value = false;
};

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});
</script>
