<template>
  <div class="white">
    <m-card :no-title="true" :px5="false">
      <v-tabs v-model="tab" @change="handleTabChange">
        <v-tab>基本信息</v-tab>
        <v-tab>状态</v-tab>
        <v-tab>执行记录</v-tab>
      </v-tabs>
      <v-divider></v-divider>
      <v-tabs-items v-model="tab" class="mt-3 px-3">
        <v-tab-item>
          <base-info :workflowId="workflowId" />
        </v-tab-item>
        <v-tab-item>
          <status-page :workflowId="workflowId" />
        </v-tab-item>
        <v-tab-item>
          <execution-record :workflowId="workflowId" />
        </v-tab-item>
      </v-tabs-items>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import baseInfo from './baseInfo.vue'
import statusPage from './status.vue'
import executionRecord from './ExecutionRecord.vue'

export default {
  name: 'WorkflowDetail',
  components: {
    MCard,
    baseInfo,
    statusPage,
    executionRecord
  },
  props: {
    workflowId: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      tab: 0
    }
  },
  methods: {
    handleTabChange (index) {
      this.tab = index
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
