<!--
 * @Author: xiejiang
 * @Date: 2024-12-01 10:37:37
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-10 14:23:34
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="bg-white p-[12px] h-full">
    <Back />
    <main class="m-auto max-w-[1012px]">
      <!-- 基本信息 -->
      <PageTitle title="基本信息" class="mb-[24px] mt-[12px]" />
      <div class="flex flex-wrap">
        <DetailTable label="角色名称" :value="state?.roleName" />
        <DetailTable label="状态">
          <span>
            {{ statusTxt(state?.status as number)?.title || '-' }}
          </span>
        </DetailTable>
        <DetailTable label="添加时间" :value="state?.inputTime" />
        <DetailTable label="添加人" :value="state?.inputUserName" />
        <DetailTable label="角色描述" width="100%" :value="state?.description" />
      </div>

      <!--    用户角色与权限     -->
      <PageTitle title="角色用户" class="my-[24px]" />
      <t-table
        :data="tableData"
        :columns="columns"
        :loading="loading"
        @page-change="onLogsPageChange"
        :pagination="pagination.total > 10 ? pagination : undefined"
      >
        <template v-for="col in columns" #[soltName(col)]="{ row }" :key="col.colKey">
          <t-tooltip
            :content="row[col.colKey as string]"
            placement="top"
            theme="light"
            overlay-class-name="custom-tooltip"
          >
            <div class="cell-content ellipsis">{{ row[col.colKey as string] || '-' }}</div>
          </t-tooltip>
        </template>
      </t-table>
    </main>
  </div>
</template>

<script setup lang="ts" name="role-detail">
import { useRoute } from 'vue-router'
import { PrimaryTableCol, PaginationProps } from 'tdesign-vue-next'
import { useBasic } from '@/hooks/useBasic'
import { ResRoleList } from '@/api/interface/user-roles/index'
import { getRoleDetail } from '@/api/modules/user-roles/index'
import { statusTxt } from '@/utils/status'
import { soltName } from '@/utils'

const route = useRoute()
const { setBreadcrumb } = useBasic()

const state = ref<ResRoleList>()

const getData = () => {
  getRoleDetail({
    ...pagination.value,
    roleId: route.query.roleId as string
  }).then(res => {
    state.value = res.data
    tableData.value = res.data?.roleUsers?.list || []
    pagination.value.total = res.data?.roleUsers?.total as number
  })
}

const onLogsPageChange = (val: PaginationProps) => {
  pagination.value.page = val.current as number
  pagination.value.limit = val.pageSize as number
  getData()
}

const loading = ref(false)

// 权限
const tableData = ref<any[]>()
const pagination = ref({
  page: 1,
  limit: 10,
  total: 0
})
// 表格columns配置
const columns: PrimaryTableCol[] = [
  {
    title: '序号',
    colKey: 'serial-number',
    width: 70
  },
  { title: '用户姓名', colKey: 'userName' },
  { title: '手机号码', colKey: 'mobile' },
  { title: '最近登录时间', colKey: 'time' },
  { title: '最近登录IP', colKey: 'loginIp' },
  { title: '最近登录设备类型', colKey: 'device' }
]

onMounted(() => {
  setBreadcrumb([
    {
      title: '系统权限'
    },
    {
      title: '角色管理',
      name: 'users'
    },
    {
      title: '角色详情'
    }
  ])
  getData()
})
</script>
