<template>
  <div class="workflow-detail-dialog">
    <v-simple-table>
      <tbody>
        <tr>
          <td class="font-weight-bold" style="width: 120px;">工作流ID</td>
          <td>{{ workflow.id }}</td>
        </tr>
        <tr>
          <td class="font-weight-bold">节点数量</td>
          <td>{{ workflow.nodes_count || 0 }}</td>
        </tr>
        <tr>
          <td class="font-weight-bold">创建时间</td>
          <td>{{ workflow.created_at }}</td>
        </tr>
        <tr>
          <td class="font-weight-bold">更新时间</td>
          <td>{{ workflow.updated_at }}</td>
        </tr>
        <tr>
          <td class="font-weight-bold">标签</td>
          <td>
            <v-chip v-for="tag in workflow.tags" :key="tag" small class="mr-1">{{ tag }}</v-chip>
          </td>
        </tr>
      </tbody>
    </v-simple-table>

    <m-card class="my-3" title="节点列表" :noElevation="true">
      <table-list
        :loading="false"
        :headers="nodeHeaders"
        :items="workflow.nodes || []"
        :is-page="false"
        :is-tools="false"
        :disable-sort="true"
        :show-select="false"
        :items-per-page="-1"
      >
        <template #disabled="{ item }">
          <v-chip
            :color="item.disabled ? 'error' : 'success'"
            small
            dark
          >
            {{ item.disabled ? '禁用' : '启用' }}
          </v-chip>
        </template>
      </table-list>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import TableList from '@/components/List/table'
import { getWorkflow } from '@/api/dataFactory'

export default {
  name: 'WorkflowDetailDialog',
  components: {
    MCard,
    TableList
  },
  props: {
    workflowId: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      workflow: {},
      nodeHeaders: [
        { text: '节点名称', value: 'name' },
        { text: '节点类型', value: 'type' },
        { text: '版本', value: 'type_version' },
        { text: '状态', value: 'disabled' }
      ]
    }
  },
  mounted () {
    this.fetchWorkflow()
  },
  methods: {
    async fetchWorkflow () {
      const { data } = await getWorkflow(this.workflowId)
      this.workflow = data || {}
    }
  }
}
</script>

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