<template>
  <page-header-wrapper>
    <a-card class="my-card">
      <AntQueryTable
        ref="role-table"
        height="100%"
        :queryConfig="queryConfig"
        :tableConfig="tableConfig"
        :pageConfig="pageConfig"
        :showTool="showTool"
      >
        <template #toolbar-left>
          <a-button icon="plus" type="primary" style="margin-right: 10px" @click="handleOpenAddModal">新增</a-button>
        </template>
        <template #tablecell-action="{ record }">
          <a-button size="small" type="primary" @click="handleOpenEditModal(record)">编辑</a-button>
          <a-button size="small" type="danger" @click="handleDelete(record)" style="margin-left: 15px">删除</a-button>
        </template>
      </AntQueryTable>
    </a-card>
    <AntFormModal
      :visible.sync="AEModal.visible"
      :title="AEModal.title"
      :formItems="AEModal.formItems"
      :formRules="AEModal.formRules"
      :formData="AEModal.formData"
      :onSubmit="handleSubmitAE"
      @success="handleSubmitAESuccess"
    >
    </AntFormModal>
  </page-header-wrapper>
</template>

<script>
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
export default {
  name: 'Role',
  data() {
    return {
      queryConfig: {
        items: [{ label: '关键字', prop: 'filter' }],
      },
      tableConfig: {
        table: { rowKey: 'id' },
        query: (params) => getAction('/system/role/getList', params),
        columns: [
          { dataIndex: 'serial' },
          { title: '角色名称', dataIndex: 'roleName', width: 'auto' },
          { title: '排序', dataIndex: 'sortCode', width: 'auto' },
          { dataIndex: 'action' },
        ],
      },
      pageConfig: true,
      showTool: true,

      AEModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          { label: '角色名称', prop: 'roleName' },
          { label: '排序', prop: 'sortCode', options: { type: 'number' } },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.title = '新增角色'
      this.AEModal.mode = 'add'
      this.AEModal.formData = {}
      this.AEModal.visible = true
    },
    handleOpenEditModal(record) {
      this.AEModal.title = '编辑角色'
      this.AEModal.mode = 'edit'
      this.AEModal.formData = { ...record }
      this.AEModal.visible = true
    },
    handleSubmitAE(formData) {
      if (this.AEModal.mode === 'add') {
        return postAction('/system/role/add', formData)
      }
      if (this.AEModal.mode === 'edit') {
        return putAction('/system/role/edit', formData)
      }
    },
    handleSubmitAESuccess() {
      this.$refs['role-table'].commitAction('query')
    },
    async handleDelete(record) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该角色吗？' })
        const res = await deleteAction('/system/role/remove?roleId=' + record.id)
        this.$message.success(res.message)
        this.$refs['role-table'].commitAction('query')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
</style>
