<template>
  <div class="visual-screen-page">
    <Breadcrumb :items="['menu.visualization', 'OPS 大屏']" />
    <a-card :bordered="false">
      <template #title>已发布 OPS 大屏</template>
      <template #extra>
        <a-button @click="loadProjects">
          <template #icon><icon-refresh /></template>
        </a-button>
      </template>
      <a-table :loading="loading" :data="projects" :pagination="false" row-key="identity">
        <template #columns>
          <a-table-column title="项目名称" data-index="projectName" />
          <a-table-column title="项目 ID" data-index="identity" />
          <a-table-column title="状态" :width="110">
            <template #cell="{ record }">
              <a-tag :color="record.state === 1 ? 'green' : 'gray'">
                {{ record.state === 1 ? '已发布' : '草稿' }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="更新时间" data-index="updateTime" :width="180" />
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-space>
                <a-button type="text" size="small" @click="preview(record.identity)">读取载荷</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="previewVisible" title="公开项目数据" :footer="false" :width="760">
      <a-textarea :model-value="previewContent" readonly :auto-size="{ minRows: 12, maxRows: 20 }" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { fetchProjectData, fetchProjectList, type GoViewProject } from '@/api/ops/goview'

const loading = ref(false)
const projects = ref<GoViewProject[]>([])
const previewVisible = ref(false)
const previewContent = ref('')

const loadProjects = async () => {
  loading.value = true
  try {
    const res = await fetchProjectList({ page: 1, size: 50, state: 1 })
    projects.value = res.data?.list || []
  } catch (error: any) {
    Message.error(error.message || '加载已发布大屏失败')
  } finally {
    loading.value = false
  }
}

const preview = async (projectId: string) => {
  const res = await fetchProjectData(projectId)
  previewContent.value = JSON.stringify(res.data || {}, null, 2)
  previewVisible.value = true
}

loadProjects()
</script>

<script lang="ts">
export default {
  name: 'OpsBigScreenVisualization',
}
</script>

<style scoped lang="less">
.visual-screen-page {
  padding: 0 20px 20px;
}
</style>
