<template>
  <div class="white pa-3">
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :show-select="false"
      :is-tools="false"
      :disable-sort="true"
      :total="total"
      :page-info="pageInfo"
      @pageHandleChange="pageHandleChange"
    >
      <template #name="{ item }">
        <tool-tip :text="item.name" :width="200"></tool-tip>
      </template>
      <template #remark="{ item }">
        <tool-tip :text="item.remark" :width="200"></tool-tip>
      </template>
      <template #actions="{ item }">
        <v-btn text color="primary" @click="handleDetails(item)">
          详情
        </v-btn>
        <v-btn text color="error" @click="handleClose(item.id)">
          关闭
        </v-btn>
      </template>
    </m-table>
    <m-dialog
      :visible.sync="show"
      flex-box
      title="生产线详情"
      :footer="false"
      :width-type="1"
      body-style="padding: 0; overflow: hidden;"
    >
      <m-details v-if="show" :item-data="itemData" class="pa-5" style="height: 600px"></m-details>
    </m-dialog>
  </div>
</template>

<script>
import ToolTip from '@/components/Tooltip'
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table'
import MDialog from '@/components/Dialog'
import MDetails from '../components/graph.vue'
import { getDataFactoryList, getDataFactoryDetails } from '@/api/productionLine'
export default {
  name: 'production-line',
  components: {
    MTable,
    MFilter,
    ToolTip,
    MDialog,
    MDetails
  },
  data () {
    return {
      filter: {
        list: [
          { type: 'textField', value: null, label: '名称', key: 'name' }
        ]
      },
      show: false,
      loading: false,
      headers: [
        { text: '名称', value: 'name' },
        // { text: '状态', value: 'status' },
        { text: '更新时间', value: 'updateTime' },
        { text: '创建时间', value: 'createTime' },
        { text: '备注', value: 'remark' },
        { text: '操作', value: 'actions' }
      ],
      items: [
        {
          id: 1,
          name: '生产线1'
        }
      ],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      query: {
        name: null
      },
      itemData: null
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await getDataFactoryList({ ...this.pageInfo, ...this.query })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleSearch (val) {
      Object.assign(this.query, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleClose () {
    },
    async handleDetails (item) {
      try {
        const { data } = await getDataFactoryDetails({ id: item.id })
        this.itemData = data
        if (!Object.keys(this.itemData).length) {
          this.$snackbar.error('生产线找不到节点')
          return
        }
        this.show = true
        // console.log(data)
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
