<template>
  <div class="workflow-status-dialog" v-loading="loading">
    <m-card :no-title="true" :no-elevation="true" :px5="false">
      <!-- <template #autoTitle>
        <span>{{ status.name || '工作流状态' }}</span>
        <v-spacer />
        <v-chip
          :color="status.active ? 'success' : 'grey'"
          large
          dark
        >
          {{ status.status_label || '未知' }}
        </v-chip>
      </template> -->

      <v-row class="pt-3">
        <v-col cols="12" md="4" >
          <m-card :no-title="true" :px5="false" :min-height="0" body-style="padding: 16px;">
            <div class="text-center">
              <div class="text-h6 mb-2">最近执行总数</div>
              <div class="text-h4 primary--text">
                {{ status.recent_executions?.total || 0 }}
              </div>
            </div>
          </m-card>
        </v-col>
        <v-col cols="12" md="4">
          <m-card :no-title="true" :px5="false" :min-height="0" body-style="padding: 16px;">
            <div class="text-center">
              <div class="text-h6 mb-2">成功次数</div>
              <div class="text-h4 success--text">
                {{ status.recent_executions?.success || 0 }}
              </div>
            </div>
          </m-card>
        </v-col>
        <v-col cols="12" md="4">
          <m-card :no-title="true" :min-height="0" body-style="padding: 16px;">
            <div class="text-center">
              <div class="text-h6 mb-2">失败次数</div>
              <div class="text-h4 error--text">
                {{ status.recent_executions?.error || 0 }}
              </div>
            </div>
          </m-card>
        </v-col>
      </v-row>

      <m-card class="mt-4" title="最后一次执行记录">
        <v-simple-table v-if="status.last_execution">
          <tbody>
            <tr>
              <td class="font-weight-bold" style="width: 120px;">执行ID</td>
              <td>{{ status.last_execution.id }}</td>
            </tr>
            <tr>
              <td class="font-weight-bold">状态</td>
              <td>
                <v-chip
                  :color="getStatusColor(status.last_execution.status)"
                  small
                  dark
                >
                  {{ status.last_execution.status_label }}
                </v-chip>
              </td>
            </tr>
            <tr>
              <td class="font-weight-bold">开始时间</td>
              <td>{{ status.last_execution.started_at }}</td>
            </tr>
            <tr>
              <td class="font-weight-bold">结束时间</td>
              <td>{{ status.last_execution.finished_at }}</td>
            </tr>
            <tr>
              <td class="font-weight-bold">执行模式</td>
              <td>{{ status.last_execution.mode }}</td>
            </tr>
          </tbody>
        </v-simple-table>
        <empty v-else class="mt-4" />
      </m-card>
    </m-card>
  </div>
</template>

<script>
import { getWorkflowStatus } from '@/api/dataFactory'
import Empty from '@/components/Common/empty'
import MCard from '@/components/MCard'

export default {
  name: 'WorkflowStatusDialog',
  components: {
    Empty,
    MCard
  },
  props: {
    workflowId: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      loading: false,
      status: {},
      refreshTimer: null
    }
  },
  watch: {
    workflowId: {
      immediate: true,
      handler (newVal) {
        if (newVal) {
          this.fetchStatus()
          // 每30秒自动刷新状态
          this.clearRefreshTimer()
          this.refreshTimer = setInterval(() => {
            this.fetchStatus()
          }, 30000)
        } else {
          this.clearRefreshTimer()
        }
      }
    }
  },
  beforeDestroy () {
    this.clearRefreshTimer()
  },
  methods: {
    clearRefreshTimer () {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
      }
    },
    async fetchStatus () {
      this.loading = true
      try {
        const { data } = await getWorkflowStatus(this.workflowId)
        this.status = data || {}
      } catch (error) {
        console.error('获取状态失败', error)
      } finally {
        this.loading = false
      }
    },
    getStatusColor (status) {
      const colors = {
        success: 'success',
        error: 'error',
        waiting: 'warning',
        running: 'primary'
      }
      return colors[status] || 'grey'
    }
  }
}
</script>

<style lang="scss" scoped>
.workflow-status-dialog {
  width: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
}
</style>
