<template>
  <div class="pa-3 white">
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      @add="handleAdd"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #actions="{ item }">
        <v-btn text color="primary" @click="handleEdit(item)">编辑</v-btn>
        <v-btn text color="error" @click="handleDelete(item.id)">删除</v-btn>
        <v-btn text color="info" @click="handleConfig(item)">表单配置</v-btn>
      </template>
      <template #tag="{ item }">
        {{ nodeGroup.find(e => e.value === item.tag)?.label ?? '-' }}
      </template>
      <template #type="{ item }">
        {{ typeDict.find(e => e.value === item.type)?.label ?? '-' }}
      </template>
      <template #status="{ item }">
        <span :class="item.status === '1' ? 'success--text' : 'error--text' ">
          {{ statusDict.find(e => e.value === item.status)?.label ?? '-' }}
        </span>
      </template>
    </m-table>
    <m-dialog :title="title" :visible.sync="show" @submit="handleSubmit">
      <edit-page v-if="show" ref="edit" :item-data="itemData" :type-dict="typeDict" :status-dict="statusDict"></edit-page>
    </m-dialog>
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table.vue'
import MDialog from '@/components/Dialog'
import EditPage from './components/edit'
import {
  getNodePage,
  addNode,
  updateNode,
  getNodePageDetail,
  deleteNode,
  dataFactoryDictList
} from '@/api/dataFactory'
export default {
  name: 'node-manage',
  components: { MFilter, MTable, MDialog, EditPage },
  data () {
    return {
      showConfig: false,
      loading: false,
      show: false,
      filter: {
        list: [
          { type: 'textField', value: '', label: '名称', key: 'name' },
          { type: 'autocomplete', value: null, label: '标签', key: 'tag', items: [] },
          { type: 'autocomplete', value: null, label: '类型', key: 'type', items: [] }
        ]
      },
      queryData: {
        name: null,
        type: null
      },
      headers: [
        { text: '名称', align: 'start', value: 'name' },
        { text: '标签', align: 'start', value: 'tag' },
        { text: '类型', align: 'start', value: 'type' },
        { text: '标识', align: 'start', value: 'mark' },
        { text: '状态', align: 'start', value: 'status' },
        { text: '说明', align: 'start', value: 'remark' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      typeDict: [],
      statusDict: [],
      nodeGroup: []
    }
  },
  computed: {
    title () {
      return Object.keys(this.itemData).length ? '编辑' : '新增'
    }
  },
  created () {
    this.initTypeDict()
    this.initTagDict()
    this.initStatusDict()
    this.init()
  },
  methods: {
    async initTypeDict () {
      try {
        const { data } = await dataFactoryDictList({ type: 'production_line_type' })
        this.typeDict = data[0].itemList
        this.filter.list.find(e => e.key === 'type').items = data[0].itemList
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async initTagDict () {
      try {
        const { data } = await dataFactoryDictList({ type: 'production_line_tag' })
        this.nodeGroup = data[0].itemList
        this.filter.list.find(e => e.key === 'tag').items = data[0].itemList
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async initStatusDict () {
      try {
        const { data } = await dataFactoryDictList({ type: 'production_line_status' })
        this.statusDict = data[0].itemList
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async init () {
      this.loading = true
      try {
        const { data } = await getNodePage({ ...this.pageInfo, orders: this.orders, ...this.queryData })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleAdd () {
      this.itemData = {}
      this.show = true
    },
    async handleEdit (item) {
      // this.itemData = item
      try {
        const { data } = await getNodePageDetail({ id: item.id })
        this.itemData = data
        this.show = true
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async handleSubmit () {
      const obj = this.$refs.edit.getValue()
      if (!obj) return
      const submitApi = Object.keys(this.itemData).length ? updateNode : addNode
      if (Object.keys(this.itemData).length) {
        Object.assign(obj, { id: this.itemData.id })
      }
      try {
        await submitApi(obj)
        this.$snackbar.success('操作成功')
        this.show = false
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleDelete (ids) {
      if (Array.isArray(ids)) {
        if (!ids.length) return this.$snackbar.warning('请选择要删除的选项')
        ids = ids.toString()
      }
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          try {
            await deleteNode({ ids })
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    handleConfig (item) {
      this.showConfig = true
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
