<template>
  <div class="flow-market-page">
    <el-card>
      <template #header>
        <span>流市场 - 已上架的工作流</span>
      </template>

      <el-row :gutter="20">
        <el-col :span="8" v-for="flow in flows" :key="flow.id" style="margin-bottom: 20px">
          <el-card shadow="hover" class="flow-card" @click="$router.push(`/admin/flow/market/${flow.id}`)">
            <div class="flow-card-header">
              <h4>{{ flow.name }}</h4>
              <el-tag size="small" type="success">v{{ flow.version }}</el-tag>
            </div>
            <p class="flow-desc">{{ flow.description || '暂无描述' }}</p>
            <div class="flow-card-footer">
              <el-tag size="small" v-if="flow.published_to_wecom" type="warning">企微可用</el-tag>
              <el-button size="small" type="primary" text @click.stop="$router.push(`/admin/flow/market/${flow.id}`)">查看详情</el-button>
              <span style="font-size: 12px; color: #999; margin-left: auto">
                {{ flow.updated_at ? new Date(flow.updated_at).toLocaleDateString() : '' }}
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-empty v-if="!flows.length" description="暂无已上架的工作流" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { flowApi } from '@/api'

const flows = ref<any[]>([])

onMounted(async () => {
  const res: any = await flowApi.getMarket()
  flows.value = res || []
})
</script>

<style scoped>
.flow-card {
  cursor: pointer;
  transition: all 0.3s;
}
.flow-card:hover {
  transform: translateY(-2px);
}
.flow-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.flow-card-header h4 {
  margin: 0;
  font-size: 16px;
}
.flow-desc {
  color: #909399;
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 40px;
}
.flow-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>