<template>
  <div class="workflow-container pa-3 white">
    <v-tabs v-model="tab" @change="handleTabChange">
      <v-tab>工作流列表</v-tab>
      <v-tab>执行记录</v-tab>
      <v-tab>健康检查</v-tab>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <v-tab-item>
        <WorkflowList />
      </v-tab-item>
      <v-tab-item>
        <ExecutionRecord :tab="tab" />
      </v-tab-item>
      <v-tab-item>
        <HealthCheck />
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

<script>
import WorkflowList from './WorkflowList'
import ExecutionRecord from './ExecutionRecord'
import HealthCheck from './HealthCheck'

export default {
  name: 'WorkflowIndex',
  components: {
    WorkflowList,
    ExecutionRecord,
    HealthCheck
  },
  data () {
    return {
      tab: 0
    }
  },
  methods: {
    handleTabChange (tab) {
      this.tab = tab
    }
  }
}
</script>

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