<template>
  <div id="app">
    <router-view/>
    
    <!-- 全局数据初始化失败提示对话框 -->
    <el-dialog
      title="数据初始化失败"
      :visible.sync="initErrorVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="400px"
    >
      <div style="text-align: center; padding: 20px 0;">
        <i class="el-icon-warning" style="font-size: 48px; color: #E6A23C; margin-bottom: 16px;"></i>
        <p style="font-size: 16px; color: #606266; margin-bottom: 20px;">{{ initErrorMessage }}</p>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button type="primary" @click="retryInit" :loading="retrying">重试</el-button>
        <el-button @click="goToLogin">返回登录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      retrying: false
    }
  },
  computed: {
    initErrorVisible: {
      get() {
        return !!this.$store.state.initError
      },
      set(value) {
        if (!value) {
          this.$store.commit('clearInitError')
        }
      }
    },
    initErrorMessage() {
      return this.$store.state.initError || '数据初始化失败，请重试'
    }
  },
  methods: {
    async retryInit() {
      this.retrying = true
      this.$store.commit('clearInitError')
      const result = await this.$store.dispatch('initTaskData')
      this.retrying = false
      
      if (result.success) {
        // 初始化成功，刷新当前路由
        this.$router.go(0)
      } else {
        // 初始化失败，显示错误
        this.$store.commit('setInitError', result.error)
      }
    },
    goToLogin() {
      this.$store.commit('clearInitError')
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2E7D32;
  background: #F1F8F4;
  min-height: 100vh;
}
</style>
