<template>
  <v-container>
    <v-row>
      <v-col :cols="3">
        <v-card class="d-flex justify-center align-center mb-3" height="100" dark color="success" elevation="5">
          运行中 10
          <v-icon>mdi-play</v-icon>
        </v-card>
        <v-card class="d-flex justify-center align-center" height="100" color="error" dark elevation="5">
          已停止 10
          <v-icon>mdi-pause</v-icon>
        </v-card>
      </v-col>
      <v-col :cols="9">
        <v-card height="212" elevation="5">
          <v-card-title>状态监控</v-card-title>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col :cols="12">
        <v-card height="500" elevation="5" class="pa-3">
          <m-table
            :headers="headers"
            :items="items"
            :is-tools="false"
            :loading="loading"
            :elevation="0"
            :show-select="false"
          ></m-table>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import MTable from '@/components/List/table'
export default {
  name: 'spider-management',
  components: {
    MTable
  },
  data () {
    return {
      headers: [
        { text: '任务名称', value: 'name' },
        { text: '任务类型', value: 'type' },
        { text: '任务状态', value: 'status' },
        { text: '创建时间', value: 'createTime' },
        { text: '更新时间', value: 'updateTime' },
        { text: '操作', value: 'actions' }
      ],
      items: [],
      loading: false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
