<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-monitor"></i> 服务器信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-receiving"></i> 磁盘状态</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
                </tr>
              </thead>
              <tbody v-if="server.sysFiles">
                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-truck"></i> 物流服务健康度</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务状态</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-tag :type="health.logistics && health.logistics.healthy ? 'success' : 'danger'">
                        {{ health.logistics && health.logistics.status ? health.logistics.status : '未知' }}
                      </el-tag>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务地址</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" style="word-break: break-all;">
                      {{ health.logistics && health.logistics.serviceUrl ? health.logistics.serviceUrl : '-' }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">状态信息</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': health.logistics && !health.logistics.healthy}">
                      {{ health.logistics && health.logistics.message ? health.logistics.message : '-' }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" class="clearfix">
            <span><i class="el-icon-message"></i> 微信推送服务健康度</span>
            <el-button
              style="float: right; padding: 3px 10px;"
              type="primary"
              size="mini"
              :loading="wxSendTesting"
              @click="testWxSendHealth"
            >
              {{ wxSendTesting ? '检测中...' : '测试' }}
            </el-button>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务状态</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-tag :type="wxSendTagType">
                        {{ health.wxSend && health.wxSend.status ? health.wxSend.status : '未知' }}
                      </el-tag>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务地址</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" style="word-break: break-all;">
                      {{ health.wxSend && health.wxSend.serviceUrl ? health.wxSend.serviceUrl : '-' }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">状态信息</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': health.wxSend && health.wxSend.healthy === false}">
                      {{ health.wxSend && health.wxSend.message ? health.wxSend.message : '-' }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" class="clearfix">
            <span><i class="el-icon-bell"></i> 企微闲鱼通知（wxSend）</span>
            <el-button
              style="float: right; padding: 3px 10px;"
              type="primary"
              size="mini"
              :loading="goofishTesting"
              @click="testGoofishNotify"
            >
              {{ goofishTesting ? '检测中...' : '测试' }}
            </el-button>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务状态</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-tag :type="goofishTagType">
                        {{ health.goofishNotify && health.goofishNotify.status ? health.goofishNotify.status : '未知' }}
                      </el-tag>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">推送接口</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" style="word-break: break-all;">
                      {{ health.goofishNotify && health.goofishNotify.serviceUrl ? health.goofishNotify.serviceUrl : '-' }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">状态信息</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': health.goofishNotify && health.goofishNotify.healthy === false}">
                      {{ health.goofishNotify && health.goofishNotify.message ? health.goofishNotify.message : '-' }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <!-- Ollama 服务健康度（调试用） -->
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" class="clearfix">
            <span><i class="el-icon-cpu"></i> Ollama 服务健康度（调试）</span>
            <el-button
              style="float: right; padding: 3px 10px;"
              type="primary"
              size="mini"
              :loading="ollamaTesting"
              @click="testOllamaHealth"
            >
              {{ ollamaTesting ? '检测中...' : '测试' }}
            </el-button>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务状态</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">
                      <el-tag :type="health.ollama && health.ollama.healthy ? 'success' : (health.ollama ? 'danger' : 'info')">
                        {{ health.ollama && health.ollama.status ? health.ollama.status : '未检测' }}
                      </el-tag>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务地址</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" style="word-break: break-all;">
                      {{ health.ollama && health.ollama.serviceUrl ? health.ollama.serviceUrl : '-' }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">状态信息</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': health.ollama && !health.ollama.healthy}">
                      {{ health.ollama && health.ollama.message ? health.ollama.message : '点击「测试」获取健康度' }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getServer, getHealth, triggerWxSendHealthTest, triggerGoofishNotifyTest } from "@/api/monitor/server"

export default {
  name: "Server",
  data() {
    return {
      // 服务器信息
      server: [],
      // 健康度检测信息
      health: {
        logistics: null,
        wxSend: null,
        goofishNotify: null,
        ollama: null
      },
      ollamaTesting: false,
      wxSendTesting: false,
      goofishTesting: false
    }
  },
  computed: {
    wxSendTagType() {
      const w = this.health.wxSend
      if (!w || w.healthy === null || w.healthy === undefined) return 'info'
      return w.healthy ? 'success' : 'danger'
    },
    goofishTagType() {
      const g = this.health.goofishNotify
      if (!g || g.healthy === null || g.healthy === undefined) return 'info'
      return g.healthy ? 'success' : 'danger'
    }
  },
  created() {
    this.getList()
    this.getHealthInfo()
    this.openLoading()
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      getServer().then(response => {
        this.server = response.data
        this.$modal.closeLoading()
      })
    },
    /** 查询健康度检测信息 */
    getHealthInfo() {
      getHealth().then(response => {
        if (response.data) {
          this.health = response.data
        }
      }).catch(error => {
        console.error("获取健康度检测信息失败", error)
      })
    },
    /** 测试 Ollama 健康度（调试用） */
    testOllamaHealth() {
      this.ollamaTesting = true
      getHealth()
        .then(response => {
          if (response.data) {
            const prevWx = this.health.wxSend
            const prevGf = this.health.goofishNotify
            this.health = response.data
            if (prevWx && prevWx.healthy !== null && prevWx.healthy !== undefined) {
              this.$set(this.health, 'wxSend', prevWx)
            }
            if (prevGf && prevGf.healthy !== null && prevGf.healthy !== undefined) {
              this.$set(this.health, 'goofishNotify', prevGf)
            }
            const ollama = response.data.ollama
            if (ollama && ollama.healthy) {
              this.$message.success('Ollama 服务正常')
            } else {
              this.$message.warning(ollama && ollama.message ? ollama.message : 'Ollama 服务异常或未配置')
            }
          }
        })
        .catch(error => {
          console.error('Ollama 健康度检测失败', error)
          this.$message.error('检测失败: ' + (error.message || '网络异常'))
        })
        .finally(() => {
          this.ollamaTesting = false
        })
    },
    /** 手动测试微信推送（会真实下发一条消息） */
    testWxSendHealth() {
      this.wxSendTesting = true
      triggerWxSendHealthTest()
        .then(response => {
          if (response.data) {
            this.$set(this.health, 'wxSend', response.data)
            if (response.data.healthy) {
              this.$message.success('微信推送测试成功')
            } else {
              this.$message.warning(response.data.message || '微信推送测试未通过')
            }
          }
        })
        .catch(error => {
          console.error('微信推送测试失败', error)
          this.$message.error('检测失败: ' + (error.message || '网络异常'))
        })
        .finally(() => {
          this.wxSendTesting = false
        })
    },
    /** 手动测试企微闲鱼通知 */
    testGoofishNotify() {
      this.goofishTesting = true
      triggerGoofishNotifyTest()
        .then(response => {
          if (response.data) {
            this.$set(this.health, 'goofishNotify', response.data)
            if (response.data.healthy) {
              this.$message.success('闲鱼通知测试成功')
            } else {
              this.$message.warning(response.data.message || '闲鱼通知测试未通过')
            }
          }
        })
        .catch(error => {
          console.error('闲鱼通知测试失败', error)
          this.$message.error('检测失败: ' + (error.message || '网络异常'))
        })
        .finally(() => {
          this.goofishTesting = false
        })
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载服务监控数据，请稍候！")
    }
  }
}
</script>
