<script setup>
import { markRaw, ref } from 'vue';

import { Delete, Download, Edit, Share, View } from '@element-plus/icons-vue';

import CardPage from '#/components/cardPage/CardPage.vue';
import PageData from '#/components/page/PageData.vue';

// 操作按钮配置
const actions = ref([
  {
    name: 'edit',
    label: '编辑',
    type: 'primary',
    icon: markRaw(Edit),
  },
  {
    name: 'view',
    label: '查看',
    type: 'success',
    icon: markRaw(View),
  },
  {
    name: 'delete',
    label: '删除',
    type: 'danger',
    icon: markRaw(Delete),
  },
  {
    name: 'share',
    label: '分享',
    type: 'info',
    icon: markRaw(Share),
  },
  {
    name: 'download',
    label: '下载',
    type: 'warning',
    icon: markRaw(Download),
  },
  {
    name: 'download',
    label: '下载',
    type: 'warning',
    icon: markRaw(Download),
  },
]);

const handleAction = ({ action }) => {
  switch (action.name) {
    case 'delete': {
      break;
    }
    case 'edit': {
      break;
    }
    default: {
      break;
    }
  }
};
</script>

<template>
  <div class="page-container">
    <PageData
      page-url="/api/v1/sysAccount/page"
      :page-size="10"
      :init-query-params="{ status: 1 }"
    >
      <template #default="{ pageList }">
        <CardPage
          title-key="id"
          description-key="loginName"
          :data="pageList"
          :actions="actions"
          @action-click="handleAction"
        />
      </template>
    </PageData>
  </div>
</template>
