<template>
  <div class="department-manage render-container">
    <div class="filter-container">
      <div class="flex align-items-c justify-content-b">
        <el-form
          :model="queryParams"
          label-width="100px"
          label-position="top"
          ref="queryParams"
          inline
        >
          <el-form-item label="菜单编码" prop="menuCodeLike">
            <el-input
              v-model="queryParams.menuCodeLike"
              size="medium"
              placeholder="请输入菜单编码"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuNameLike">
            <el-input
              v-model="queryParams.menuNameLike"
              size="medium"
              placeholder="请输入菜单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单类型" prop="type">
            <el-select v-model="queryParams.type" size="medium">
              <el-option label="全部" value=""></el-option>
              <el-option label="菜单" :value="0" />
              <el-option label="接口" :value="1" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="mt15 flex align-items-c justify-content-b">
          <el-button size="medium" type="primary" @click="handleQuery"
            >查询</el-button
          >
          <el-button size="medium" @click="resetQuery">重置</el-button>
          <el-button size="medium" type="primary" @click="handleAdd"
            >新增</el-button
          >
        </div>
      </div>
    </div>
    <r-table
      :columns="tableConfig.columns"
      :data="tableData"
      :deletion="false"
      :total="tableConfig.total"
      @currentChange="handleCurrentChange"
      @sizeChange="handleSizeChange"
      :currentPage="tableConfig.currentPage"
      :pageSize="tableConfig.pageSize"
    />

    <!-- 菜单新增 编辑 弹窗 -->
    <menu-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :is-edit="isEdit"
      :is-view="isView"
      :menu-data="currentMenuData"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import { queryMenuDetail, deleteMenu, getMenuTree } from '@/api/system/menu'
import MenuDialog from '@/views/system/menu/components/MenuDialog'

export default {
  name: 'DepartmentManage',
  components: {
    MenuDialog
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogTitle: '添加菜单',
      isEdit: false,
      isView: false,
      currentMenuData: {},
      queryParams: {
        menuCodeLike: '',
        menuNameLike: '',
        type: null,
        icon: ''
      },
      typeOptions: [{ value: 0, label: '菜单' }, { value: 1, label: '接口' }],
      // 表格配置项
      tableConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        columns: [
          { prop: 'menuCode', key: '菜单编码' },
          { prop: 'menuName', key: '菜单名称' },
          { prop: 'url', key: '地址' },

          {
            prop: 'type',
            key: '菜单类型',
            render: (h, params) => {
              return h(
                'el-tag',
                {
                  props: {
                    type: params.row.type === 0 ? 'success' : 'primary',
                    size: 'small'
                  },
                  class: 'normal-button'
                },
                params.row.type === 0 ? '菜单' : '接口'
              )
            }
          },
          {
            key: '操作',
            isRedraw: true,
            render: (h, params) => {
              return h('div', [
                h(
                  'el-button',
                  {
                    props: {
                      type: 'text',
                      size: 'mini',
                      title: '编辑',
                      icon: 'el-icon-edit-outline'
                    },
                    class: 'normal-button',
                    on: { click: () => this.handleEdit(params.row) }
                  },
                  ''
                ),
                h(
                  'el-button',
                  {
                    props: {
                      type: 'text',
                      size: 'mini',
                      title: '删除',
                      icon: 'el-icon-delete'
                    },
                    class: 'normal-button',
                    on: { click: () => this.handleDelete(params.row) }
                  },
                  ''
                )
              ])
            }
          }
        ]
      },
      tableData: []
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 获取菜单列表
    getMenuList() {
      this.loading = true
      const params = { ...this.queryParams }

      getMenuTree(params)
        .then(response => {
          this.tableData = response.content.content || []
        })
        .catch(error => {
          this.$message.error('获取菜单列表出错', error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.page = 1
      this.getMenuList()
    },
    resetQuery() {
      this.queryParams.menuNameLike = ''
      this.queryParams.menuCodeLike = ''
      this.queryParams.type = null
      this.queryParams.icon = ''
      this.handleQuery()
    },
    handleSubmit() {
      this.getMenuList() // 提交后刷新列表
    },
    handleAdd() {
      this.isEdit = false
      this.isView = false
      this.currentMenuData = {}
      this.dialogVisible = true
      this.dialogTitle = '添加菜单'
    },
    handleEdit(row) {
      this.isEdit = true
      this.isView = false
      this.dialogTitle = '编辑菜单'
      this.loading = true

      // 获取用户详情
      queryMenuDetail({ id: row.id })
        .then(response => {
          this.currentMenuData = response.content.content || {}
          this.dialogVisible = true
        })
        .catch(error => {
          this.$message.error('获取菜单详情出错', error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.handleQuery()
    },
    handleDelete(row) {
      this.$messageBox(
        () => {
          this.loading = true
          // 将id放入数组中传递
          deleteMenu([row.id])
            .then(() => {
              this.$message.success('删除成功')
              this.getMenuList()
            })
            .catch(error => {
              this.$message.error('删除菜单出错', error)
            })
            .finally(() => {
              this.loading = false
            })
        },
        '确认删除该菜单吗？',
        'warning',
        '警告'
      )

      // this.$confirm(, {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      //
      //   })
      //   .catch(() => {
      //     this.$message.info('已取消删除')
      //   })
    }
  }
}
</script>

<style lang="scss" scoped>
.department-manage {
  padding: 20px;

  .filter-container {
    margin-bottom: 20px;

    .el-form-item {
      margin-bottom: 10px;
      margin-right: 10px;

      .el-form-item__label {
        padding-right: 8px;
      }
    }
  }
}
</style>
