<script lang="ts" setup>
import { Page } from '@vben/common-ui';

import { Badge, Button, Space, Tag } from 'ant-design-vue';

import { useCardList } from './card-list/index';

interface UserData {
  id: number;
  name: string;
  age: number;
  email: string;
  department: string;
  status: string;
  role: string;
}

// 示例数据
const mockData: UserData[] = [
  {
    id: 1,
    name: '张三',
    age: 25,
    email: 'zhangsan@example.com',
    department: '技术部',
    status: 'active',
    role: '开发工程师',
  },
  {
    id: 2,
    name: '李四',
    age: 30,
    email: 'lisi@example.com',
    department: '市场部',
    status: 'inactive',
    role: '市场经理',
  },
  {
    id: 3,
    name: '王五',
    age: 28,
    email: 'wangwu@example.com',
    department: '销售部',
    status: 'active',
    role: '销售代表',
  },
  {
    id: 4,
    name: '赵六',
    age: 32,
    email: 'zhaoliu@example.com',
    department: '人事部',
    status: 'active',
    role: '人事专员',
  },
  {
    id: 5,
    name: '钱七',
    age: 27,
    email: 'qianqi@example.com',
    department: '财务部',
    status: 'inactive',
    role: '会计',
  },
  {
    id: 6,
    name: '孙八',
    age: 29,
    email: 'sunba@example.com',
    department: '技术部',
    status: 'active',
    role: '前端工程师',
  },
  {
    id: 7,
    name: '周九',
    age: 26,
    email: 'zhoujiu@example.com',
    department: '市场部',
    status: 'active',
    role: '市场专员',
  },
  {
    id: 8,
    name: '吴十',
    age: 31,
    email: 'wushi@example.com',
    department: '销售部',
    status: 'inactive',
    role: '销售经理',
  },
];

// 基本用法
const [BasicCardList] = useCardList<UserData>({
  title: '基本用法',
  gridOptions: {
    data: mockData,
    columns: [
      { field: 'name', title: '姓名' },
      { field: 'age', title: '年龄' },
      { field: 'email', title: '邮箱' },
      { field: 'department', title: '部门' },
    ],
    gridColumns: 3,
    cardGap: '16px',
  },
});

// 带分页的卡片列表
const [PaginatedCardList] = useCardList<UserData>({
  title: '带分页的卡片列表',
  titleHelp: '展示分页功能',
  gridOptions: {
    data: mockData,
    columns: [
      { field: 'name', title: '姓名' },
      { field: 'age', title: '年龄' },
      { field: 'email', title: '邮箱' },
      { field: 'department', title: '部门' },
    ],
    pagerConfig: {
      current: 1,
      pageSize: 4,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total: number, range: [number, number]) =>
        `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
    },
    gridColumns: 2,
    cardGap: '16px',
  },
  gridEvents: {
    pageChange: (page: number, pageSize: number) => {
      console.warn('页码变化:', page, pageSize);
    },
  },
});

// 自定义插槽
const [CustomSlotsCardList] = useCardList<UserData>({
  title: '自定义插槽',
  gridOptions: {
    data: mockData,
    columns: [
      { field: 'name', title: '姓名' },
      { field: 'age', title: '年龄' },
      { field: 'department', title: '部门' },
      { field: 'status', title: '状态', slots: { default: 'field-status' } },
    ],
    gridColumns: 3,
    cardGap: '16px',
  },
  gridEvents: {
    cardClick: (row: UserData) => {
      console.warn('点击卡片:', row);
    },
  },
});

// 完整功能示例
const [FullFeaturedCardList, fullFeaturedApi] = useCardList<UserData>({
  title: '完整功能示例',
  titleHelp: '展示所有功能',
  class: 'full-featured-wrapper',
  gridClass: 'full-featured-list',
  gridOptions: {
    data: mockData,
    columns: [
      {
        field: 'name',
        title: '姓名',
      },
      {
        field: 'age',
        title: '年龄',
        formatter: (value: number) => `${value} 岁`,
      },
      {
        field: 'role',
        title: '职位',
      },
      {
        field: 'status',
        title: '状态',
        slots: { default: 'field-status-full' },
      },
    ],
    showTitle: true,
    titleField: 'name',
    cardClass: 'custom-card',
    gridColumns: 3,
    cardGap: '20px',
    cardHeight: '200px',
    pagerConfig: {
      enabled: true,
      current: 1,
      pageSize: 6,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: true,
    },
    loading: false,
    emptyText: '暂无用户数据',
  },
  gridEvents: {
    cardClick: (row: UserData) => {
      console.warn('卡片点击:', row);
    },
    pageChange: (page: number, pageSize: number) => {
      console.warn('页码变化:', page, pageSize);
    },
  },
});

// 事件处理函数
const handleEdit = (row: UserData) => {
  console.warn('编辑用户:', row);
};

const handleDelete = (row: UserData) => {
  console.warn('删除用户:', row);
};

const handleView = (row: UserData) => {
  console.warn('查看用户:', row);
};

const handleRefresh = () => {
  fullFeaturedApi.setLoading(true);
  setTimeout(() => {
    fullFeaturedApi.setLoading(false);
  }, 1000);
};

const handleSetData = () => {
  fullFeaturedApi.setData(mockData.slice(0, 3));
};

const handleReset = () => {
  fullFeaturedApi.reset();
};
</script>

<template>
  <Page auto-content-height title="CardList 组件使用示例">
    <div class="card-list-demo">
      <h3 class="!mt-0">1. 基本用法</h3>
      <p class="demo-desc">最简单的卡片列表，展示数据的基本功能</p>
      <BasicCardList />

      <h3>2. 带分页的卡片列表</h3>
      <p class="demo-desc">支持分页功能，可以切换页码和每页条数</p>
      <PaginatedCardList />

      <h3>3. 自定义插槽</h3>
      <p class="demo-desc">使用自定义插槽来定制卡片内容和样式</p>
      <CustomSlotsCardList>
        <template #field-status="{ value }">
          <Tag :color="value === 'active' ? 'green' : 'red'">
            {{ value === 'active' ? '激活' : '停用' }}
          </Tag>
        </template>
      </CustomSlotsCardList>

      <h3>4. 完整功能示例</h3>
      <p class="demo-desc">展示所有功能：标题、帮助提示、自定义插槽、分页、事件等</p>
      <div class="action-buttons">
        <Space>
          <Button type="primary" @click="handleRefresh">刷新</Button>
          <Button @click="handleSetData">设置数据</Button>
          <Button @click="handleReset">重置</Button>
        </Space>
      </div>
      <FullFeaturedCardList>
        <template #card-extra="{ row }">
          <Space>
            <Button type="link" size="small" @click.stop="handleEdit(row)"> 编辑 </Button>
            <Button type="link" size="small" danger @click.stop="handleDelete(row)"> 删除 </Button>
          </Space>
        </template>

        <template #card-actions="{ row }">
          <Button type="primary" size="small" @click.stop="handleView(row)"> 查看详情 </Button>
        </template>

        <template #field-status-full="{ value }">
          <Badge
            :status="value === 'active' ? 'success' : 'error'"
            :text="value === 'active' ? '激活' : '停用'"
          />
        </template>
      </FullFeaturedCardList>
    </div>
  </Page>
</template>

<style scoped>
.card-list-demo {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}

h3 {
  margin-top: 30px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 18px;
  font-weight: 500;
}

.demo-desc {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.action-buttons {
  margin-bottom: 16px;
}

.full-featured-wrapper {
  background-color: #f5f5f5;
}

.full-featured-list {
  background-color: white;
  border-radius: 8px;
}
</style>
