<script lang="ts" setup name="RoleList">
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteRoleById, getRoleByPage } from '@/api/system/roleApi'

const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()

const state = reactive({
  loading: false,
  // 表格是否自适应高度
  tableAutoHeight: false,
  /**
   * 详情展示模式
   * router 路由跳转
   * dialog 对话框
   * drawer 抽屉
   */
  // 搜索
  search: {
    keywords: '',
  },
  // 列表数据
  dataList: [],
  batch: {
    selectionDataList: [],
  },
})

const getDataList = async () => {
  state.loading = true
  const params = getParams()
  state.search.keywords && (params.keywords = state.search.keywords)
  const { data } = await getRoleByPage(params)
  state.dataList = data
  state.loading = false
}

onMounted(() => {
  getDataList()
})

// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getDataList())
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList())
}

// 字段排序
function sortChange({ prop, order }: { prop: string; order: string }) {
  onSortChange(prop, order).then(() => getDataList())
}

function onCreate() {}

function onRoleEdit(_row: any) {

}

function onRoleDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.roleName}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteRoleById(row.roleId)
    ElMessage.success(msg)
    await getDataList()
  }).catch(() => {})
}
</script>

<template>
  <div :class="{ 'absolute-container': state.tableAutoHeight }">
    <page-header title="角色管理" content="页面数据为 Mock 示例数据，非真实数据。" />
    <page-main>
      <el-space wrap>
        <el-button type="primary" size="default" @click="onCreate">
          <template #icon>
            <el-icon>
              <svg-icon name="ep:plus" />
            </el-icon>
          </template>
          新增角色
        </el-button>
      </el-space>
      <search-bar>
        <el-form :model="state.search" size="default" label-width="100px" label-suffix="：">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称">
                <el-input v-model="state.search.keywords" placeholder="请输入角色名称，支持模糊查询" clearable @keydown.enter="currentChange()" @clear="currentChange()" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="currentChange()">
              <template #icon>
                <el-icon>
                  <svg-icon name="i-ep:search" />
                </el-icon>
              </template>
              筛选
            </el-button>
          </el-form-item>
        </el-form>
      </search-bar>

      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" border stripe highlight-current-row height="100%" @sort-change="sortChange" @selection-change="state.batch.selectionDataList = $event">
        <el-table-column prop="roleName" label="名称" />
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" plain @click="onRoleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" plain @click="onRoleDel(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @size-change="sizeChange" @current-change="currentChange" />
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .search-container {
      margin-bottom: 0;
    }
  }
}
</style>
