<template>
  <div>
    <n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" />
    <CreateRoleDrawer
      ref="createDrawerRef"
      :title="drawerTitle"
      :roleName="roleName" 
      :userId="userId"
      :roleDrawerData="roleDrawerData"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, onMounted } from 'vue';
  import { NButton, NTag, useMessage } from 'naive-ui';
  import type { DataTableColumns } from 'naive-ui';
  import { roleFields } from '@/convert/role/map';
  import { userInfoObj } from '@/views/account/accountList/userInfo';
  import { genRoleTableColumns } from '@/convert/role/roles';
  import CreateRoleDrawer from './CreateRoleDrawer.vue';

  const createColumns = ({
    play,
  }: {
    play: (row: roleFields) => void;
  }): DataTableColumns<roleFields> => {
    return [
      {
        title: '角色ID',
        key: 'id',
      },
      {
        title: '角色名称',
        key: 'name',
      },
      {
        title: '角色等级',
        key: 'level',
      },
      {
        title: '进阶等级',
        key: 'evolution',
      },
      {
        title: '是否满级',
        key: 'break',
      },
      {
        title: '状态',
        key: 'wear',
        render(row) {
          console.log('row.wear:' + JSON.stringify(row));
          return h(
            NTag,
            {
              style: {
                marginRight: '6px',
              },
              type: row.wear === false ? 'warning' : 'success',
              bordered: false,
            },
            {
              default: () => row.wearTag,
            }
          );
        },
        // sorter: (row1, row2) => row2.wear - row1.wear,
        // sortOrder: 'ascend',
      },
      {
        title: '操作',
        key: 'actions',
        render(row) {
          return h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: 'small',
              onClick: () => play(row),
            },
            { default: () => '升级角色' }
          );
        },
      },
    ];
  };

  const data: roleFields[] = ref([]);

  const roleDrawerData = ref({});

  const message = useMessage();

  const roleName = ref(''); 


  const columns = createColumns({
    play(row: roleFields) {
      drawerTitle.value = '升级角色:' + row.name;
      roleName.value = row.name;
      console.log('row:' + JSON.stringify(row));
      roleDrawerData.value = row;
      const { openDrawer } = createDrawerRef.value;
      openDrawer();
    },

  });

  interface Props {
    userId?: number | string;
    userInfo?: any;
  }
  const props = withDefaults(defineProps<Props>(), { userId: 0, userInfo: userInfoObj ,roleName:""});

  const pagination = ref(false as const);

  const createDrawerRef = ref();

  const drawerTitle = ref('');

  const loadDataTable = async (_res) => {
    console.log('loadDataTable...');
    data.value = genRoleTableColumns(props.userInfo.roles);
  };

  onMounted(async () => {
    if (props.userId < 1) {
      console.log('传入用户信息不正确，props.userId：', props.userId);
      return;
    }
    await loadDataTable({});
  });

  const fatherRefresh = () => {
    console.log('fatherRefresh...role');
    loadDataTable({});
  };
  defineExpose({ fatherRefresh });
</script>
