<template>
  <div class="workbench-container" v-loading="isLoading">
    <el-card class="!border-none mb-4" shadow="never">
      <div class="text-lg font-bold mb-4">服务器信息</div>
      <div class="workbench-info">
        <div class="workbench-info-item">
          <div class="text-base font-bold">操作系统</div>
          <div class="text-base">{{ workbenchInfo.server?.os || '' }}</div>
        </div>
        <div class="workbench-info-item">
          <div class="text-base font-bold">服务器软件</div>
          <div class="text-base">{{ workbenchInfo.server?.server_software || '' }}</div>
        </div>
        <div class="workbench-info-item">
          <div class="text-base font-bold">PHP版本</div>
          <div class="text-base">{{ workbenchInfo.server?.php_version || '' }}</div>
        </div>
        <div class="workbench-info-item">
          <div class="text-base font-bold">安装路径</div>
          <div class="text-base">{{ workbenchInfo.server?.install_path || '' }}</div>
        </div>
        <div class="workbench-info-item">
          <div class="text-base font-bold">磁盘可用空间</div>
          <div class="text-base">{{ workbenchInfo.server?.disk_free || '' }}</div>
        </div>
        <div class="workbench-info-item">
          <div class="text-base font-bold">上传限制</div>
          <div class="text-base">{{ workbenchInfo.server?.upload_limit || '' }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="!border-none mb-4" shadow="never">
      <div class="text-lg font-bold mb-4">系统环境要求</div>
      <table class="w-full">
        <thead>
          <tr>
            <th class="px-2 text-base font-bold text-left">环境</th>
            <th class="px-2 text-base font-bold text-left">要求</th>
            <th class="px-2 text-base font-bold text-left">版本</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in workbenchInfo.php_items" :key="index">
            <td class="px-2 pt-4 text-base break-all">{{ item.option }}</td>
            <td class="px-2 pt-4 text-base break-all">{{ item.require }}</td>
            <td class="px-2 pt-4 text-base break-all">{{ item.status }}</td>
          </tr>
        </tbody>
      </table>
    </el-card>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <el-card class="!border-none" shadow="never">
        <div class="text-lg font-bold mb-4">权限状态</div>
        <table class="w-full">
          <thead>
            <tr>
              <th class="px-2 text-base font-bold text-left">选项</th>
              <th class="px-2 text-base font-bold text-left min-w-[80px]">要求</th>
              <th class="px-2 text-base font-bold text-left min-w-[60px]">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in workbenchInfo.dir_items" :key="index">
              <td class="px-2 pt-4 text-base break-all">{{ item.path }}</td>
              <td class="px-2 pt-4 text-base break-all">{{ item.require }}</td>
              <td class="px-2 pt-4 text-base break-all">
                <el-icon color="var(--el-color-primary)" size="20" v-if="item.status"><Check /></el-icon>
                <el-icon color="var(--el-color-danger)" size="20" v-else><Close /></el-icon>
              </td>
            </tr>
          </tbody>
        </table>
      </el-card>
      <el-card class="!border-none" shadow="never">
        <div class="text-lg font-bold mb-4">开发者信息</div>
        <div class="flex flex-col gap-4 py-2">
          <div class="flex justify-between items-center">
            <span class="text-base">应用版本</span>
            <span class="text-base">{{ workbenchInfo.version || '' }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">系统名称</span>
            <span class="text-base">{{ developerInfo.systemName }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">官方网站</span>
            <el-link :href="developerInfo.official" target="_blank" type="primary" :underline="false">
              {{ developerInfo.official }}
            </el-link>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">源码地址</span>
            <div class="flex">
              <el-button type="success" size="small">Gitee</el-button>
              <el-button type="primary" size="small">GitHub</el-button>
            </div>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">开发团队</span>
            <span class="text-base">{{ developerInfo.developmentTeam }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">开源协议</span>
            <span class="text-base">{{ developerInfo.openSourceProtocol }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">技术交流（QQ群）</span>
            <el-link
              :href="`https://qm.qq.com/cgi-bin/qm/qr?k=${developerInfo.qqGroup}`"
              target="_blank"
              type="primary"
              :underline="false"
            >
              {{ developerInfo.qqGroup }}
            </el-link>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="Workbench">
import { getSystemInfo } from '@/api/config'
// 工作台信息
const workbenchInfo = ref<any>({})
// 开发者信息
const developerInfo = ref({
  systemName: 'WdUniAdmin',
  official: 'https://www.wldos.net',
  sourceCode: 'https://gitee.com',
  github: 'https://github.com',
  developmentTeam: '青岛麦沃德网络科技有限公司',
  openSourceProtocol: 'MIT开源协议',
  qqGroup: '695310296'
})
// 加载状态
const isLoading = ref(false)

// 获取工作台信息
const getWorkbench = async () => {
  isLoading.value = true
  await getSystemInfo()
    .then((res) => {
      workbenchInfo.value = res || {}
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}

onMounted(() => {
  getWorkbench()
})
</script>

<style lang="scss" scoped>
.workbench-container {
  .workbench-info {
    @apply px-2 flex flex-wrap gap-6;

    .workbench-info-item {
      @apply flex flex-col gap-4 break-all;
      min-width: 180px;
    }
  }
}
</style>
