<template>
  <div class="page-container">
    <!-- ========== PC 端 ========== -->
    <template v-if="!isMobile">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>厂商负载</span>
            <el-button type="primary" size="small" :loading="refreshing" @click="loadData">
              刷新
            </el-button>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col v-for="vendor in vendorLoads" :key="vendor.vendor" :span="12">
            <el-card shadow="hover" class="vendor-card">
              <template #header>
                <div class="vendor-card-header">
                  <div class="vendor-title">
                    <span>{{ vendor.vendorName }}</span>
                    <el-tag :type="vendor.currentLoad < vendor.maxConcurrent ? 'success' : 'danger'" size="small">
                      负载 {{ vendor.currentLoad }} / {{ vendor.maxConcurrent }}
                    </el-tag>
                  </div>
                </div>
              </template>

              <div class="chain-list">
                <div v-if="vendor.chainCodes && vendor.chainCodes.length > 0" class="chain-items">
                  <div
                    v-for="code in vendor.chainCodes"
                    :key="code"
                    class="chain-item"
                    @click="goChainDetail(code)"
                  >
                    <span class="chain-code">{{ code }}</span>
                    <el-tag type="info" size="small">执行中</el-tag>
                  </div>
                </div>
                <el-empty v-else description="暂无执行中任务链" :image-size="60" />
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-empty v-if="vendorLoads.length === 0 && !refreshing" description="暂无厂商数据" />
      </el-card>
    </template>

    <!-- ========== 移动端 ========== -->
    <template v-else>
      <div class="m-vendor-header">
        <span class="m-vendor-title">厂商负载</span>
        <el-button type="primary" size="small" round :loading="refreshing" @click="loadData">刷新</el-button>
      </div>

      <div
        v-for="vendor in vendorLoads"
        :key="vendor.vendor"
        class="m-vendor-card"
      >
        <div class="m-vendor-card-top">
          <div class="m-vendor-name-row">
            <span class="m-vendor-name">{{ vendor.vendorName }}</span>
            <el-tag :type="vendor.currentLoad < vendor.maxConcurrent ? 'success' : 'danger'" size="small">
              {{ vendor.currentLoad }} / {{ vendor.maxConcurrent }}
            </el-tag>
          </div>
        </div>

        <div class="m-chain-list">
          <div
            v-for="code in (vendor.chainCodes || [])"
            :key="code"
            class="m-chain-item"
            @click="goChainDetail(code)"
          >
            <span class="m-chain-code">{{ code }}</span>
            <el-tag type="info" size="small">执行中</el-tag>
          </div>
          <el-empty v-if="!vendor.chainCodes?.length" description="暂无执行中任务链" :image-size="48" />
        </div>
      </div>

      <el-empty v-if="vendorLoads.length === 0 && !refreshing" description="暂无厂商数据" :image-size="48" />
    </template>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'VendorLoadView' })
import { getVendorLoad, type VendorLoadVO } from '@/api/vendorLoad'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useDevice } from '@/composables/useDevice'

const { isMobile } = useDevice()
const router = useRouter()
const vendorLoads = ref<VendorLoadVO[]>([])
const refreshing = ref(false)

async function loadData() {
  refreshing.value = true
  try {
    const res = await getVendorLoad()
    vendorLoads.value = res.data || []
  } catch { /* handled by interceptor */ } finally {
    refreshing.value = false
  }
}

function goChainDetail(code: string) {
  router.push(`/task/chain/${code}`)
}

onMounted(loadData)
</script>

<style scoped>
/* ===== 公共 ===== */
.page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== PC ===== */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.vendor-card {
  margin-bottom: 20px;
}

.vendor-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vendor-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}

.chain-list {
  min-height: 120px;
}

.chain-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chain-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fb;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.chain-item:hover {
  background: #eef1f6;
}

.chain-code {
  font-family: monospace;
  font-size: 13px;
  color: #409eff;
  word-break: break-all;
  cursor: pointer;
}

.chain-code:hover {
  text-decoration: underline;
}

/* ===== 移动端 ===== */
.m-vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-vendor-title {
  font-size: 17px;
  font-weight: 600;
  color: #303133;
}

.m-vendor-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.m-vendor-card-top {
  margin-bottom: 10px;
}

.m-vendor-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-vendor-name {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

.m-chain-list {
  min-height: 80px;
}

.m-chain-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8f9fb;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-chain-code {
  font-family: monospace;
  font-size: 12px;
  color: #409eff;
  word-break: break-all;
  -webkit-tap-highlight-color: transparent;
}
</style>
