<template>
  <div class="white pa-3">
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      @add="handleAdd"
      @edit="handleEdit"
      @delete="handleDelete"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #active="{ item }">
        <span :class="+item.active ? 'green--text' : 'red--text'">{{ +item.active ? '启用' : '禁用' }}</span>
      </template>
      <template #efficacy="{ item }">
        <span :class="item.efficacy ? 'red--text' : 'green--text'">{{ item.efficacy ? '已失效' : '正常' }}</span>
      </template>
      <template #meta="{ item }">
        {{ !item.meta ? '系统模块' : '自定义模块'}}
      </template>
    </m-table>
    <m-dialog :title="title" :visible.sync="show" @submit="handleSubmit">
      <edit-page v-if="show" ref="edit" class="pt-3" :item-data="itemData"></edit-page>
    </m-dialog>
  </div>
</template>

<script>
import MTable from '@/components/List/table.vue'
import MDialog from '@/components/Dialog'
import EditPage from './edit.vue'
import { getWorkbenchList, saveWorkbench, deleteWorkbench, deleteWorkbenchAll } from '@/api/menu'
export default {
  name: 'workbench-manage',
  components: { MTable, MDialog, EditPage },
  data () {
    return {
      show: false,
      loading: false,
      headers: [
        { text: '名称', align: 'start', value: 'label' },
        { text: '类型', align: 'start', value: 'meta' },
        { text: '激活', align: 'start', value: 'active' },
        { text: '状态', align: 'start', value: 'efficacy' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  computed: {
    title () {
      return Object.keys(this.itemData).length ? '编辑' : '新增'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await getWorkbenchList()
        this.items = data.map(e => {
          return Object.assign(e.entity, { efficacy: e.efficacy })
        })
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async handleSubmit () {
      const obj = this.$refs.edit.getValue()
      if (!obj) return
      obj.meta = null
      if (Object.keys(this.itemData).length) {
        obj.id = this.itemData.id
        if (this.itemData.meta) {
          obj.meta = this.itemData.meta
        }
      }
      try {
        const { data } = await saveWorkbench(obj)
        console.log(data)
        this.$snackbar.success('操作成功')
        this.show = false
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleAdd () {
      this.itemData = {}
      this.show = true
    },
    async handleEdit (item) {
      this.itemData = item
      this.show = true
    },
    handleDelete (ids) {
      console.log(ids)
      if (Array.isArray(ids) && !ids.length) return this.$snackbar.warning('请选择要删除的选项')
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          const delApi = Array.isArray(ids) ? deleteWorkbenchAll : deleteWorkbench
          const query = Array.isArray(ids) ? ids.map(e => ({ id: e })) : { id: ids }
          try {
            await delApi(query)
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
