<!-- src/views/fileManagement/sheep_pedigree/index.vue -->
<template>
  <div class="app-container">
    <!-- 诊断信息 -->
    <div style="background:#f0f9ff; padding:20px; margin-bottom:20px; border:1px solid #bae0ff;">
      <h3>页面加载诊断</h3>
      <p><strong>路由路径：</strong> {{ $route.path }}</p>
      <p><strong>路由参数：</strong> {{ $route.params }}</p>
      <p><strong>查询参数：</strong> {{ $route.query }}</p>
      <p><strong>组件路径：</strong> {{ $route.meta?.component }}</p>
      <p><strong>菜单配置：</strong> {{ menuConfig }}</p>
      <el-button @click="reloadPage" type="primary">重新加载</el-button>
      <el-button @click="goBack" type="info">返回</el-button>
    </div>
    
    <!-- 测试内容 -->
    <div style="text-align:center; padding:50px;">
      <h1 style="color:#1890ff;">羊只系谱管理页面</h1>
      <p v-if="isFrameIssue" style="color:red; font-weight:bold;">
        ⚠️ 检测到 isFrame=1 问题！请修改菜单配置为"是否外链=否"
      </p>
      <p>这是一个测试页面，如果看到此内容，说明组件加载成功</p>
      <el-button type="success" @click="testClick">测试按钮</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SheepPedigree",
  data() {
    return {
      menuConfig: {},
      isFrameIssue: false
    };
  },
  created() {
    console.log("=== 羊只系谱页面创建 ===");
    console.log("1. 路由信息：", this.$route);
    console.log("2. 路由匹配：", this.$router.currentRoute);
    console.log("3. 权限信息：", this.$store.state.user.permissions);
    
    // 检测是否是isFrame问题
    const route = this.$route;
    if (route.meta && route.meta.isFrame === '1') {
      this.isFrameIssue = true;
      console.error("检测到isFrame=1，会导致页面显示问题！");
    }
    
    // 获取当前路由对应的菜单配置
    this.getMenuConfig();
    
    // 测试API
    this.testApiConnection();
  },
  mounted() {
    console.log("页面已挂载到DOM");
    console.log("当前URL：", window.location.href);
  },
  methods: {
    getMenuConfig() {
      // 从Vuex中查找当前路由对应的菜单
      const routes = this.$store.state.permission.routes || [];
      this.findMenuConfig(routes, this.$route.path);
    },
    
    findMenuConfig(menus, path) {
      for (const menu of menus) {
        if (menu.path === path) {
          this.menuConfig = menu;
          console.log("找到菜单配置：", menu);
          return;
        }
        if (menu.children) {
          this.findMenuConfig(menu.children, path);
        }
      }
    },
    
    async testApiConnection() {
      try {
        // 测试调用API（使用已有的API）
        const response = await this.$axios.get('/system/dict/data/type/sheep_type');
        console.log("API测试成功：", response.data);
      } catch (error) {
        console.warn("API测试失败：", error.response || error.message);
      }
    },
    
    testClick() {
      this.$message.success("按钮点击成功！页面功能正常");
    },
    
    reloadPage() {
      window.location.reload();
    },
    
    goBack() {
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.app-container {
  min-height: 500px;
  padding: 20px;
}
</style>