<template>
  <div class="flex direction-column full role-manage">
    <div class="flex items-center p-base fill-blank filter-form">
      <base-select v-model="role" size="small" :options="ROLE_OPTION" clearable></base-select>
      <el-button class="m-l-base" size="small" type="primary" @click="onSearch">查询</el-button>
    </div>
    <div class="flex-1 p-base">
      <el-card table>
        <base-table :columns="columns" :data="roleList">
          <template #column-operation="{ row }">
            <el-button v-if="row.code !== 'ADMIN'" type="primary" link @click="onEdit(row)">编辑</el-button>
          </template>
        </base-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="RoleManage">
/** 角色管理 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton, ElCard } from 'element-plus'
import BaseSelect from '@/components/element/BaseSelect.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import { ROLE_OPTION } from '@/constants/dicts'
import useFetch from '@/hooks/useFetch'

import type { ExtractApiResponse } from '@/api/api'
import type { EpTableColumn } from 'global-type'

const { push } = useRouter()

const role = ref<ROLE>()

const columns: EpTableColumn[] = [
  { label: 'ID', prop: 'id' },
  { label: '角色', prop: 'roleName' },
  { label: '更新人', prop: 'updaterName' },
  { label: '更新时间', prop: 'updateTime' },
  { label: '操作', slotName: 'operation' },
]

const { fetch, result: roleList } = useFetch('getRoleList')

async function onSearch() {
  fetch({ role: role.value })
}

function onEdit(row: ExtractArrayValue<ExtractApiResponse<'getRoleList'>>) {
  push({ name: 'RoleSetting', params: { role: row.code } })
}

onSearch()
</script>

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