<template>
  <div class="pa-3" style="height: 100%;">
    <m-card title="数据生产线" bodyStyle="flex: 1" style="height: 100%;" class="d-flex flex-column">
      <empty v-if="isEmpty"></empty>
      <template v-else>
        <m-graph :item-data="option"></m-graph>
      </template>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import Empty from '@/components/Common/empty'
import MGraph from '@/views/dataFactory/components/graph'
import { getDataFactoryDetails } from '@/api/productionLine'
export default {
  name: 'data-book-resource-line',
  components: {
    MCard,
    Empty,
    MGraph
  },
  data () {
    return {
      option: {},
      isEmpty: true
    }
  },
  created () {
    const id = this.$route.params.id
    if (!id) {
      return
    }
    this.init({ id })
  },
  methods: {
    async init (query) {
      try {
        const { data } = await getDataFactoryDetails(query)
        this.isEmpty = !data || Object.keys(data).length === 0
        this.option = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
